I am encountering an issue with my three.js scene not rendering properly when I create a PointerLockControls object. I am at a loss as to what the problem might be.
Here is my main.js code:
const THREE = require("three");
var PointerLockControls = require('three-pointerlock');
//utils
import detect from "./detect"
import dialogs from "./dialogs"
import calc from "./calc"
import {Player} from "./charackters"
//3D stuff
import world from "./world"
//Scene creation
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
var controls = new PointerLockControls(camera);
camera.position.y = -50;
camera.position.z = 40;
camera.rotation.x = calc.rad(90);
//WebGL Renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x000000);
document.body.appendChild( renderer.domElement );
world.drawFloor(scene, THREE);
var cGeo = new THREE.BoxGeometry(10,10,10);
var cTexture = new THREE.MeshNormalMaterial();
var Cube = new THREE.Mesh(cGeo, cTexture);
scene.add(Cube);
//tick function
var clock = new THREE.Clock(true);
function animate() {
requestAnimationFrame(animate);
controls.update(clock.getDelta);
renderer.render( scene, camera );
}
if(detect.webgl()){
animate();
}else{
dialogs.error("Your browser does not support WebGL. Please install a modern Browser such as Google Chrome or Mozilla Firefox to play AlphaWars!", "Warning:")
}
If you require any of my additional files, please let me know.
Thank you in advance.