如何在 Three.js PointerLockControl 中添加? [英] How to add in Three.js PointerLockControl?

问题描述

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

How to correctly add in Three.js PointerLockControl? I tried using examples, but no luck, always get some kind of error. I import libraries through the head part like that <script src="lib/controls/PointerLockControls.js"></script>

如果我这样做

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

我在 PointerLockControls.jf 文件中出错

I got error in PointerLockControls.jf file

ReferenceError: Vector3 is not defined

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

That line where error is, looks like this

    var vec = new Vector3();

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

Where to start and how to put it neatly in the code? I am using this one example. Thank you very much for your help. There is my code

/*
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();

推荐答案

看来您正在使用 PointerLockControls 的 ES6 模块版本.如果您没有在应用中使用模块，请尝试使用以下文件:

It seems you are using the ES6 module version of PointerLockControls. If you are not using modules in your app, try it with the following file instead:

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

three.js R110

这篇关于如何在 Three.js PointerLockControl 中添加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！