v0.4.3: lucht op de grond (grounded skybox) met gras en schaduw; webserver verplicht

- core/skybox.js: panorama op de grond geprojecteerd (port GroundedSkybox),
  grastextuur in cirkel rond het object met overvloeiing, zon met schaduw,
  camera niet onder de grond
- woning: maaiveld als instelling (standaard 350 mm onder bovenkant vloer)
- assets opgeschoond (alleen grass.jpg + skybox.webp), skybox-data.js weg
- start.sh + melding bij file://

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

js/app.js

@@ -4,7 +4,7 @@
  * Alle rechten voorbehouden. Gebruik uitsluitend met schriftelijke toestemming.
  * Zie LICENTIE.md.
  */
-const APP_VERSION = '0.4.2';
+const APP_VERSION = '0.4.3';
 // 0.0.X per kleine iteratie, 0.X.0 per mijlpaal, X.0.0 bij live-gang.
 
 let tabs = [];
@@ -290,6 +290,13 @@ document.addEventListener('DOMContentLoaded', () => {
   wireNewModal();
   wireHotkeys();
   wireTabBar();
+  // Tectum draait via een webserver (texturen, lucht); file:// werkt niet volledig.
+  if (location.protocol === 'file:') {
+    const note = document.createElement('div');
+    note.className = 'ui-warn file-protocol-warning';
+    note.innerHTML = '<i class="bi bi-exclamation-triangle"></i><span>Tectum is geopend als bestand. Start het via een webserver: <code>./start.sh</code> of <code>python3 -m http.server</code>, en open <code>http://localhost:8000</code>. Lucht en gras werken anders niet.</span>';
+    document.body.appendChild(note);
+  }
   openNew('woning', 'L');
 
   setTimeout(() => {

js/core/skybox.js

@@ -5,41 +5,101 @@
  * Zie LICENTIE.md.
  */
 // ============================================================
-// core/skybox.js — lucht-achtergrond (equirectangulair panorama) voor de
-// 3D-weergaven, met een "Lucht"-knop in de 3D-werkbalk. De afbeelding
-// (assets/skybox-data.js, gegenereerd uit assets/skybox.webp) wordt pas bij
-// de eerste keer aanzetten geladen en daarna gedeeld. De keuze aan/uit wordt
-// onthouden (localStorage, alleen gemak).
-// Plain script (geen ES-module).
+// core/skybox.js — omgeving voor de 3D-weergaven ("Lucht"-knop): een
+// panorama (assets/skybox.webp) dat op de grond geprojecteerd wordt, zodat
+// het object echt op het gras staat, plus scherp gras (assets/grass.jpg) in
+// een cirkel rond het object dat naar buiten toe overvloeit in het gras van
+// het panorama. Het gras vangt ook de schaduw op.
+//
+// Grondprojectie: port van three.js GroundedSkybox (r157+, MIT; wij draaien
+// r128): een binnenstebuiten bol waarvan de onderhelft plat gedrukt wordt op
+// een vloer op CAMERA_HEIGHT_M onder het midden van de bol.
+//
+// Vereist een webserver (texturen via TextureLoader). Plain script.
 // ============================================================
 
 window.Skybox = (() => {
   const PREF_KEY = 'tectum.skybox';
-  let texturePromise = null;
+  const SKY_URL = 'assets/skybox.webp';
+  const GRASS_URL = 'assets/grass.jpg';
+  const CAMERA_HEIGHT_M = 1.7;  // hoogte van de panoramacamera boven het gras
+  const RADIUS_M = 60;          // straal van de omgevingsbol
+  const GRASS_RADIUS_M = 12;    // tot hier is het eigen gras volledig zichtbaar
+  const GRASS_FADE_M = 6;       // daarna vloeit het over in het panorama
+  const GRASS_TILE_M = 2.5;     // één grastegel beslaat zoveel meter
+  const GRASS_SHADE = 0x9a9a9a; // compenseert ambient + zon (anders te licht)
 
-  function load() {
-    if (texturePromise) return texturePromise;
-    texturePromise = new Promise((resolve, reject) => {
-      const fromData = () => {
-        const img = new Image();
-        img.onload = () => {
-          const tex = new THREE.Texture(img);
-          tex.mapping = THREE.EquirectangularReflectionMapping;
-          tex.needsUpdate = true;
-          resolve(tex);
-        };
-        img.onerror = reject;
-        img.src = window.TECTUM_SKYBOX;
-      };
-      if (window.TECTUM_SKYBOX) return fromData();
-      const s = document.createElement('script');
-      s.src = 'assets/skybox-data.js';
-      s.onload = fromData;
-      s.onerror = reject;
-      document.head.appendChild(s);
+  let loading = null;
+  function loadTextures() {
+    if (loading) return loading;
+    const loader = new THREE.TextureLoader();
+    const load = (url) => new Promise((resolve, reject) => loader.load(url, resolve, undefined, reject));
+    loading = Promise.all([load(SKY_URL), load(GRASS_URL)]).then(([sky, grass]) => {
+      grass.wrapS = grass.wrapT = THREE.RepeatWrapping;
+      grass.anisotropy = 8;
+      return { sky, grass };
     });
-    texturePromise.catch(() => { texturePromise = null; });
-    return texturePromise;
+    loading.catch(() => { loading = null; });
+    return loading;
+  }
+
+  function buildSky(map) {
+    const geometry = new THREE.SphereGeometry(RADIUS_M, 256, 128);
+    geometry.scale(1, 1, -1); // binnenkant zichtbaar
+    const pos = geometry.getAttribute('position');
+    const v = new THREE.Vector3();
+    const h = CAMERA_HEIGHT_M, y1 = -h * 3 / 2;
+    for (let i = 0; i < pos.count; i++) {
+      v.fromBufferAttribute(pos, i);
+      if (v.y < 0) {
+        // Onderhelft plat op y = -h; vloeiende overgang naar de bol.
+        const f = v.y < y1 ? -h / v.y : (1 - v.y * v.y / (3 * y1 * y1));
+        v.multiplyScalar(f);
+        pos.setXYZ(i, v.x, v.y, v.z);
+      }
+    }
+    pos.needsUpdate = true;
+    const mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map, depthWrite: false }));
+    mesh.position.y = h - 0.01; // vlakke vloer net onder het eigen gras
+    mesh.renderOrder = -1;
+    return mesh;
+  }
+
+  function buildGrass(map) {
+    const R = GRASS_RADIUS_M + GRASS_FADE_M;
+    const tex = map.clone();
+    tex.needsUpdate = true;
+    tex.repeat.set(2 * R / GRASS_TILE_M, 2 * R / GRASS_TILE_M);
+    const material = new THREE.MeshLambertMaterial({ map: tex, color: GRASS_SHADE, transparent: true, depthWrite: false });
+    // Randvervaging op afstand tot het midden (eigen varying: de UV's zijn
+    // al herhaald voor de textuur).
+    material.onBeforeCompile = (shader) => {
+      shader.vertexShader = 'varying float vGrassR;\n' + shader.vertexShader.replace(
+        '#include <begin_vertex>', '#include <begin_vertex>\nvGrassR = length(transformed.xy);');
+      shader.fragmentShader = 'varying float vGrassR;\n' + shader.fragmentShader.replace(
+        '#include <dithering_fragment>',
+        `#include <dithering_fragment>\ngl_FragColor.a *= 1.0 - smoothstep(${GRASS_RADIUS_M.toFixed(1)}, ${R.toFixed(1)}, vGrassR);`);
+    };
+    const mesh = new THREE.Mesh(new THREE.CircleGeometry(R, 96), material);
+    mesh.rotation.x = -Math.PI / 2;
+    mesh.receiveShadow = true;
+    return mesh;
+  }
+
+  // Omgeving voor één scene. Geeft { group, setPlacement(x, groundY, z) }:
+  // het midden (m) waar het object staat en de hoogte van het maaiveld (m).
+  function createEnvironment(scene) {
+    const group = new THREE.Group();
+    group.visible = false;
+    scene.add(group);
+    loadTextures().then(({ sky, grass }) => {
+      group.add(buildSky(sky));
+      group.add(buildGrass(grass));
+    }).catch(() => console.warn('Tectum: lucht/gras niet geladen (draait de app via een webserver?)'));
+    return {
+      group,
+      setPlacement(x, groundY, z) { group.position.set(x, groundY, z); }
+    };
   }
 
   function isOn() {
@@ -49,21 +109,36 @@ window.Skybox = (() => {
     try { localStorage.setItem(PREF_KEY, on ? '1' : '0'); } catch (e) { /* geen opslag: alleen deze sessie */ }
   }
 
-  // Zet de achtergrond van `scene`: lucht als on, anders fallbackColor (hex).
-  // wanted() wordt na het laden nog eens gevraagd (knop intussen uitgezet?).
-  function apply(scene, on, fallbackColor, wanted) {
-    if (!on) { scene.background = new THREE.Color(fallbackColor); return; }
-    load().then(tex => { if (!wanted || wanted()) scene.background = tex; })
-      .catch(() => { scene.background = new THREE.Color(fallbackColor); });
+  // Lucht aan/uit voor een weergave: omgeving tonen, raster verbergen, camera
+  // niet onder de grond, zon met schaduw op het gras.
+  // o: { env, grid, controls, sun, shadowRoot (Object3D die schaduw werpt) }
+  function apply(on, o) {
+    o.env.group.visible = on;
+    if (o.grid) o.grid.visible = !on;
+    if (o.controls) o.controls.maxPolarAngle = on ? Math.PI / 2 - 0.03 : Math.PI - 0.001;
+    if (o.sun) {
+      o.sun.castShadow = on;
+      if (on) {
+        const cam = o.sun.shadow.camera;
+        cam.left = cam.bottom = -GRASS_RADIUS_M; cam.right = cam.top = GRASS_RADIUS_M;
+        cam.near = 0.5; cam.far = 60;
+        cam.updateProjectionMatrix();
+        o.sun.shadow.mapSize.set(2048, 2048);
+        o.sun.shadow.bias = -0.0005;
+        o.sun.position.set(o.env.group.position.x + 8, 14, o.env.group.position.z + 6);
+        o.sun.target.position.copy(o.env.group.position);
+        o.sun.target.updateMatrixWorld();
+      }
+    }
+    if (o.shadowRoot) o.shadowRoot.traverse(m => { if (m.isMesh) m.castShadow = on; });
   }
 
-  // "Lucht"-knop in een 3D-werkbalk. onChange(on) bij elke klik (en niet bij
-  // aanmaken: de aanroeper leest de begintoestand met isOn()).
+  // "Lucht"-knop in een 3D-werkbalk. onChange(on) bij elke klik.
   function createToggle(toolbar, onChange) {
     const btn = document.createElement('button');
     btn.type = 'button';
     btn.className = 'btn-3d-toggle' + (isOn() ? ' active' : '');
-    btn.title = 'Lucht als achtergrond';
+    btn.title = 'Lucht en gras als omgeving';
     btn.innerHTML = '<i class="bi bi-cloud-sun"></i>Lucht';
     btn.addEventListener('click', () => {
       const on = !btn.classList.contains('active');
@@ -75,5 +150,5 @@ window.Skybox = (() => {
     return btn;
   }
 
-  return { load, isOn, apply, createToggle };
+  return { CAMERA_HEIGHT_M, createEnvironment, apply, isOn, createToggle };
 })();

js/floor/floor.js

@@ -727,11 +727,11 @@ function mountFloorEditor(container, callbacks) {
     isolatieVisible = v.isolatie;
     update3DScene();
   });
-  // Lucht-achtergrond (core/skybox.js).
+  // Lucht en gras (core/skybox.js); de vloer staat met zijn onderkant op het gras.
   let skyOn = Skybox.isOn();
-  const applySky = () => { grid.visible = !skyOn; Skybox.apply(scene, skyOn, 0x1a1a1a, () => skyOn); };
+  const skyEnv = Skybox.createEnvironment(scene);
+  const applySky = () => Skybox.apply(skyOn, { env: skyEnv, grid, controls, sun: dirLight, shadowRoot: floorGroup3D });
   Skybox.createToggle(document.getElementById('floor-toolbar-3d'), (on) => { skyOn = on; applySky(); });
-  applySky();
 
   function update3DScene() {
     if (floorGroup3D) scene.remove(floorGroup3D);
@@ -739,6 +739,7 @@ function mountFloorEditor(container, callbacks) {
       ? RoofModel.build3D(calcData, lastResolvedOpenings, { materials: floorMaterials, osbVisible, isolatieVisible, dakleerVisible: osbVisible })
       : FloorModel.build3D(calcData, lastResolvedOpenings, lastChassisData, { materials: floorMaterials, osbVisible, isolatieVisible });
     scene.add(floorGroup3D);
+    applySky(); // schaduw van de nieuwe vloer
   }
 
   // ------------------------------------------------------------

js/house/house-model.js

@@ -65,6 +65,7 @@ window.HouseModel = (() => {
       // vanaf het beloopbare vloervlak (WallModel.trasraamFor).
       trasraam: { enabled: true, height: WallModel.TRASRAAM_DEFAULT_MM },
       sandwich: true, // sandwichpanelen rondom (SandwichModel), vanaf loopvlak 600 mm de grond in
+      groundLevel: 350, // maaiveld: zoveel mm onder het loopvlak (bovenkant vloer); voor de 3D-omgeving
       roof: Object.assign({}, RoofModel.DEFAULT_SETTINGS),
       lighting: Object.assign({}, LightingModel.DEFAULT_SETTINGS)
     };
@@ -543,6 +544,7 @@ window.HouseModel = (() => {
     state.settings.trasraam.enabled = state.settings.trasraam.enabled !== false;
     if (!(state.settings.trasraam.height > 0)) state.settings.trasraam.height = WallModel.TRASRAAM_DEFAULT_MM;
     state.settings.sandwich = state.settings.sandwich !== false;
+    if (!(state.settings.groundLevel >= 0)) state.settings.groundLevel = def.groundLevel;
     const oldRoof = state.settings.roof || {}; // v0.3.0: edge/spots waren woning-breed
     state.settings.roof = RoofModel.normalizeSettings(oldRoof);
     // v0.3.1: type/richting van de verlichting stonden per unit; nu woning-breed.

js/house/house.js

@@ -302,6 +302,7 @@ function mountHouseEditor(container, callbacks) {
     let beplatingVisible = true, isolatieVisible = true, lampenVisible = true;
     let fullRender = false;
     let skyOn = Skybox.isOn();
+    const skyEnv = Skybox.createEnvironment(scene);
 
     // Weergave-filter (core/view-filter.js). Beplating = wandplaten, vloer-
     // en plafondplaten, dakleer en boeideel/daktrim.
@@ -320,17 +321,17 @@ function mountHouseEditor(container, callbacks) {
 
     // Volle render: avondscène, lampen en spots als echte lichtbronnen.
     let lightsGroup = null;
-    // Lucht (core/skybox.js): alleen in de gewone weergave (de volle render is
-    // een avondscène). De sandwichpanelen zitten in de grond: met lucht aan
-    // zijn ze niet zichtbaar.
+    // Lucht en gras (core/skybox.js): alleen in de gewone weergave (de volle
+    // render is een avondscène). Het gras ligt op het maaiveld, dus het
+    // ingegraven deel van vloer en sandwichpanelen verdwijnt eronder.
     function applyRenderMode() {
-      if (fullRender) scene.background = new THREE.Color(0x0b0f18);
-      else Skybox.apply(scene, skyOn, 0x1a1a1a, () => skyOn && !fullRender);
-      if (parts && parts.sandwichGroup) parts.sandwichGroup.visible = beplatingVisible && !(skyOn && !fullRender);
+      const sky = skyOn && !fullRender;
+      scene.background = new THREE.Color(fullRender ? 0x0b0f18 : 0x1a1a1a);
+      Skybox.apply(sky, { env: skyEnv, controls, sun: dirLight, shadowRoot: houseGroup });
       ambient.intensity = fullRender ? 0.1 : 0.6;
       dirLight.intensity = fullRender ? 0.12 : 0.8;
       ground.visible = fullRender;
-      grid.visible = !fullRender && !skyOn;
+      grid.visible = !fullRender && !sky;
       if (lightsGroup) { scene.remove(lightsGroup); lightsGroup = null; }
       // De nep-lichtbundels (kegels) alleen in de snelle weergave; in de
       // volle render schijnt er echt licht.
@@ -758,7 +759,8 @@ function mountHouseEditor(container, callbacks) {
             section('Trasraam', 'bricks', toggle('hs-trasraam', 'Trasraam', st.trasraam.enabled, { hint: 'Cement-gebonden plaat onderaan de gevel' }) +
               (st.trasraam.enabled ? num('hs-trasraam-h', 'Hoogte', st.trasraam.height, { step: 10, hint: 'Vanaf bovenkant vloer' }) : '')),
             section('Sandwichpanelen', 'bounding-box', toggle('hs-sandwich', 'Rondom woning', st.sandwich,
-              { hint: `${SandwichModel.PANEL_WIDTH_MM} × ${SandwichModel.PANEL_LENGTH_MM} × ${SandwichModel.THICK_MM} mm, vanaf bovenkant vloer ${SandwichModel.DEPTH_MM} mm de grond in` }))) },
+              { hint: `${SandwichModel.PANEL_WIDTH_MM} × ${SandwichModel.PANEL_LENGTH_MM} × ${SandwichModel.THICK_MM} mm, vanaf bovenkant vloer ${SandwichModel.DEPTH_MM} mm naar beneden` })) +
+            section('Maaiveld', 'tree', num('hs-ground', 'Onder bovenkant vloer', st.groundLevel, { step: 10, hint: 'Hoogte van het gras in de 3D-weergave met Lucht aan' }))) },
           { key: 'constructie', label: 'Regelwerk', icon: 'columns-gap', html: cols(
             section('Buitenwanden', 'bricks', num('hs-ext-min', 'Afstand min.', sp.exterior.min, { step: 10, hint: 'Hart-op-hart stijlen' }) + num('hs-ext-max', 'Afstand max.', sp.exterior.max, { step: 10, hint: 'Hart-op-hart stijlen' })),
             section('Binnenwanden', 'distribute-horizontal', num('hs-int-min', 'Afstand min.', sp.interior.min, { step: 10, hint: 'Hart-op-hart stijlen' }) + num('hs-int-max', 'Afstand max.', sp.interior.max, { step: 10, hint: 'Hart-op-hart stijlen' }))) },
@@ -773,6 +775,7 @@ function mountHouseEditor(container, callbacks) {
       UI.onToggle('hs-trasraam', v => { st.trasraam.enabled = v; }, rerender);
       UI.onToggle('hs-sandwich', v => { st.sandwich = v; }, rerender);
       UI.onNum('hs-trasraam-h', v => { st.trasraam.height = v; }, after, pos);
+      UI.onNum('hs-ground', v => { if (v >= 0) st.groundLevel = v; }, after);
       UI.onNum('hs-ext-min', v => { sp.exterior.min = v; }, after, pos);
       UI.onNum('hs-ext-max', v => { sp.exterior.max = v; }, after, pos);
       UI.onNum('hs-int-min', v => { sp.interior.min = v; }, after, pos);
@@ -863,12 +866,16 @@ function mountHouseEditor(container, callbacks) {
       if (parts.sandwichGroup) houseGroup.add(parts.sandwichGroup);
       if (parts.lightingGroup) houseGroup.add(parts.lightingGroup);
       scene.add(houseGroup);
-      applyRenderMode();
 
       const bx0 = Math.min(...parts.rects.map(r => r.x0)), bx1 = Math.max(...parts.rects.map(r => r.x1));
       const bz0 = Math.min(...parts.rects.map(r => r.z0)), bz1 = Math.max(...parts.rects.map(r => r.z1));
       const cx = (bx0 + bx1) / 2 * toM, cz = (bz0 + bz1) / 2 * toM;
       grid.position.set(cx, 0, cz);
+      // Maaiveld: settings.groundLevel onder het loopvlak (bovenkant vloer).
+      const groundY = (Math.max(...parts.units.map(u => u.layout.floorTop)) - state.settings.groundLevel) * toM;
+      skyEnv.setPlacement(cx, groundY, cz);
+      ground.position.set(cx, groundY - 0.002, cz);
+      applyRenderMode();
       if (!cameraFitted) {
         const size = Math.max(bx1 - bx0, bz1 - bz0) * toM;
         controls.target.set(cx, 1.2, cz);

js/wall/wall.js

@@ -1242,11 +1242,11 @@ function mountWallEditor(container, callbacks) {
       isolatieVisible = v.isolatie;
       update3DScene();
     });
-    // Lucht-achtergrond (core/skybox.js).
+    // Lucht en gras (core/skybox.js); de wand staat met zijn onderkant op het gras.
     let skyOn = Skybox.isOn();
-    const applySky = () => { grid.visible = !skyOn; Skybox.apply(scene, skyOn, 0x1a1a1a, () => skyOn); };
+    const skyEnv = Skybox.createEnvironment(scene);
+    const applySky = () => Skybox.apply(skyOn, { env: skyEnv, grid, controls, sun: dirLight, shadowRoot: wallGroup3D });
     Skybox.createToggle(document.getElementById('wall-toolbar-3d'), (on) => { skyOn = on; applySky(); });
-    applySky();
 
     // 3D-opbouw + volume-boekhouding komen uit WallModel.build3D (gedeeld
     // met de unit-editor).
@@ -1260,6 +1260,7 @@ function mountWallEditor(container, callbacks) {
       wallGroup3D = result.group;
       lastWallStats = result.stats;
       scene.add(wallGroup3D);
+      applySky(); // schaduw van de nieuwe wand
 
       updateSpecificaties();
     }