Dog (.fbx)

index.html

@@ -15,6 +15,8 @@
 		<script src="node_modules/three/examples/js/loaders/MTLLoader.js"></script>
 		<script src="node_modules/three/examples/js/loaders/OBJLoader.js"></script>
 		<script src="node_modules/three/examples/js/loaders/GLTFLoader.js"></script>
+		<script src="node_modules/three/examples/js/libs/inflate.min.js"></script>
+		<script src="node_modules/three/examples/js/loaders/FBXLoader.js"></script>
 		<script src="node_modules/three/examples/js/loaders/ColladaLoader.js"></script>
 		<script src="dist/lib/Log.js"></script>
 		<script src="dist/post/index.js"></script>

models/dog/pup_lohound.dae

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:21a46c13eb056e2cdb74d8b40e52e882a1243f4ebd2014762ab6582ede84f00b
+size 2589509

models/dog_fbx/puppy-snapchat.fbx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a302ec3ad7ea7f066df210db1e6579e2ca3b0807a0aad7f0014a628e6504bdd9
+size 4740684

src/index.ts

@@ -1,7 +1,11 @@
 import * as THREE from 'three';
 
 const scene = new THREE.Scene();
-scene.background = new THREE.Color(0xcccccc);
+scene.background = new THREE.Color(
+	// 0xcccccc
+	'white'
+);
+const clock = new THREE.Clock();
 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000);
 camera.position.set(0, 30, 50);
 camera.lookAt(0, 3, 0);
@@ -14,6 +18,8 @@ renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(renderer.domElement);
 const stats = new Stats();
 document.body.appendChild(stats.dom);
+/// Anim mixer
+const mixers: THREE.AnimationMixer[] = [];
 
 class Assets {
 	private static loadEggMtl(): Promise<THREE.Material[]> {
@@ -65,6 +71,33 @@ class Assets {
 			);
 		});
 	}
+	static loadDogDae(): Promise<{
+		animations: THREE.AnimationClip[];
+		scene:      THREE.Group;
+	}> {
+		/// In Dae/Collada: did not manage to get 
+		/// either the anims or the texture.
+		return new Promise((resolve, reject) => {
+			const loader: THREE.AnyLoader = new (<any>THREE).ColladaLoader();
+			loader.load(
+				`models/dog/pup_lohound.dae`,
+				(collada) => {
+					resolve(collada);
+				}
+			);
+		});
+	}
+	static loadDogFbx(): Promise<THREE.Group> {
+		return new Promise((resolve, reject) => {
+			const loader: THREE.AnyLoader = new (<any>THREE).FBXLoader();
+			loader.load(
+				`models/dog_fbx/puppy-snapchat.fbx`,
+				(fbx) => {
+					resolve(fbx);
+				}
+			);
+		});
+	}
 }
 class Utils {
 	static boundingBox(o: THREE.Object3D): [THREE.Vector3, THREE.Vector3] {
@@ -89,13 +122,12 @@ class Utils {
 	cube.position.x = 7;
 	scene.add(cube);
 	
+	
 	{
 		const egg = await Assets.loadEgg();
 		c.log(egg);
 		egg.scale.setScalar(.2);
 		egg.rotateX(-Math.PI / 2);
-		// c.log(egg.rotation);
-		// c.log(Utils.boundingBox(egg));
 		const box = new THREE.BoxHelper(egg);
 		scene.add(box);
 		scene.add(egg);
@@ -115,6 +147,24 @@ class Utils {
 		const box = new THREE.BoxHelper(egg, new THREE.Color('red'));
 		scene.add(box);
 	}
+	{
+		////// dog_fbx
+		const dog = await Assets.loadDogFbx();
+		// c.log((<any>dog).animations);
+		const mixer = new THREE.AnimationMixer(dog);
+		const clip: THREE.AnimationClip = (<any>dog).animations.find(clip => clip.name === "lohound|lohoundAction");
+		/// ^^ this is the main parent animation! Do not play all children.
+		c.log(clip);
+		mixer.clipAction(clip).play();
+		mixers.push(mixer);
+		const container = new THREE.Group();
+		container.add(dog);
+		container.scale.setScalar(0.007); /// <- scale a container, not the dog itself or it'll fuck the anims.
+		container.position.x = 12;
+		scene.add(container);
+		const box = new THREE.BoxHelper(container, new THREE.Color('green'));
+		scene.add(box);
+	}
 	
 	// const geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
 	// const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
@@ -132,9 +182,18 @@ class Utils {
 /**
  * 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();
-	renderer.render( scene, camera );
+	const delta = clock.getDelta();
+	for (const mixer of mixers) {
+		mixer.update(delta);
+	}
+	renderer.render(scene, camera);
 }
 function animate() {
 	requestAnimationFrame(animate);