Collada with animation

Questions
1

Hello i run into the problem that i can get my exported .dae including animated action running in this example:

but i cannot get the animation running when using the latest three.js master example:

https://threejs.org/examples/webgl_loader_collada_skinning.html

the animation is not triggered automaticly and console prints out the bones, don’t know why:

Bildschirmfoto 2020-03-05 um 11.56.23

i think the first example uses older revision of three js master. how can i export my dae accordingly so it will also playback in the newest version? i would like to stick with dae since my whole code is working except for triggering an animation from the dae.

2

Is there a special reason for using Collada? Because of the complex specification of this 3D format, ColladaLoader only supports a subset of the actual features.

I suggest you use the more modern glTF which is the recommended 3D format of three.js. If possible, directly export to glTF from your DCC tool. Otherwise try to convert existing DAE files with the following CLI tool:

3

there is no other reason to use dae, besides i know how to export them, they used to work in my three js projects so far, and that gltf doesnt preview in macOS so i never know if i exported it correctly. Is there a simple example available or tutorial on how to export and import animated gltf?

4

There is small guide in the official documentation that talks about loading glTF assets. I would start from there: https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models

Notice that the latest Blender version has a built-in glTF importer/exporter. So it’s possible to import Collada files and export them as glTF.

5

If i load a glb like so:

var loader = new THREE.GLTFLoader();

  loader.load(
  // resource URL
  'gltf/head.glb',
  // called when the resource is loaded
  function ( gltf ) {

    scene.add( gltf.scene );

    gltf.animations; // Array<THREE.AnimationClip>
    //gltf.scene; // THREE.Group
    //gltf.scenes; // Array<THREE.Group>
    //gltf.cameras; // Array<THREE.Camera>
    //gltf.asset; // Object

  },
  // called while loading is progressing
  function ( xhr ) {

    console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

  },
  // called when loading has errors
  function ( error ) {

    console.log( 'An error happened' );

  }
);

it doesnt show and i dont know how to acces the object, for example for scaling.
i think i lack the understanding of how glft works, cause the the object is added to scene in the load function and i dont know what that object is called now, and how to acces it.

this seems rather complicated to me but i am not a professioal programmer, though did several projects with three.js before that seemed very straight forward with loading json or collada.

6

Well, you can scale the asset like so:

gltf.scene.multiplyScalar( 2 );

You can drag’n’drop the glb into this viewer and quickly verify if the asset is valid:

If you see a proper results, there might be something wrong with your scene (e.g. missing lights, wrong camera parameters).

7

thank you. yes the gltf is loading properly in the viewer above. i managed to get the model to load with comparing it to this code:

this has been a HUGE help. i recomend to anyone to use this as reference if you, like me don’t understand gltf structure!

now i only need to trigger the animation somehow! it is triggered in the viewer, so it must be working.

8

could someone do me a favor and look at this code, cause the animation is not starting. though shows log that there is the animation named Action1 inside the glft scene, and it also plays in the viewer online:

animation body { margin: 0; } canvas { width: 100%; height: 100% } 
	<script>
	try{

		
		var camera, scene, clock, mixer, mesh, renderer, mixer;

		init();
		animate();

		function init() {
			clock = new THREE.Clock();
			scene = new THREE.Scene();
			var light1 = new THREE.PointLight(0xffffff, 0.8);
			light1.position.set(200, 0, -200);
    			scene.add(light1);

    			var light2 = new THREE.PointLight(0xffffff, 0.9);
    			light2.position.set(200, 0, 200)
    			scene.add(light2);

			camera = new THREE.PerspectiveCamera( 35, window.innerWidth/window.innerHeight, 0.1, 1000 );
			camera.position.set(500,0,0);
			camera.lookAt(0,0,0);

			var loader = new THREE.GLTFLoader();
			loader.load( 'model/head.gltf', function ( gltf ) {
				
				//console.log(gltf.animations[ 0 ]);
				mixer = new THREE.AnimationMixer(gltf.scene);
				var action = mixer.clipAction( gltf.animations[ 0 ] );
				action.play();

				//console.log(gltf);
				mesh = gltf.scene;
				//console.log(mesh.children[0].children[2]);
				mesh.children[0].children[2].material = new THREE.MeshStandardMaterial({
					color: 0xFF0000,
                    roughness: .1,
                }); ;

				scene.add( mesh );
				mesh.rotation.y = 1.5;
				
			});
			

			renderer = new THREE.WebGLRenderer();
			renderer.setClearColor(0x000000);
    		renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );
			
			
		}

		
		function animate(){
			requestAnimationFrame(animate);
			
			var delta = clock.getDelta();
			if ( mixer ) mixer.update( delta );
			renderer.render(scene,camera);
			
		};
		
	}catch(e){
		console.log(e);
	}
	</script>
</body>

i think it is cause of the mixer. cause if i take if (mixer) away it results in mixer is undfined…

9

Instead of assigning a new instance of MeshStandardMaterial, it’s better to modify the existing one. Otherwise you overwrite properties like skinning which controls wether the object is influenced by skeletal animation or not. Change your code to:

mesh.children[0].children[2].material.color.set( 0xff0000 );
mesh.children[0].children[2].material.roughness = 0.1;
10

this solved the issue! thank u!
but curious: what if i want to use a different material, for example MeshLambert instead of MeshStandard?

11

Then you have to modify skinning and probably other material parameters so certain features like animation works.

12

ok! but how about when i want to acces the parameters from outside the loader loop. say i want to add an envMap to tthe material that i created after the function?