I've recently started learning three.js by exploring the Getting Started section on their website and checking out some examples. However, I'm struggling to figure out a few key things.
My current goal is to create a cube (a box) and position the camera right in the middle of it so that I can see the inner side of each face. Is this even possible?
After reviewing the documentation, various examples, and browsing stackoverflow, I've come up with the following code snippet:
var camera, scene, renderer;
var isUserInteracting = false,
onMouseDownMouseX = 0, onMouseDownMouseY = 0,
lon = 0, onMouseDownLon = 0,
lat = 0, onMouseDownLat = 0,
phi = 0, theta = 0;
// Code for initializing the scene goes here...
function animate() {
requestAnimationFrame( animate );
update();
}
function update() {
if ( isUserInteracting === false ) {
// Logic for user interaction...
}
lat = Math.max( - 85, Math.min( 85, lat ) );
phi = THREE.Math.degToRad( 90 - lat );
theta = THREE.Math.degToRad( lon );
camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
camera.target.y = 500 * Math.cos( phi );
camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );
camera.lookAt( camera.target );
camera.position.z = 3;
renderer.render( scene, camera );
}
While I have managed to view the cube from the inside, it's not quite what I had envisioned. My ultimate aim is to position the camera precisely at the center of the cube and make it rotate on itself. However, I'm facing difficulties in determining the exact movements needed to achieve this effect.