let-them-talk 5.2.5 → 5.4.0

package/office/assets/floor-tile.js

@@ -0,0 +1,54 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'floor-tile',
+  name: 'Floor Tile',
+  category: 'structural',
+  icon: 'FT',
+  gridW: 2, gridD: 2, height: 0.02,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Main tile slab
+    var tile = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.02, 2),
+      PAL.marbleBlack()
+    );
+    tile.receiveShadow = true;
+    g.add(tile);
+
+    // Thin grout lines — cross pattern
+    var groutMat = mat(0x0e1015, { roughness: 1.0 });
+
+    var groutH = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.021, 0.025),
+      groutMat
+    );
+    g.add(groutH);
+
+    var groutV = new THREE.Mesh(
+      new THREE.BoxGeometry(0.025, 0.021, 2),
+      groutMat
+    );
+    g.add(groutV);
+
+    // Edge bevel strip (front)
+    var edgeF = new THREE.Mesh(
+      new THREE.BoxGeometry(2, 0.018, 0.015),
+      mat(0x0e1015, { roughness: 0.8 })
+    );
+    edgeF.position.z = 0.993;
+    g.add(edgeF);
+
+    // Edge bevel strip (right)
+    var edgeR = new THREE.Mesh(
+      new THREE.BoxGeometry(0.015, 0.018, 2),
+      mat(0x0e1015, { roughness: 0.8 })
+    );
+    edgeR.position.x = 0.993;
+    g.add(edgeR);
+
+    return g;
+  }
+};

package/office/assets/flower-pot.js

@@ -0,0 +1,76 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'flower_pot',
+  name: 'Flower Pot',
+  category: 'nature',
+  icon: 'Fp',
+  gridW: 1, gridD: 1, height: 0.35,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Terracotta-style pot body (dark glaze version for premium look)
+    var pot = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.085, 0.060, 0.16, 16),
+      mat(0x2a1a14, { roughness: 0.80 })
+    );
+    pot.position.y = 0.08;
+    pot.castShadow = true;
+    pot.receiveShadow = true;
+    g.add(pot);
+
+    // Pot rim
+    var rim = new THREE.Mesh(
+      new THREE.TorusGeometry(0.088, 0.012, 8, 20),
+      mat(0x1a0f0a, { roughness: 0.75 })
+    );
+    rim.rotation.x = Math.PI / 2;
+    rim.position.y = 0.158;
+    g.add(rim);
+
+    // Soil disc
+    var soil = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.076, 0.076, 0.012, 16),
+      mat(0x1a1510, { roughness: 0.99 })
+    );
+    soil.position.y = 0.168;
+    g.add(soil);
+
+    // Flower stems (3 stems)
+    var stemMat = mat(0x1a4020, { roughness: 0.85 });
+    var flowerColors = [0xd44080, 0xe8c030, 0x5888e0];
+
+    for (var i = 0; i < 3; i++) {
+      var spread = (i - 1) * 0.045;
+      var stemHeight = 0.10 + i * 0.015;
+
+      var stem = new THREE.Mesh(
+        new THREE.CylinderGeometry(0.005, 0.007, stemHeight, 6),
+        stemMat
+      );
+      stem.position.set(spread, 0.175 + stemHeight / 2, (i % 2) * 0.03 - 0.015);
+      stem.castShadow = true;
+      g.add(stem);
+
+      // Flower head (small sphere)
+      var flower = new THREE.Mesh(
+        new THREE.SphereGeometry(0.028, 10, 8),
+        mat(flowerColors[i], { roughness: 0.75 })
+      );
+      flower.position.set(spread, 0.175 + stemHeight + 0.028, (i % 2) * 0.03 - 0.015);
+      flower.castShadow = true;
+      g.add(flower);
+
+      // Flower center (yellow dot)
+      var center = new THREE.Mesh(
+        new THREE.SphereGeometry(0.011, 8, 8),
+        mat(0xf0d040, { roughness: 0.70 })
+      );
+      center.position.set(spread, 0.175 + stemHeight + 0.048, (i % 2) * 0.03 - 0.015);
+      g.add(center);
+    }
+
+    return g;
+  }
+};

package/office/assets/foosball.js

@@ -0,0 +1,95 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'foosball',
+  name: 'Foosball Table',
+  category: 'recreation',
+  icon: 'FB',
+  gridW: 2, gridD: 1, height: 0.85,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Main body box
+    var body = new THREE.Mesh(
+      new THREE.BoxGeometry(1.40, 0.22, 0.75),
+      mat(0x111318, { roughness: 0.50, metalness: 0.10 })
+    );
+    body.position.y = 0.74;
+    body.castShadow = true;
+    body.receiveShadow = true;
+    g.add(body);
+
+    // Playing field (green felt base)
+    var field = new THREE.Mesh(
+      new THREE.BoxGeometry(1.24, 0.010, 0.60),
+      PAL.greenFelt()
+    );
+    field.position.y = 0.856;
+    field.receiveShadow = true;
+    g.add(field);
+
+    // White center circle
+    var circle = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.055, 0.055, 0.012, 18),
+      mat(0xffffff, { roughness: 0.80 })
+    );
+    circle.position.y = 0.864;
+    g.add(circle);
+
+    // Goals at each end (small cut-out feel — dark recess boxes)
+    var goalMat = mat(0x0a0a0a, { roughness: 0.70 });
+    [-0.62, 0.62].forEach(function(x) {
+      var goal = new THREE.Mesh(
+        new THREE.BoxGeometry(0.02, 0.10, 0.22),
+        goalMat
+      );
+      goal.position.set(x, 0.83, 0);
+      g.add(goal);
+    });
+
+    // Top rails (sides of the table)
+    var topRailMat = mat(0x1c1f26, { roughness: 0.45 });
+    var topRailGeo = new THREE.BoxGeometry(1.40, 0.06, 0.04);
+    [0.375, -0.375].forEach(function(z) {
+      var rail = new THREE.Mesh(topRailGeo, topRailMat);
+      rail.position.set(0, 0.875, z);
+      g.add(rail);
+    });
+
+    // 3 chrome rods through the table (horizontal, side to side)
+    var rodMat = PAL.chrome();
+    var rodGeo = new THREE.CylinderGeometry(0.018, 0.018, 0.92, 12);
+    [-0.45, 0, 0.45].forEach(function(x) {
+      var rod = new THREE.Mesh(rodGeo, rodMat);
+      rod.rotation.z = Math.PI / 2;
+      rod.position.set(x, 0.855, 0);
+      rod.castShadow = true;
+      g.add(rod);
+    });
+
+    // Player figures on rods (small dark cylinders)
+    var playerMat = mat(0x222222, { roughness: 0.60 });
+    var playerGeo = new THREE.CylinderGeometry(0.028, 0.028, 0.09, 8);
+    [-0.45, 0, 0.45].forEach(function(x) {
+      [-0.18, 0, 0.18].forEach(function(z) {
+        var player = new THREE.Mesh(playerGeo, playerMat);
+        player.rotation.z = Math.PI / 2;
+        player.position.set(x, 0.855, z);
+        g.add(player);
+      });
+    });
+
+    // 4 legs
+    var legGeo = new THREE.BoxGeometry(0.08, 0.68, 0.08);
+    var legMat = mat(0x16181d, { roughness: 0.55 });
+    [[-0.62, 0.34, 0.31], [0.62, 0.34, 0.31], [-0.62, 0.34, -0.31], [0.62, 0.34, -0.31]].forEach(function(p) {
+      var leg = new THREE.Mesh(legGeo, legMat);
+      leg.position.set(p[0], p[1], p[2]);
+      leg.castShadow = true;
+      g.add(leg);
+    });
+
+    return g;
+  }
+};

package/office/assets/fridge.js

@@ -0,0 +1,99 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'fridge',
+  name: 'Fridge',
+  category: 'kitchen',
+  icon: 'Fr',
+  gridW: 1, gridD: 1, height: 1.8,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Main body — dark brushed metallic
+    var body = new THREE.Mesh(
+      new THREE.BoxGeometry(0.70, 1.80, 0.60),
+      mat(0x16181d, { roughness: 0.30, metalness: 0.45 })
+    );
+    body.position.y = 0.90;
+    body.castShadow = true;
+    body.receiveShadow = true;
+    g.add(body);
+
+    // Door seam line (horizontal divide — top fridge / bottom freezer)
+    var seam = new THREE.Mesh(
+      new THREE.BoxGeometry(0.68, 0.008, 0.012),
+      mat(0x333333, { roughness: 0.60 })
+    );
+    seam.position.set(0, 1.10, 0.305);
+    g.add(seam);
+
+    // Top section door face (slightly lighter)
+    var topDoor = new THREE.Mesh(
+      new THREE.BoxGeometry(0.68, 0.68, 0.01),
+      mat(0x1c1f26, { roughness: 0.28, metalness: 0.40 })
+    );
+    topDoor.position.set(0, 1.45, 0.305);
+    g.add(topDoor);
+
+    // Bottom freezer door face
+    var botDoor = new THREE.Mesh(
+      new THREE.BoxGeometry(0.68, 0.40, 0.01),
+      mat(0x1c1f26, { roughness: 0.28, metalness: 0.40 })
+    );
+    botDoor.position.set(0, 0.62, 0.305);
+    g.add(botDoor);
+
+    // Chrome handle — top door
+    var handleMat = PAL.chrome();
+    var handleGeo = new THREE.CylinderGeometry(0.014, 0.014, 0.42, 10);
+    var handleTop = new THREE.Mesh(handleGeo, handleMat);
+    handleTop.position.set(0.28, 1.50, 0.322);
+    handleTop.castShadow = true;
+    g.add(handleTop);
+
+    // Handle mounts (top)
+    var mountGeo = new THREE.BoxGeometry(0.022, 0.022, 0.025);
+    [1.29, 1.71].forEach(function(y) {
+      var mount = new THREE.Mesh(mountGeo, PAL.chromeBrushed());
+      mount.position.set(0.28, y, 0.32);
+      g.add(mount);
+    });
+
+    // Chrome handle — bottom freezer door
+    var handleBot = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.014, 0.014, 0.28, 10),
+      handleMat
+    );
+    handleBot.position.set(0.28, 0.62, 0.322);
+    handleBot.castShadow = true;
+    g.add(handleBot);
+
+    // Small LED status dot (green)
+    var led = new THREE.Mesh(
+      new THREE.SphereGeometry(0.012, 8, 8),
+      mat(0x22c55e, { emissive: 0x22c55e, emissiveIntensity: 1.0 })
+    );
+    led.position.set(-0.24, 1.74, 0.308);
+    g.add(led);
+
+    // Thin ventilation grill at top back
+    var vent = new THREE.Mesh(
+      new THREE.BoxGeometry(0.60, 0.06, 0.50),
+      mat(0x0e1014, { roughness: 0.70 })
+    );
+    vent.position.set(0, 1.78, -0.02);
+    g.add(vent);
+
+    // Small black feet
+    var feetMat = mat(0x0a0a0a, { roughness: 0.90 });
+    var feetGeo = new THREE.BoxGeometry(0.06, 0.03, 0.06);
+    [[-0.28, 0.015, 0.24], [0.28, 0.015, 0.24], [-0.28, 0.015, -0.24], [0.28, 0.015, -0.24]].forEach(function(p) {
+      var foot = new THREE.Mesh(feetGeo, feetMat);
+      foot.position.set(p[0], p[1], p[2]);
+      g.add(foot);
+    });
+
+    return g;
+  }
+};

package/office/assets/gaming-chair.js

@@ -0,0 +1,154 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'gaming-chair',
+  name: 'Gaming Chair',
+  category: 'furniture',
+  icon: 'GC',
+  gridW: 1, gridD: 1, height: 1.35,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // 5-star base
+    var baseDisc = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.30, 0.30, 0.025, 5),
+      PAL.chrome()
+    );
+    baseDisc.position.y = 0.02;
+    baseDisc.castShadow = true;
+    g.add(baseDisc);
+
+    for (var i = 0; i < 5; i++) {
+      var arm = new THREE.Mesh(
+        new THREE.BoxGeometry(0.28, 0.025, 0.05),
+        PAL.chrome()
+      );
+      arm.position.y = 0.02;
+      arm.rotation.y = (i / 5) * Math.PI * 2;
+      arm.castShadow = true;
+      g.add(arm);
+
+      var wheel = new THREE.Mesh(
+        new THREE.CylinderGeometry(0.035, 0.035, 0.045, 10),
+        mat(0x1a1a1a, { roughness: 0.9 })
+      );
+      var angle = (i / 5) * Math.PI * 2;
+      wheel.position.set(Math.sin(angle) * 0.28, 0.018, Math.cos(angle) * 0.28);
+      wheel.rotation.z = Math.PI / 2;
+      g.add(wheel);
+    }
+
+    // Pneumatic post
+    var post = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.045, 0.055, 0.44, 12),
+      PAL.chromeBrushed()
+    );
+    post.position.y = 0.255;
+    post.castShadow = true;
+    g.add(post);
+
+    // Seat shell (bucket-style, wider than office chair)
+    var seatShell = new THREE.Mesh(
+      new THREE.BoxGeometry(0.56, 0.06, 0.54),
+      mat(0x111318, { roughness: 0.5, metalness: 0.15 })
+    );
+    seatShell.position.y = 0.5;
+    seatShell.castShadow = true;
+    g.add(seatShell);
+
+    // Seat cushion — black main with red stripe
+    var seatCushion = new THREE.Mesh(
+      new THREE.BoxGeometry(0.50, 0.08, 0.50),
+      PAL.leatherBlack()
+    );
+    seatCushion.position.y = 0.545;
+    seatCushion.castShadow = true;
+    seatCushion.receiveShadow = true;
+    g.add(seatCushion);
+
+    // Center stripe on seat
+    var seatStripe = new THREE.Mesh(
+      new THREE.BoxGeometry(0.12, 0.09, 0.50),
+      mat(0xcc1111, { roughness: 0.65 })
+    );
+    seatStripe.position.y = 0.545;
+    g.add(seatStripe);
+
+    // Tall racing back (wider, taller than office chair)
+    var backBody = new THREE.Mesh(
+      new THREE.BoxGeometry(0.54, 0.76, 0.09),
+      mat(0x111318, { roughness: 0.5, metalness: 0.12 })
+    );
+    backBody.position.set(0, 0.95, -0.24);
+    backBody.castShadow = true;
+    g.add(backBody);
+
+    // Back cushion
+    var backCushion = new THREE.Mesh(
+      new THREE.BoxGeometry(0.46, 0.7, 0.07),
+      PAL.leatherBlack()
+    );
+    backCushion.position.set(0, 0.95, -0.20);
+    backCushion.castShadow = true;
+    g.add(backCushion);
+
+    // Back center accent stripe
+    var backStripe = new THREE.Mesh(
+      new THREE.BoxGeometry(0.12, 0.7, 0.08),
+      mat(0xcc1111, { roughness: 0.65 })
+    );
+    backStripe.position.set(0, 0.95, -0.19);
+    g.add(backStripe);
+
+    // Headrest (attached top)
+    var headrest = new THREE.Mesh(
+      new THREE.BoxGeometry(0.30, 0.20, 0.09),
+      PAL.leatherBlack()
+    );
+    headrest.position.set(0, 1.38, -0.24);
+    headrest.castShadow = true;
+    g.add(headrest);
+
+    // Headrest pad
+    var headPad = new THREE.Mesh(
+      new THREE.BoxGeometry(0.22, 0.15, 0.06),
+      mat(0xcc1111, { roughness: 0.65 })
+    );
+    headPad.position.set(0, 1.38, -0.20);
+    g.add(headPad);
+
+    // Lumbar support pillow
+    var lumbar = new THREE.Mesh(
+      new THREE.BoxGeometry(0.30, 0.16, 0.07),
+      mat(0xcc1111, { roughness: 0.65 })
+    );
+    lumbar.position.set(0, 0.66, -0.17);
+    lumbar.castShadow = true;
+    g.add(lumbar);
+
+    // Armrests (height-adjustable style)
+    var armMat = mat(0x1a1a1a, { roughness: 0.7 });
+    var leftArmRest = new THREE.Mesh(
+      new THREE.BoxGeometry(0.08, 0.04, 0.24),
+      armMat
+    );
+    leftArmRest.position.set(-0.30, 0.74, -0.06);
+    leftArmRest.castShadow = true;
+    g.add(leftArmRest);
+
+    var rightArmRest = leftArmRest.clone();
+    rightArmRest.position.x = 0.30;
+    g.add(rightArmRest);
+
+    // Armrest posts
+    var lPost = new THREE.Mesh(new THREE.BoxGeometry(0.03, 0.22, 0.03), PAL.chromeBrushed());
+    lPost.position.set(-0.30, 0.63, -0.06);
+    g.add(lPost);
+    var rPost = lPost.clone();
+    rPost.position.x = 0.30;
+    g.add(rPost);
+
+    return g;
+  }
+};

package/office/assets/gaming-desk.js

@@ -0,0 +1,105 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'gaming-desk',
+  name: 'Gaming Desk',
+  category: 'furniture',
+  icon: 'GD',
+  gridW: 3, gridD: 1, height: 0.76,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Main top surface (wide section)
+    var mainTop = new THREE.Mesh(
+      new THREE.BoxGeometry(2.2, 0.04, 1.0),
+      mat(0x111318, { roughness: 0.28, metalness: 0.08 })
+    );
+    mainTop.position.y = 0.76;
+    mainTop.castShadow = true;
+    mainTop.receiveShadow = true;
+    g.add(mainTop);
+
+    // L-wing (right extension)
+    var wing = new THREE.Mesh(
+      new THREE.BoxGeometry(1.0, 0.04, 0.7),
+      mat(0x111318, { roughness: 0.28, metalness: 0.08 })
+    );
+    wing.position.set(1.1, 0.76, -0.15);
+    wing.castShadow = true;
+    wing.receiveShadow = true;
+    g.add(wing);
+
+    // Monitor riser platform
+    var riser = new THREE.Mesh(
+      new THREE.BoxGeometry(1.4, 0.08, 0.28),
+      mat(0x1a1c22, { roughness: 0.45, metalness: 0.12 })
+    );
+    riser.position.set(-0.2, 0.82, -0.28);
+    riser.castShadow = true;
+    g.add(riser);
+
+    // Riser legs (2 small supports)
+    var riserLegMat = mat(0x2a2d35, { roughness: 0.5 });
+    var riserLeg = new THREE.Mesh(new THREE.BoxGeometry(0.06, 0.08, 0.06), riserLegMat);
+    riserLeg.position.set(-0.85, 0.78, -0.28);
+    g.add(riserLeg);
+    var riserLeg2 = riserLeg.clone();
+    riserLeg2.position.x = 0.45;
+    g.add(riserLeg2);
+
+    // RGB LED strip along front edge (emissive cyan)
+    var led = new THREE.Mesh(
+      new THREE.BoxGeometry(2.2, 0.012, 0.015),
+      mat(0x06b6d4, { emissive: 0x06b6d4, emissiveIntensity: 0.9, roughness: 0.3 })
+    );
+    led.position.set(0, 0.742, 0.508);
+    g.add(led);
+
+    // LED strip on wing front edge
+    var ledWing = new THREE.Mesh(
+      new THREE.BoxGeometry(1.0, 0.012, 0.015),
+      mat(0x06b6d4, { emissive: 0x06b6d4, emissiveIntensity: 0.9, roughness: 0.3 })
+    );
+    ledWing.position.set(1.1, 0.742, 0.157);
+    g.add(ledWing);
+
+    // Cable channel tray (under desk, rear)
+    var cableTray = new THREE.Mesh(
+      new THREE.BoxGeometry(1.8, 0.04, 0.08),
+      mat(0x1a1c22, { roughness: 0.8 })
+    );
+    cableTray.position.set(0, 0.58, -0.44);
+    g.add(cableTray);
+
+    // 4 legs (angular, steel-look)
+    var legMat = mat(0x1e2128, { roughness: 0.3, metalness: 0.55 });
+    var legGeo = new THREE.BoxGeometry(0.07, 0.74, 0.07);
+    var mainLegs = [[-0.97, 0.37, 0.44], [0.77, 0.37, 0.44], [-0.97, 0.37, -0.44]];
+    mainLegs.forEach(function(p) {
+      var leg = new THREE.Mesh(legGeo, legMat);
+      leg.position.set(p[0], p[1], p[2]);
+      leg.castShadow = true;
+      g.add(leg);
+    });
+
+    // Wing leg
+    var wingLeg = new THREE.Mesh(
+      new THREE.BoxGeometry(0.07, 0.74, 0.07),
+      legMat
+    );
+    wingLeg.position.set(1.55, 0.37, -0.28);
+    wingLeg.castShadow = true;
+    g.add(wingLeg);
+
+    // Connecting crossbar
+    var crossbar = new THREE.Mesh(
+      new THREE.BoxGeometry(0.04, 0.04, 0.9),
+      legMat
+    );
+    crossbar.position.set(-0.97, 0.28, 0);
+    g.add(crossbar);
+
+    return g;
+  }
+};

package/office/assets/glass-door.js

@@ -0,0 +1,72 @@
+import * as THREE from 'three';
+import { mat, PAL } from './materials.js';
+
+export default {
+  id: 'glass-door',
+  name: 'Glass Door',
+  category: 'structural',
+  icon: 'GD',
+  gridW: 2, gridD: 1, height: 2.5,
+  factory: function() {
+    var g = new THREE.Group();
+
+    // Frameless glass panel
+    var glass = new THREE.Mesh(
+      new THREE.BoxGeometry(1.2, 2.5, 0.015),
+      PAL.glass()
+    );
+    glass.receiveShadow = true;
+    g.add(glass);
+
+    // Chrome header bar
+    var header = new THREE.Mesh(
+      new THREE.BoxGeometry(1.3, 0.07, 0.06),
+      PAL.chrome()
+    );
+    header.position.y = 1.285;
+    header.castShadow = true;
+    g.add(header);
+
+    // Chrome floor threshold
+    var threshold = new THREE.Mesh(
+      new THREE.BoxGeometry(1.3, 0.04, 0.06),
+      PAL.chromeBrushed()
+    );
+    threshold.position.y = -1.23;
+    g.add(threshold);
+
+    // Chrome pull handle (horizontal bar, both sides)
+    var handleMat = PAL.chrome();
+    var pullBar = new THREE.Mesh(
+      new THREE.CylinderGeometry(0.02, 0.02, 0.35, 10),
+      handleMat
+    );
+    pullBar.rotation.z = Math.PI / 2;
+    pullBar.position.set(0, 0.1, 0.05);
+    pullBar.castShadow = true;
+    g.add(pullBar);
+
+    var pullBarBack = pullBar.clone();
+    pullBarBack.position.z = -0.05;
+    g.add(pullBarBack);
+
+    // Handle end caps
+    var capGeo = new THREE.SphereGeometry(0.022, 8, 6);
+    var capL = new THREE.Mesh(capGeo, handleMat);
+    capL.position.set(-0.175, 0.1, 0.05);
+    g.add(capL);
+    var capR = new THREE.Mesh(capGeo, handleMat);
+    capR.position.set(0.175, 0.1, 0.05);
+    g.add(capR);
+
+    // Subtle tint line at mid height
+    var tintLine = new THREE.Mesh(
+      new THREE.BoxGeometry(1.2, 0.02, 0.016),
+      mat(0x88aacc, { transparent: true, opacity: 0.4 })
+    );
+    tintLine.position.y = -0.3;
+    g.add(tintLine);
+
+    return g;
+  }
+};