How to animate a glb with GTLF loader in THREE.js

Question

 <!DOCTYPE html> <html> <head> <title>____________glTF2_Loader_________</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> </head> <body> <script src="three.js"></script> <script src="GLTFLoader.js"></script> <script src="OrbitControls.js"></script> <script> // Load 3D Scene var scene = new THREE.Scene(); // Load Camera Perspektive var camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 1, 20000 ); camera.position.set( 1, 1, 20 ); // Load a Renderer var renderer = new THREE.WebGLRenderer({ alpha: false }); renderer.setClearColor( 0xC5C5C3 ); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var controls = new THREE.OrbitControls( camera, renderer.domElement ); //load in camera controls controls.update(); // Load the Orbitcontroller // Load Light var ambientLight = new THREE.AmbientLight( 0xcccccc, 2); // NOTE: More ambience gives an etherial look. :O scene.add( ambientLight ); var PointLight = new THREE.PointLight( 0xffffff, 3, 100, 2 ); //color (white), intensity (3 times) PointLight.position.set( 4, -4, 1 ).normalize(); scene.add( PointLight ); // _____ TODO!!!: FADE INTO SCENE. ___________ // glTf 2.0 Loader var mixer; var clock = new THREE.Clock(); var loader = new THREE.GLTFLoader(); let obj; loader.load( './models/ZOMBIIIL12.glb', function ( gltf ) { // <<--------- Model Path mixer = new THREE.AnimationMixer(gltf.scene); obj = gltf.scene; var action = mixer.clipAction( gltf.animations[ 0 ] ); console.log( action ); gltf.scene.scale.set( .5, .5, .5 ); gltf.scene.position.x = 0; //Position (x = right+ left-) gltf.scene.position.y = -5; //Position (y = up+, down-) gltf.scene.position.Z = 5; //Position (z = front +, back-) gltf.scene.rotation.y = 90; //rotating on the y axis, + is towards the right, - is towards the left. obj.rotation.y = camera.rotation.y; var URll = './texture maps/Material Base Color.png'; var textT = THREE.ImageUtils.loadTexture( URll ); var materiall = new THREE.MeshPhongMaterial({ map : textT, }) gltf.texture = materiall; scene.add( gltf.scene ); action.play(); }); function animate() { renderer.render(scene, camera); requestAnimationFrame( animate ); } function render() { renderer.render( scene, camera ); } var geometry2 = new THREE.PlaneGeometry( 30, 20, 32 ); var url = './texture maps/GREEN LEAVES.png'; var texture = THREE.ImageUtils.loadTexture( url ); var material2 = new THREE.MeshPhongMaterial({ map : texture, }) var plane = new THREE.Mesh( geometry2, material2 ); plane.position.z = -1; scene.add( plane ); /* var xSpeed = .1; var zSpeed = .1; document.addEventListener("keydown", onDocumentKeyDown, false); //while the document is active, listen for this event called keydown, and run function onDocumentKeyPress x1 = 0; function onDocumentKeyDown(event) { var keyCode = event.which; if (keyCode == 87) { //obj.rotation.y += .05; //rotates the model so that you change where it is facing. obj.translateZ( .5 ); // camera.rotation.y = obj.rotation.y; camera.translateZ( .5 ); camera.position.y = obj.position.y - 1.9; // camera.position.y = obj.position.y - 1.9; //++++++++++++++++++ WWWWWW KEYYYYYYYY (forward) } else if (keyCode == 83) { obj.translateZ( -0.5 ); camera.translateZ( -0.5 ); camera.position.y = obj.position.y - 1.9; console.log(obj.position.y) //camera.position.set(obj.position.x, camera.position.y, camera.position.z); //updates z position by the amount of speed. // obj.rotation.y = 90; // camera.rotation = 90; //camera.translateZ( .1 ); //++++++++++++++++++ SSSSSSS KEYYYYYYYY (back) } else if (keyCode == 65) { //obj.rotation.y += 90; obj.translateX( -.5 ); camera.translateX( -.5 ); camera.position.z = obj.position.z + 20; //++++++++++++++++++ AAAAAAA KEYYYYYYYY (left) /// If camera rotation on the y is less than or greater than a certain value, then rotate it on the mouse movement, otherwise, nothing. } else if (keyCode == 68) { obj.translateX(.5); camera.translateX(.5); camera.position.z = obj.position.z + 20; //++++++++++++++++++ DDDDDD KEYYYYYYYY (rigtht) } else if (keyCode == 32) { obj.position.set(0, 0, 0); // console.log(obj.position.x); //space bar } //camera.rotation.x += 0.05 }; */ render(); animate(); </script> </body> </html>

above code works to load in the model, however, it does not play the animation when called. I get no errors but it still does not work. The console even logs the action animation that is loaded from the glb model showing that it is there. i tried acting as though it is a json, and using json loader animator functions. I tried using clipaction functions, but they only gave me errors saying that they were either undefined, or just would say that there was an error.

Answer 1

You have to update your animation mixer in your animation loop like so:

var delta = clock.getDelta();
if ( mixer ) mixer.update( delta );

Notice that clock is an instance of THREE.Clock . Create it similar to your camera and scene at the top of your file.

three.js R112

How to animate a glb with GTLF loader in THREE.js

Question

1 answers

solution1
0 ACCPTED 2020-01-26 09:34:46

How to animate a glb with GTLF loader in THREE.js

Question

1 answers

solution1 0 ACCPTED 2020-01-26 09:34:46

solution1
0 ACCPTED 2020-01-26 09:34:46