How to control imported Collada bones?

Questions
, ,
1

Dear friends,

I’m trying to load a Blender exported Collada model to three.js but I’m not being able to access and control (rotate) the imported bones? The bones don’t have animations on them, and the mesh was skinned to it in Blender.

I got to import the scene with ColladaLoader 2 and it displays ok.

How can I do it?

Thank you!

2

I think I got it :wink: thanks!

3 
	<script src="js/three.js"></script>
	<script src="js/loaders/ColladaLoader2.js"></script>
	<script src="js/Detector.js"></script>


	<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

		var container, stats, clock;
		var camera, scene, renderer, malha;

		init();
		animate();


		///////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////

		function init() {

			container = document.getElementById( 'container' );

			scene = new THREE.Scene();
			clock = new THREE.Clock();

			// loading manager
			var loadingManager = new THREE.LoadingManager( function() {
				scene.add( malha );
			} );

			// collada import
			var loader = new THREE.ColladaLoader( loadingManager );
			loader.options.convertUpAxis = true;
			loader.load( 'assets/scaleneC-03.dae', function ( collada ) {
				malha = collada.scene;
			} );


			// setup camera
			camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000 );
			camera.position.set( 12, 12, 16 );
			camera.lookAt( new THREE.Vector3( 0, 1, 0 ) );


			// setup lights
			var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.5 );
			scene.add( ambientLight );

			var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
			directionalLight.position.set( 1, 1, 0 ).normalize();
			scene.add( directionalLight );


			// setup render
			renderer = new THREE.WebGLRenderer();
			renderer.setPixelRatio( window.devicePixelRatio );
			renderer.setSize( window.innerWidth, window.innerHeight );
			container.appendChild( renderer.domElement );



			//
			window.addEventListener( 'resize', onWindowResize, false );

		}


		///////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////

		function animate() {


			scene.traverse(function(child){
        if (child instanceof THREE.SkinnedMesh){

            //child.rotation.y += 12;

            child.skeleton.bones[0].rotation.x += 0.01;
            child.skeleton.bones[1].rotation.x += 0.01;
            child.skeleton.bones[2].rotation.x -= 0.01;
            child.skeleton.bones[3].rotation.x -= 0.01;
        }
        else if  (child instanceof THREE.SkeletonHelper){
            child.update();
        }
    });


			// if ( malha !== undefined ) {
			// 	malha.rotation.z += delta * 0.05;
			// }


			requestAnimationFrame( animate );
			render();

		}


		///////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////

		function render() {
			var delta = clock.getDelta();

			renderer.render( scene, camera );

		}

		///////////////////////////////////////////////////////////////////////////////////
		///////////////////////////////////////////////////////////////////////////////////

		function onWindowResize() {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize( window.innerWidth, window.innerHeight );
		}








	</script>
1 Like