three.js 漫游动画 + 键盘监听漫游

three.js 漫游动画 + 键盘监听漫游 应需求需要在模型中自主漫游

image

一开始是在3DMAX中做的 漫游动画 然后threejs 跟随漫游动画相机

直接上代码
function loaderlj() {
    // 加载压缩的glb模型
    let material = null;
    const gltfLoader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath("./draco/gltf/");
    dracoLoader.setDecoderConfig({type: "js"});
    dracoLoader.preload();
    gltfLoader.setDRACOLoader(dracoLoader);
    // const loader = new GLTFLoader().setPath('./model/');
    gltfLoader.load('./model/lj.glb', function (gltf) {

     //   gltf.scene.scale.set(20, 20, 10)
        const object=gltf.scene;
       //
     scene.add(gltf.scene);
     console.error("动画",gltf)
        var a=0;

         console.log("gltf动画"+gltf.animations[a].name, gltf.animations)

             //if(gltf.animations[a].name=="CHAction.001"){
                mixerlj = new THREE.AnimationMixer(scene);
             for (var i = 0; i < gltf.animations.length; i++) {
            //        console.log("动画", gltf.animations[i])
                    var clip = gltf.animations[i];
                    actionlj=mixerlj.clipAction(clip)
    				console.log(endTime)
                 actionlj.time = 0;
                 actionlj.play();
             }
           


    }, function (xhr) {
        //进度条
     
    });




}
循环函数中
 if(cameraMixer){
         // 渲染循环

     	 //  mixer.update(0.01);
         const delta = clock.getDelta();
         cameraMixer.update(delta); // 更新动画
            console.log("播放动画")
         if (animationCamera) {
             virtualCamera.position.set(animationCamera.position);
             virtualCamera.position.copy(animationCamera.position);
             virtualCamera.quaternion.copy(animationCamera.quaternion);

         }

      }

后续说想自主漫游就像玩游戏一样 W、A、S、D移动 话不多说直接上代码
window.addEventListener('keydown', keyDown); //添加页面监听按键
`window.addEventListener('keyup', keyUp);
// 设置键盘事件监听器


function keyDown(event) { 
	keys[event.keyCode] = true; 
} 

function keyUp(event) { 
	keys[event.keyCode] = false; 
}
//刷新函数
	// 根据按键更新相机的位置 
	moveSpeed为速度 rotateSpeed转向速度 建议设置0.1
   	if (keys[87]) { // W键:向前移动 
   	virtualCamera.position.z -= moveSpeed; 
   	} 
   	if (keys[83]) { 
   		// S键:向后移动 
   		virtualCamera.position.z += moveSpeed;
   	 } 
   	 if (keys[65]) { 
   	 // A键:向左移动 
   	 virtualCamera.position.x -= moveSpeed;
   	 } 
   	  if (keys[68]) { 
   	  // D键:向右移动 
   	  virtualCamera.position.x += moveSpeed;
   	   } 
            if (keys[81]) { // q键:向左旋转
                virtualCamera.rotation.y += rotateSpeed;
            }
            if (keys[69]) { // e键:向右旋转
                virtualCamera.rotation.y -= rotateSpeed;
            }

   renderer.render(scene, virtualCamera);
	`
	
posted on 2023-09-08 16:41  JavaWang  阅读(157)  评论(0编辑  收藏  举报