Skip to content

Instantly share code, notes, and snippets.

@DatsGabs

DatsGabs/three.html

Last active Mar 9, 2021
Embed
What would you like to do?
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script type="module">
import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'https://unpkg.com/three/examples/jsm/loaders/GLTFLoader.js'
let camera, scene, renderer, loader, model;
const delay = 250
init();
animate()
function init () {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
renderer = new THREE.WebGLRenderer({ antialias: true})
loader = new GLTFLoader();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor("#121212")
document.body.appendChild( renderer.domElement );
camera.position.z = 3;
const controls = new OrbitControls(camera, renderer.domElement);
// ambient light
const ambientLight = new THREE.AmbientLight ( 0xffffff, 0.2)
scene.add( ambientLight )
// point light
const pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set( 30, 50, 25 );
scene.add( pointLight );
window.addEventListener( 'resize', () => {
throttle(onWindowResize(), delay)
} );
loader.load( '/models/skull_downloadable/scene.gltf', function ( gltf ) {
model = gltf.scene
scene.add( model );
}, undefined, function ( error ) {
console.error( error );
} );
}
function throttle(callback, limit) {
console.log('hola')
let wait = false
return function () {
if (!wait) {
callback.apply(null, arguments)
wait = true
setTimeout(function () {
wait = false
}, limit)
}
}
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
if (model) {
model.rotation.y -= 0.01
}
renderer.render( scene, camera );
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment