javascript - 如何在Three.js中添加PointerLockControl？

Question

如何在Three.js中正确添加PointerLockControl？我尝试使用示例，但没有运气，总是出现某种错误。我通过头部导入库，像 <script src="lib/controls/PointerLockControls.js"></script>

如果我这样做

function createControls(){
controls = new THREE.PointerLockControls( camera, document.body );}

我在 PointerLockControls.jf 文件中遇到错误

ReferenceError: Vector3 is not defined

错误所在的行看起来像这样

    var vec = new Vector3();

从哪里开始以及如何将其整齐地放入代码中？ 我正在使用这个example 。非常感谢您的帮助。这是我的代码

/*
My WebGL App
*/
let mainContainer = null;
let fpsContainer
let stats = null;
let camera = null;
let renderer = null;
let scene = null;
// Global variables

function init(){
    if ( THREE.WEBGL.isWebGLAvailable() === false ) container.appendChild( WEBGL.getWebGLErrorMessage() );
    fpsContainer = document.querySelector( '#fps' );
    mainContainer = document.querySelector( '#webgl-secne' );
    scene = new THREE.Scene();
    scene.background = new THREE.Color( 0xEEEEEE ); // http://www.colorpicker.com/
    scene.fog = new THREE.Fog( 0xffffff, 0, 750 );



    createStats();
    createCamera();
    createControls();
    createLights();
    createMeshes();
    createRenderer();
    renderer.setAnimationLoop( () => {
    update();
    render();
  } );
}

// Animations
function update(){

}

// Statically rendered content
function render(){
    stats.begin();
    renderer.render( scene, camera );
    stats.end();
}

// FPS counter
function createStats(){
    stats = new Stats();
    stats.showPanel( 0 );   // 0: fps, 1: ms, 2: mb, 3+: custom
    fpsContainer.appendChild( stats.dom );
}

// Camera object
function createCamera(){
    const fov = 75;
    const aspect =  mainContainer.clientWidth / mainContainer.clientHeight;
    const near = 0.1;
    const far = 500;    // meters
    camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set( 0, 10, 0 );
}

// Interactive controls
function createControls(){}

// Light objects
function createLights(){}

// Meshes and other visible objects
function createMeshes(){
    const geo = new THREE.PlaneBufferGeometry(1000, 1000, 100, 100);
    const mat = new THREE.MeshBasicMaterial({ color: 0x98FB98, side: THREE.DoubleSide });
    const plane = new THREE.Mesh(geo, mat);
    plane.rotateX( - Math.PI / 2 );

    scene.add(plane);
}

// Renderer object and features
function createRenderer(){
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(mainContainer.clientWidth, mainContainer.clientHeight);
    renderer.setPixelRatio( window.devicePixelRatio );
    // renderer.setClearColor(0xEEEEEE);
    mainContainer.appendChild( renderer.domElement );
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}

window.addEventListener( 'resize', onWindowResize, false );
init();

Answer 1

您似乎正在使用 PointerLockControls 的 ES6 模块版本。如果您没有在应用程序中使用模块，请尝试使用以下文件:

https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/PointerLockControls.js

三.js R110