I encountered an issue with my code after adding the update function. I am now constantly receiving an error message: "THREE.WebGLRenderer.render: camera is not an instance of THREE.Camera" and I am unsure of how to resolve it. While I did find a similar question on StackOverflow, the answer provided was not helpful.
function initialize(){
var scene = new THREE.Scene();
var box = getBox(1 , 1, 1);
var plane = getPlane(4);
scene.add(box);
scene.add(plane);
box.position.y = box.geometry.parameters.height/2;
plane.rotation.x = Math.PI/2;
var camera = new THREE.PerspectiveCamera(
45,
window.innerWidth/window.innerHeight,
1,
1000
);
camera.position.z = 5;
camera.position.x = 1;
camera.position.y = 2;
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
document.getElementById('webgl').appendChild(renderer.domElement);
update(renderer,scene,camera);
return scene;
}
function getBox(width, height, depth){
var geometry = new THREE.BoxGeometry(width, height, depth);
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function getPlane(size){
var geometry = new THREE.PlaneGeometry(size,size);
var material = new THREE.MeshBasicMaterial({
color: 0xff0000,
side : THREE.DoubleSide
});
var mesh = new THREE.Mesh(
geometry,
material
);
return mesh;
}
function update(renderer, scene, camera) {
renderer.render(
camera,
scene
);
requestAnimationFrame(function () {
update(renderer,scene,camera);
});
}
var scene = initialize();