Isometric 3D Little Restaurant

Real-time rendering often demands too much power for too little soul. This component brings the warmth of a hand-crafted miniature to the browser. By leveraging baked textures, we achieve photorealistic lighting with the performance footprint of a simple image. It is not just a 3D model; it is a digital diorama that invites the user to inspect every corner with tactile orbit controls.

Core Technique

The visual fidelity does not come from expensive raytracing in the client. It relies on Texture Baking. Light, shadow, and ambient occlusion information is pre-calculated into a single baked.jpg texture and mapped onto the 3D geometry using MeshBasicMaterial.

• Zero Dynamic Lights: The scene contains no actual light sources. The “lighting” is painted onto the texture. This allows the scene to run at a silky 60 FPS even on mobile devices.
• Material Overrides: The code traverses the GLTF model structure. It applies the baked texture to most objects but intelligently swaps the material for specific elements (like the ‘Pasto’ grass) to introduce color variation without needing a separate texture map.
• Smart Rendering: The renderer is configured with outputEncoding = THREE.sRGBEncoding to ensure the baked colors display correctly on screens, maintaining the artist’s original intent.

Customization

The architecture separates the geometry from the visual style. You can drastically alter the mood by simply swapping the texture file or fine-tuning the camera constraints.

Restricting User Movement. Control how freely the user can explore the room.

// Controls configuration
controls.enableDamping = true; // Adds weight/inertia
controls.minDistance = 30;     // Allow closer zoom
controls.maxDistance = 100;    // Restrict far zoom

// Limit vertical angle to prevent seeing "under" the floor
controls.maxPolarAngle = Math.PI / 2; 

Selective Material Application. Target specific meshes by name to apply different effects, such as a glossy finish or a solid color.

model.traverse((child) => {
    // Apply baked texture generally
    child.material = bakedMaterial;

    // Target specific object by name from Blender/3D software
    if (child.name === 'Pasto') {
        child.material = new THREE.MeshBasicMaterial({ color: 0x3c6436 });
    }
    
    // Add a glowing effect to a lamp
    if (child.name === 'Lamp_Light') {
        child.material = new THREE.MeshBasicMaterial({ color: 0xffffee });
    }
});

Browser Support

This snippet uses Three.js, which relies on WebGL. Support is universal across all modern “evergreen” browsers.