three.js 漫游动画 + 键盘监听漫游
three.js 漫游动画 + 键盘监听漫游 应需求需要在模型中自主漫游
一开始是在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);
`