Samui Villa

The Virtual Villa Tour is an immersive online experience designed to showcase the elegant design and architecture of a villa using advanced web technologies. This interactive tour is built with Three.js for a rich 3D visualization and WebSockets for real-time communication among participants. A lead speaker will guide visitors through various sections of the villa, providing insights into the room designs, architectural styles, landscaping, and materials used. For the next step, as the tour progresses, interactive UI pop-ups would provide detailed information about specific architectural elements, enhancing the educational value and engagement of the tour.

How to Navigate the Tour

To navigate through the villa during your virtual tour, use the following controls on your keyboard and mouse:

  • Walking: Use the "W" (forward), "A" (left), "S" (backward), and "D" (right) keys to walk through the villa.

  • Direction: Press and hold the left mouse button and move the mouse to change your direction and look around.

Enjoy exploring the villa at your own pace, and interact with the environment to learn more about the architecture and design

Inspiration

My inspiration comes from my first solo landscape project on Samui Island, in the south of Thailand. In the architectural industry, we typically present projects through videos and perspective images. What if we provided an interactive 3D model to help clients make design decisions before construction begins?

3D Model in Blender

I primarily use Blender for 3D modeling to apply materials and textures.

First Person Controls Setup

Camera and Controls Initialization: The camera is set up as a perspective camera, which mimics the way the human eye sees. It's positioned initially at coordinates (0, 3, 6) in the scene.

camera = new THREE.PerspectiveCamera(50, width / height, 0.1, 50);
camera.position.set(0, 3, 6);

Controls Object: The FirstPersonControls object is initialized with the scene, camera, renderer, and physics world. This object likely handles user inputs for movement and camera orientation, enabling the camera to move forward, backward, left, and right, and to turn around based on mouse movements.

controls = new FirstPersonControls(scene, camera, renderer, physicsWorld);

Movement and Interaction

Key Inputs: Movement is controlled using the "W", "A", "S", and "D" keys for moving forward, left, backward, and right, respectively. The actual key bindings are handled within the FirstPersonControls class, but they aren’t explicitly shown in the snippet. The ability to add a box into the scene by pressing the "b" key is shown, indicating how other key interactions might be integrated:

window.addEventListener("keyup", (ev) => {
    if (ev.key === "b") {
        addBox();
    }
});

Mouse Controls: The mouse controls the direction of the camera. Holding and moving the mouse changes the orientation of the camera, which is a typical setup for first-person navigation in 3D spaces. Specific details of how the mouse input is processed are encapsulated in the FirstPersonControls class.

Next Step

As users walk through, I want to create a user interface that shows material details and design concept descriptions for each area, room, and space. Additionally, for my other architectural and landscape architecture projects, I would like to develop an interactive website experience that allows people to explore 3D models and spaces on my online platform.

Previous

Class 8 - reading