What causes the scene in ThreeJS to only appear after clicking and moving the cursor?
The page remains black until I interact by clicking and moving, then everything shows up. I'm stumped on what the issue could be. Any assistance would be greatly appreciated :)
var origWidth = 1280;
var origHeight = 720;
//TODO WindowResize looks wierd, implement it properly
//var width = window.innerWidth;
//var height = window.innerHeight;
var width = origWidth;
var height = origHeight;
var Top = origHeight/2;
var Bottom = -origHeight/2;
var Left = -origWidth/2;
var Right = origWidth/2;
var renderer = null;
var scene = null;
var camera = null;
var Textures = {};
//Set the renderer engine
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
document.getElementsByTagName("body")[0].appendChild(renderer.domElement);
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
//Setup the Scene!
scene = new THREE.Scene;
//Camera
camera = new THREE.PerspectiveCamera(45, origWidth / origHeight, 0.1, 10000);
camera.position = new THREE.Vector3(0,-80,800);
scene.add(camera);
camera.lookAt(scene);
//TODO WindowResize looks wierd, implement it properly
//var windowResize = THREEx.WindowResize(renderer, camera);
//Light
var pointLight = new THREE.PointLight(0xffffff);
pointLight.position.set(0, 0, 900);
scene.add(pointLight);
//Debug
controlsObj = new THREE.OrbitControls(camera);
controlsObj.addEventListener('change', render);
axes = new THREE.AxisHelper( origWidth );
scene.add( axes );
/*var size = 10;
var step = 1;
var gridHelper = new THREE.GridHelper( size, step );
gridHelper.position = new THREE.Vector3( 10, 10, 0 );
gridHelper.rotation = new THREE.Euler( 45, 0, 0 );
scene.add( gridHelper );*/
var pointLightHelper = new THREE.PointLightHelper( pointLight, 10 );
scene.add( pointLightHelper );
//Add playing field
tablegeometry = new THREE.BoxGeometry(origWidth, origHeight, 40);
tablematerial = new THREE.MeshLambertMaterial({ color: 0xffff00, map: Textures.bg, side: THREE.DoubleSide });
tableobj = new THREE.Mesh(tablegeometry, tablematerial);
tableobj.position.set(0,0,-20); //TODO vec
scene.add(tableobj);
//ANNNND, Action !
render();
function render() {
console.log("render");
renderer.render(scene, camera);
}