Having trouble correctly integrating the PointerLockControl in Three.js? Despite trying various examples, errors seem to persist. I've been importing libraries through the head part like this:
<script src="lib/controls/PointerLockControls.js"></script>When attempting the following code snippet:
function createControls(){
controls = new THREE.PointerLockControls( camera, document.body );}
An error occurs in the PointerLockControls.jf file:
ReferenceError: Vector3 is not defined
The problematic line looks like this:
var vec = new Vector3();
Where should one start and how can it be neatly integrated into the code? I am referencing this particular example. Your assistance is greatly appreciated. Here is my current 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-scene');
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();