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

最新推荐文章于 2024-07-08 16:22:29 发布

wang_Java_web

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量204

点赞数

分类专栏： three.js 文章标签： javascript 计算机外设开发语言 js

本文链接：https://blog.csdn.net/wanggeng_Java/article/details/132763630

版权

three.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

# three.js 漫游动画 + 键盘监听漫游应需求需要在模型中自主漫游
一开始是在3DMAX中做的漫游动画然后threejs 跟随漫游动画相机直接上代码
效果
http://img.nj-kj.com/d841f448-087e-4f5a-bb60-e4da3d6fb6be.gif

	直接上代码
	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);
	// 设置键盘事件监听器 
const keys = {}; 

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);