Technical Implementation of the "Life Cabin" 3D Virtual Scene in Taobao Life

This article shares the technical solution behind the new "Life Cabin" feature developed by the Taobao Life team, focusing on building a virtual 3D scene, controlling virtual characters, enabling human‑scene interaction, and optimizing rendering performance.

Project background : Taobao Life is a lightweight game inside the Taobao app that offers avatar customization, dressing, beauty, and photo functions. To enrich social scenarios, the team created a virtual house where users can place furniture, interact with objects, and explore new gameplay.

Technical framework : The cabin is built on the team’s self‑developed Web3D engine Hilo3D, which renders via WebGL onto a canvas. The work is divided into three major parts: indoor scene construction, character management, and game‑logic development.

Step 1 – Load indoor scene : 3D models are created in software such as Maya, exported as USD, processed with Houdini to generate shadow and LOD GLTF files, and finally imported into Hilo3D using the GLTF importer.

Step 2 – Load furniture models : The same pipeline is applied to each piece of furniture. After loading, a root scene node is created, floor nodes are added, and furniture meshes are attached to the appropriate floor nodes for easy batch operations (e.g., hide all floor furniture).

Step 3 – Camera setup : The three core elements of a 3D render—scene, camera, renderer—are configured. Both perspective and orthographic cameras are discussed; the perspective camera provides realistic depth, while the orthographic camera keeps object size constant.

Step 4 – Camera controls : OrbitControls are added so that mouse dragging rotates the camera around the scene center. When the camera moves to a top‑down view, the field‑of‑view (FOV) is increased to widen the visible area.

Step 5 – Conditional mesh hiding : Certain meshes (e.g., walls, door frames) are hidden based on camera position. Example code:

// Hide door frame when camera Z > door frame Z camera.worldPosition.z > doorEdge.worldPosition.z

Character control : A virtual avatar is loaded and controlled via a joystick. To keep the avatar always in view, the camera is parented to the avatar node with a fixed offset, achieving a follow‑camera effect.

Game logic includes:

Furniture selection using raycasting.

Furniture dragging by projecting mouse/touch points onto the floor plane.

Collision detection between the avatar and furniture, initially using raycasting and later a grid‑based (tile) approach to improve performance.

Interaction triggers (e.g., lying on a bed) activated when the avatar approaches predefined points.

Visual optimization : Traditional real‑time shadow rendering requires a shadow map per light source, which is costly. The article presents three optimization strategies: limit shadow‑casting lights, use baked light‑maps, and employ fake shadows (projected textures). Furniture shadows are baked offline, while character shadows use off‑screen rendering for real‑time updates.

Conclusion and outlook : The "Life Cabin" demo demonstrates a complete pipeline from asset preparation to interactive gameplay. Future work will focus on enhancing social features, adding global illumination via offline baking, and expanding the range of interactive scenarios.