Added support for animated models

boytchev · Dec 29, 2024 · 920505b · 920505b
1 parent b4c22ac
commit 920505b
Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/assets/models/Soldier/Soldier.glb b/assets/models/Soldier/Soldier.glb
diff --git a/docs/images/eggs.png b/docs/images/eggs.png
diff --git a/online/eggs.html b/online/eggs.html
@@ -29,11 +29,11 @@
 	<script type="module">
 
 		import { Color } from 'three';
-		import { install, params, model, USE_HEAD } from "./online.js";
+		import { install, params, model, USE_BALL, ADD_AUTOROTATION } from "./online.js";
 		import { eggs } from "tsl-textures/eggs.js";
 
 
-		var gui = install( eggs );
+		var gui = install( eggs, USE_BALL, ADD_AUTOROTATION );
 
 		model.material.roughness = 0.15;
 

diff --git a/online/online.js b/online/online.js
@@ -14,9 +14,13 @@ const HOME_URL = '../';
 const USE_BALL = 0;
 const USE_CUBE = 1;
 const USE_HEAD = 2;
+const USE_ANIM = 3;
 
+// bitmasks
 const ADD_NOTHING = 0;
 const ADD_GRID = 1;
+const ADD_AUTOROTATION = 2;
+
 
 var params = {},
 	dynamics = {},
@@ -48,7 +52,8 @@ scene.add( ambientLight );
 
 var controls = new OrbitControls( camera, renderer.domElement );
 controls.enableDamping = true;
-controls.zoomSpeed = 10;
+controls.zoomSpeed = 5;
+controls.autoRotateSpeed = 1;
 
 var geometry = new THREE.BufferGeometry();
 
@@ -58,6 +63,7 @@ var model = new THREE.Mesh(
 );
 scene.add( model );
 
+var mixer, action;
 
 
 
@@ -84,6 +90,12 @@ onResize( );
 
 function animationLoop( /*t*/ ) {
 
+	if ( mixer ) {
+
+		mixer.update( 1/144 );
+
+	}
+
 	controls.update( );
 	light.position.copy( camera.position );
 	renderer.render( scene, camera );
@@ -92,7 +104,7 @@ function animationLoop( /*t*/ ) {
 
 
 
-function install( tslTexture, useGeometry=USE_BALL, addTexture=ADD_NOTHING ) {
+function install( tslTexture, useGeometry=USE_BALL, addFeature=ADD_NOTHING ) {
 
 	// adjust camera
 	if ( useGeometry == USE_BALL ) {
@@ -130,7 +142,7 @@ function install( tslTexture, useGeometry=USE_BALL, addTexture=ADD_NOTHING ) {
 
 
 	var texture;
-	if ( addTexture == ADD_GRID ) {
+	if ( addFeature & ADD_GRID ) {
 
 		texture = new THREE.TextureLoader().load( '../assets/textures/grid.png' );
 		texture.wrapS = THREE.RepeatWrapping;
@@ -140,33 +152,41 @@ function install( tslTexture, useGeometry=USE_BALL, addTexture=ADD_NOTHING ) {
 	}
 
 
+	if ( addFeature & ADD_AUTOROTATION ) {
+
+		controls.autoRotate = true;
+
+	}
+
 	// adjust geometry
 	switch ( useGeometry ) {
 
 		case USE_BALL:
 			geometry = new THREE.IcosahedronGeometry( 1, 20 );
 			geometry = mergeVertices( geometry );
 			geometry.computeTangents();
-			if ( addTexture !== ADD_NOTHING ) {
+			if ( addFeature & ADD_GRID ) {
 
 				texture.repeat.set( 6, 3 );
 				model.material.map = texture;
 
 			}
 
 			break;
+
 		case USE_CUBE:
 			geometry = new THREE.BoxGeometry( 2, 2, 2, 100, 100, 100 );
 			//geometry = mergeVertices( geometry );
 			geometry.computeTangents();
-			if ( addTexture !== ADD_NOTHING ) {
+			if ( addFeature & ADD_GRID ) {
 
 				texture.repeat.set( 2, 2 );
 				model.material.map = texture;
 
 			}
 
 			break;
+
 		case USE_HEAD:
 			geometry = new THREE.BoxGeometry( 2, 2, 2 );
 			new GLTFLoader().load(
@@ -183,6 +203,43 @@ function install( tslTexture, useGeometry=USE_BALL, addTexture=ADD_NOTHING ) {
 				} );
 			break;
 
+		case USE_ANIM:
+			geometry = new THREE.BoxGeometry( 2, 2, 2 );
+			new GLTFLoader().load(
+				'../assets/models/Soldier/Soldier.glb', ( result )=>{
+
+					//geometry = result.scene.children[ 0 ].geometry;
+					//geometry = mergeVertices( geometry );
+					//geometry.computeTangents();
+					var material = model.material;
+					scene.remove( model );
+					//model = new THREE.Mesh( geometry, model.material );
+					//geometry.needsUpdate = true;
+
+					model = result.scene.children[ 0 ];
+					model.scale.setScalar( 0.1 );
+
+					model.traverse( child => {
+
+						if ( child.isMesh ) {
+
+							child.material = material;
+							child.material.map = texture;
+
+						}
+
+					} );
+
+
+					mixer = new THREE.AnimationMixer( model );
+					action = mixer.clipAction( result.animations[ 3 ]);
+					action.play();
+
+					scene.add( model );
+
+				} );
+			break;
+
 	}
 
 	model.geometry = geometry;
@@ -524,4 +581,4 @@ function refreshSeed( event ) {
 }
 
 
-export { scene, model, install, params, light, ambientLight, USE_BALL, USE_CUBE, USE_HEAD, ADD_NOTHING, ADD_GRID, selectorParams, controls };
+export { scene, model, install, params, light, ambientLight, USE_BALL, USE_CUBE, USE_HEAD, USE_ANIM, ADD_NOTHING, ADD_GRID, ADD_AUTOROTATION, selectorParams, controls };
diff --git a/src/eggs.js b/src/eggs.js
@@ -4,20 +4,20 @@
 
 
 import { Color } from 'three';
-import { cross, exp, Fn, mix, mx_worley_noise_float, normalLocal, positionLocal, sub, tangentLocal, transformNormalToView } from 'three/tsl';
+import { cross, exp, Fn, mix, mx_worley_noise_float, normalLocal, positionGeometry, sub, tangentLocal, transformNormalToView } from 'three/tsl';
 
 
 
 var eggs = Fn( ( params ) => {
 
-	var pos = positionLocal.mul( exp( params.scale.div( 1 ) ) ).add( params.seed.sin().mul( 10 ) ).toVar( );
+	var pos = positionGeometry.mul( exp( params.scale.div( 1 ) ) ).add( params.seed.sin().mul( 10 ) ).toVar( );
 
 	var sizeYolk = params.sizeYolk.oneMinus();
 	var sizeWhite = params.sizeWhite.oneMinus();
 
 	var n = mx_worley_noise_float( pos ).toVar();
 	var whites = n.add( sizeWhite ).pow( 8 ).oneMinus().clamp( -0.5, 1 );
-	var yolks = n.add( sizeYolk ).pow( 18 ).oneMinus().clamp(0,1).pow( 0.4 ).clamp( 0, 1 );
+	var yolks = n.add( sizeYolk ).pow( 18 ).oneMinus().clamp( 0, 1 ).pow( 0.4 ).clamp( 0, 1 );
 
 	return mix( params.colorBackground, mix( params.colorWhite, params.colorYolk, yolks ), whites );
 
@@ -42,7 +42,7 @@ eggs.normal = Fn( ( params ) => {
 	var eps = 0.001;
 	var bump = 0.05;
 
-	var position = positionLocal.mul( exp( params.scale.div( 1 ) ) ).add( params.seed.sin().mul( 10 ) ).toVar( ),
+	var position = positionGeometry.mul( exp( params.scale.div( 1 ) ) ).add( params.seed.sin().mul( 10 ) ).toVar( ),
 		normal = normalLocal.normalize().toVar(),
 		tangent = tangentLocal.normalize().mul( eps ).toVar(),
 		bitangent = cross( normal, tangent ).normalize().mul( eps ).toVar();
@@ -64,7 +64,7 @@ eggs.normal = Fn( ( params ) => {
 
 eggs.roughness = Fn( ( params ) => {
 
-	var pos = positionLocal.mul( exp( params.scale.div( 1 ) ) ).add( params.seed.sin().mul( 10 ) ).toVar( );
+	var pos = positionGeometry.mul( exp( params.scale.div( 1 ) ) ).add( params.seed.sin().mul( 10 ) ).toVar( );
 
 	var sizeYolk = params.sizeYolk.oneMinus();
 
@@ -79,7 +79,7 @@ eggs.roughness = Fn( ( params ) => {
 eggs.defaults = {
 	$name: 'Eggs',
 
-	scale: 2,
+	scale: 1,
 
 	sizeYolk: 0.2,
 	sizeWhite: 0.7,