const scene = new THREE.Scene(); scene.background = new THREE.Color( // 0xcccccc 'white'); const clock = new THREE.Clock(); const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000); camera.position.set(0, 20, 50); camera.lookAt(0, 3, 0); new THREE.OrbitControls(camera); const ambientLight = new THREE.AmbientLight(0xffffff, 1); scene.add(ambientLight); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const stats = new Stats(); document.body.appendChild(stats.dom); /// Anim mixer const mixers = []; class Assets { static loadDogDae() { /// In Dae/Collada: did not manage to get /// either the anims or the texture. return new Promise((resolve, reject) => { const loader = new THREE.ColladaLoader(); loader.load(`models/dog_project_v2.dae`, (collada) => { resolve(collada); }); }); } static loadDogFbx() { return new Promise((resolve, reject) => { const loader = new THREE.FBXLoader(); loader.load(`models/dog-embedded_media.fbx`, (fbx) => { resolve(fbx); }); }); } } class TUtils { static boundingBox(o) { const bbox = new THREE.Box3().setFromObject(o); return bbox; } static flushYZero(o) { o.position.y = -(this.boundingBox(o)).min.y; } static perform(tween) { return new Promise(resolve => { tween.onComplete(resolve).start(); }); } } (async () => { /** * scene construction */ const gridHelper = new THREE.GridHelper(100, 100); scene.add(gridHelper); const axesHelper = new THREE.AxesHelper(50); scene.add(axesHelper); { ////// dog_fbx from Amine -> conversion Maya -> fbx const dog = await Assets.loadDogFbx(); c.log(dog); c.log(TUtils.boundingBox(dog)); const container = new THREE.Group(); container.add(dog); container.scale.setScalar(0.3); /// <- scale a container, not the dog itself or it'll fuck the anims. scene.add(container); const box = new THREE.BoxHelper(container, new THREE.Color('green')); scene.add(box); } })(); /** * MAIN() */ window.addEventListener('resize', onWindowResize, false); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } function render() { const delta = clock.getDelta(); for (const mixer of mixers) { mixer.update(delta); } renderer.render(scene, camera); } function animate() { requestAnimationFrame(animate); TWEEN.update(); render(); stats.update(); } animate();