2

我希望我不是在问一个明显的菜鸟问题，但我注意到在 three.js 官方示例中，PointerLockControls.js 允许鼠标指针锁定和 WASD 键导航。

我已经设法让鼠标指针锁定，但我很难让 WASD 键做任何事情。

也许这不是我需要开始的 .js 脚本？

我对此仍然很陌生，但我觉得我的文件非常接近！任何帮助，将不胜感激。

这是我的代码


import * as THREE from './three.js-master/build/three.module.js'
import {GLTFLoader} from './three.js-master/examples/jsm/loaders/GLTFLoader.js'
import {PointerLockControls} from './three.js-master/examples/jsm/controls/PointerLockControls.js'

if (typeof window !== 'undefined' && typeof window.THREE === 'object') {
  window.THREE.SimpleFPControls = SimpleFPControls;
}




const canvas = document.querySelector('.webgl')
const scene = new THREE.Scene()

const loader = new GLTFLoader
loader.load('assets/untitled.glb', function(glb){
    console.log(glb)
    const root = glb.scene;
    root.scale.set(0.01,0.01,0.01)


    scene.add(root);
}, function(xhr){
    console.log((xhr.loaded/xhr.total * 100) + "% loaded")
}, function(error){
    console.log('An error occured')
})


const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(0,0,2)
scene.add(light)




// const geometry = new THREE.BoxGeometry(1,1,1)
//const material = new THREE.MeshBasicMaterial({
//    color: 0x00ff00
//})
//const boxMesh = new THREE.Mesh(geometry,material)
//scene.add(boxMesh)

//BOILER PLATE CODE
const sizes = {
    width: window.innerWidth,
    height: window.innerHeight
}

const camera = new THREE.PerspectiveCamera(75, sizes.width/sizes.height, 0.1, 100)
camera.position.set(0,1,10)
camera.lookAt(0, 0, 0);
scene.add(camera)

//add document.body to PointerLockControls constructor
let fpsControls = new PointerLockControls( camera ,  document.body );

//add event listener to your document.body
document.body.addEventListener( 'click', function () {
    //lock mouse on screen
    fpsControls.lock();
}, false );

const renderer = new THREE.WebGLRenderer({
    canvas: canvas
})

renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMap.enabled = true
renderer.outputEncoding = true
document.body.appendChild(renderer.domElement)

function animate(){
    requestAnimationFrame(animate)
    renderer.render(scene,camera)
}

const controls = new PointerLockControls(camera, document.bodybody);

animate()
4

1 回答 1

0

PointerLockControls仅将事件侦听器添加到pointerlockchange,pointerlockerror和mousemove. 所以它处理鼠标捕获并将鼠标移动应用于相机以旋转它。

但是，该类不添加key事件侦听器。如果您仔细研究官方示例的源代码，您会发现这些事件监听器是在应用程序级别实现的。

于 2021-07-23T12:41:24.040 回答