# Collada with animation

**URL:** <https://discourse.threejs.org/t/collada-with-animation/13315>\
**Category:** Questions\
**Tags:** collada-loader\
**Created:** [March 5, 2020, 10:54am UTC](https://discourse.threejs.org/t/collada-with-animation/13315 "2020-03-05T10:54:45Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 10:54am UTC](https://discourse.threejs.org/t/collada-with-animation/13315/1 "2020-03-05T10:54:45Z")

</div>

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

> <https://github.com/josdirksen/learning-threejs/blob/85f85aeb137f0b01ba96c8b1bfd7019134e596ef/chapter-09/14-animation-from-collada.html>

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

[https://threejs.org/examples/webgl\_loader\_collada\_skinning.html](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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b9d4f81fcd03d7c95e11d1f396a38eb5816ba20c.png)

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 5, 2020, 11:10am UTC](https://discourse.threejs.org/t/collada-with-animation/13315/2 "2020-03-05T11:10:01Z")

</div>

> [@inputhone](#):
>
> how can i export my dae accordingly so it will also playback in the newest version?

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:

> **[GitHub - KhronosGroup/COLLADA2GLTF: COLLADA to glTF converter](https://github.com/KhronosGroup/COLLADA2GLTF/)**
>
> COLLADA to glTF converter. Contribute to KhronosGroup/COLLADA2GLTF development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 11:31am UTC](https://discourse.threejs.org/t/collada-with-animation/13315/3 "2020-03-05T11:31:47Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 5, 2020, 11:55am UTC](https://discourse.threejs.org/t/collada-with-animation/13315/4 "2020-03-05T11:55:21Z")

</div>

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](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`.

---

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 12:52pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/5 "2020-03-05T12:52:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 5, 2020, 1:04pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/6 "2020-03-05T13:04:31Z")

</div>

> [@inputhone](#):
>
> i dont know how to acces the object, for example for scaling.

Well, you can scale the asset like so:

```js
gltf.scene.multiplyScalar( 2 );

```

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

> **[glTF Viewer](https://gltf-viewer.donmccurdy.com/)**
>
> Drag-and-drop preview tool for glTF 2.0 3D models.

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

---

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 1:44pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/7 "2020-03-05T13:44:43Z")

</div>

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:

> **[soham0243/ThreeJSGLTF](https://github.com/soham0243/ThreeJSGLTF)**
>
> This is a simple GLTF Loader using three.js. Contribute to soham0243/ThreeJSGLTF development by creating an account on GitHub.

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.

---

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 2:11pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/8 "2020-03-05T14:11:59Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 5, 2020, 2:19pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/9 "2020-03-05T14:19:16Z")

</div>

> [@inputhone](#):
>
> mesh.children[0].children[2].material = new THREE.MeshStandardMaterial({ color: 0xFF0000, roughness: .1, }); ;

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:

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

```

---

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 2:25pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/10 "2020-03-05T14:25:01Z")

</div>

> [@Mugen87](#):
>
> mesh.children[0].children[2].material.color.set( 0xff0000 ); mesh.children[0].children[2].material.roughness = 0.1;

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 5, 2020, 2:28pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/11 "2020-03-05T14:28:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![inputhone](https://avatars.discourse-cdn.com/v4/letter/i/ecccb3/32.png) [@inputhone](https://discourse.threejs.org/u/inputhone)\
**Post date:** [March 5, 2020, 2:42pm UTC](https://discourse.threejs.org/t/collada-with-animation/13315/12 "2020-03-05T14:42:12Z")

</div>

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?