I'm relatively new to three.js and webgl programming. I managed to create a box in three.js, which is functioning correctly. However, I encountered an issue where the box disappears when I try setting the camera position along the z-axis (e.g., camera.position.z = 2;). Can someone help explain why this is happening and advise me on how to set the camera position properly?
Feel free to uncomment the camera.position.z = 2; in this example
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
//camera.position.z = 2;
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();