Camera follow path
I tried to improve the visual storytelling in this villa landscape. Start with the bird's-eye view to see the overall perspective of the villa landscape. Afterward, I walk through the villa's interior and show the normal human view. The text “Welcome to the villa“ will show at the end of the scroll.
Mouse Scroll
I want to create an experience that shifts to a ground-level walkthrough, inviting a closer, more personal exploration of the villa's interior spaces. Through this intimate lens, the visitor gains a deeper appreciation of the architectural details, interior design, and ambiance that breathe life into the villa.
let cameraPathPosition = 0;
function setupScrollAlongPathControls() {
// setup a path composed of multiple points
const cameraPath = new THREE.CatmullRomCurve3([
new THREE.Vector3(-50, 50, -50),
new THREE.Vector3(10, 15, -10),
new THREE.Vector3(10, 5, 10),
new THREE.Vector3(-10, 15, 10),
new THREE.Vector3(-15, 5, -10),
new THREE.Vector3(0, 2, -15),
new THREE.Vector3(0, 1, 0),
new THREE.Vector3(0, 2, 5),
new THREE.Vector3(0, 2, 10),
new THREE.Vector3(10, 10, 10),
new THREE.Vector3(0, 5, -20),
]); 
create a simple line to visualize the path
const points = cameraPath.getPoints(50);
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color: "yellow" });
const line = new THREE.Line(geometry, material);
line.position.set(0, -0.1, 0); // offset the line a bit so it remains visible
scene.add(line);
// set the camera to the start position
camera.position.set(-50, 50, -50);
camera.lookAt(0, 0, 0);The message at the end
At this pivotal moment, as the viewer feels most engaged with their surroundings, the message "Welcome to the villa" gracefully appears. This warm greeting not only marks the end of the scroll but also signifies an invitation to imagine oneself within the tranquil luxury of the villa landscape.
