In my scene, I have a variety of elements such as a cube, cylinder, sphere, and more. The camera is positioned at (0,30,40) to display the entire scene, but I'm encountering issues with one specific element - a moving cube.
When I try to use the camera position (0,30,40) for the cube, it doesn't align correctly. However, if I change the camera position to (0,-400,400), the cube displays properly. This discrepancy can be seen in lines 30-32 of the JavaScript code below.
var angularSpeed = 0.2;
var lastTime = 0;
function animate(){
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
var angularChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
cube.rotation.y -= angularChange;
lastTime = time;
renderer.render(scene, camera);
requestAnimationFrame(function(){
animate();
});
}
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
/* Works */
camera.position.x = 0;
camera.position.y = -400;
camera.position.z = 400;
/* Does not work, but I want these to be the camera settings */
// camera.position.x = 0;
// camera.position.y = 30;
// camera.position.z = 40;
camera.rotation.x = 0.70;
var scene = new THREE.Scene();
var cube = new THREE.Mesh(new THREE.CubeGeometry(200,100,100), new THREE.MeshNormalMaterial());
scene.add(cube);
animate();
To view the same code in JSBin, click here.
I am seeking advice on how to address this issue. While I can adjust the cube's position using its APIs, tweaking cube.position.x, cube.position.y, and cube.position.z, it involves trial and error when working with specific camera settings like (0,30,40).
In an attempt to centralize multiple elements regardless of the camera position, I created a scene with various objects. Despite achieving success by modifying the cube's y position or dimensions, I question whether this method is feasible when all three coordinate axes require adjustment. Is there a more efficient solution?
Considering suggestions to use camera.lookAt(cube.position) raises concerns as I aim to focus on not just the cube but other elements like the cylinder, sphere, plane, polyhedron, torusknot, and torus within the same scene.