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

问题描述

<!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.

标签： javascriptthree.js

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

问题描述

解决方案

推荐阅读