I've been experimenting with some sample code using three.js, where I've created a plane and I want it to rotate around. Here's a snippet of my code:
This is the setup for my camera:
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(50, 50, 60);
camera.lookAt(scene.position);
And this is how I've defined my plane:
var planeGeometry = new THREE.PlaneGeometry(70, 30, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({ color: green });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);
I have more code, but here's a snippet related to rendering and animation:
renderScene();
function cameraUpdate() {
camera.position.x = cameraRadius * Math.cos(step);
camera.position.z = cameraRadius * Math.sin(step);
camera.lookAt(scene.position);
}
function renderScene() {
step += 0.05;
cameraUpdate();
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}
In the cameraUpdate function, if I don't include camera.lookAt(scene.position);, the rotation behaves oddly. But when I include it, I get the desired rotation of the plane on its own axis.
Now, I have a couple of questions:
- What does
scene.positionrepresent? - Why do I need to set the camera to look at the scene position in every animation frame? I'm confused about how its value changes when the camera rotates.
Any insights would be greatly appreciated!