3D Viewer — Technical Guide

1. Overview

The 3D viewer renders realistic window previews using Three.js r0.160.0. S7 added four enhancements to make glass rendering physically accurate:

2. Environment Map

Three.js MeshPhysicalMaterial with transmission needs an environment map for realistic refraction and reflection. Without it, glass appears flat.

How It Works

The sigma = 0.04 parameter produces slightly blurred reflections — premium and soft rather than mirror-sharp.

3. Multi-Layer Glass Rendering

Real insulating glass units (IGU) have 2–3 glass panes separated by gas-filled gaps with metallic spacer bars.

Layer Stack Visualization

Visual Scale

Real glass is 4mm thick — invisible at window scale. A visual scale factor of 3.0 is applied:

Spacer Bars

4. Composition String Parser

parseGlassComposition(str) converts WinArhi catalog strings into structured data.

Algorithm

1. Strip suffix (we) or (Ag, we) → set warmEdge flag
2. Split on - delimiter
3. Classify each segment:
   • Gap: purely numeric, ≤24mm, optional Ag/Aer suffix
   • Layer: leading digits = thickness, rest = material name
   • Laminate: digits >20 and ≥3 chars (e.g. 331 = 3+3+1 = 7mm)
4. Return { layers, gaps, warmEdge }

Tested Patterns

5. Glass Material Catalog

Each glass layer gets a MeshPhysicalMaterial with physically-based properties. Materials are cached in materialCache.

All materials: ior: 1.52, DoubleSide, polygonOffset: true, clearcoat: 1 (frosted types → 0.2).

6. Shadow System

Floor Shadow

ShadowMaterial opacity increased 0.1 → 0.25 for a more pronounced ground shadow.

Contact Shadow

7. Performance & Mobile

Mobile Fallback

Touch devices with viewport < 768px: multi-layer glass disabled, falls back to single PlaneGeometry.

this._useSimpleGlass = ('ontouchstart' in window && window.innerWidth < 768);

8. Public API Reference

Config Object

renderer.updateWindow({
    width: 1.2,              // meters
    height: 1.4,
    panels: 2,
    openings: ['obd', 'ds'],
    glazingDef: {
        id: '24mm, 4LowE-16Ag-4Float',
        composition: '4LowE-16Ag-4Float',  // triggers multi-layer
        type: 'double',                      // 'single' skips it
        thickness: 24                        // mm, fallback material
    },
    colorDef: { hex: '#FFFFFF', tip: 'solid' },
    handleColor: '#C0C0C0'
});

9. Testing Checklist