In my concept, a square room is depicted where an object moves smoothly from corner to corner. The camera follows the object, facing the walls at all times but curving around in such a way that it maintains a continuous transition between walls without being exactly perpendicular. I aim for the object and camera to adjust their angle of view by 90 degrees when transitioning from one wall to another.
Approach Taken
To achieve this, I utilized a CatmullRomCurve3 created from an array of four coordinate sets representing the corners of the room. Both the object and camera animate along this curve successfully with the code provided. However, they currently focus (lookAt) on the path ahead of them. My intention is for them to retain the same motion but face the adjacent wall instead, offsetting their rotation by 90 degrees.
Specifically, I seek:
- Object and camera moving along the path while adjusting their
rotation/lookAtto constantly face a wall or corner. - I understand how to position the camera slightly behind the object for an over-the-shoulder perspective. Nevertheless, this will likely change as the object faces the walls, necessitating a different camera axis positioning explanation.
Code Fragment for Creating the Curve
var curve;
function createCurvePath() {
// Array of points
var points = [
[-80, 5, 35],
[-80, 5, 192.5],
[80, 5, 192.5],
[80, 5, 35]
];
// Convert the array of points into vertices
for (var i = 0; i < points.length; i++) {
var x = points[i][0];
var y = points[i][1];
var z = points[i][2];
points[i] = new THREE.Vector3(x, y, z);
}
// Create a closed curve
curve = new THREE.CatmullRomCurve3(points);
curve.closed = true;
var points = curve.getPoints(200);
var geomCurvePath = new THREE.BufferGeometry().setFromPoints(points);
var matCurvePath = new THREE.LineBasicMaterial({ color: 0xff0000 });
// Create the final object to add to the scene
var CurvePath = new THREE.Line(geomCurvePath, matCurvePath);
scene.add(CurvePath);
}
Code for Animation within the Render Loop
// Loop that runs every frame to render scene and camera
function render() {
requestAnimationFrame(render);
// Move camera along the path
percentage += 0.0005;
var p1 = curve.getPointAt(percentage % 1);
var p2 = curve.getPointAt((percentage + 0.01) % 1);
camera.position.set(p1.x, p1.y, p1.z);
object.position.set(p1.x, p1.y, p1.z);
camera.lookAt(p2);
object.lookAt(p2);
renderer.render(scene, camera);
}