From 74fe150ef4795a084565ef5a89422b4b5b4e8402 Mon Sep 17 00:00:00 2001
From: Thomas Fuhrmann <thomas.fuhrmann@geosphere.at>
Date: Fri, 11 Apr 2025 11:31:01 +0200
Subject: [PATCH] Change to color TSL function

---
 app/three/utils/build-clipping-planes.ts | 6 +++---
 app/three/utils/build-meshes.ts          | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/three/utils/build-clipping-planes.ts b/app/three/utils/build-clipping-planes.ts
index f45e2e8..a9e24cd 100644
--- a/app/three/utils/build-clipping-planes.ts
+++ b/app/three/utils/build-clipping-planes.ts
@@ -25,7 +25,7 @@ import {
   MeshStandardNodeMaterial,
   WebGPURenderer,
 } from "three/webgpu";
-import { vec4 } from "three/tsl";
+import { color, vec4 } from "three/tsl";
 
 export enum Orientation {
   X = "X",
@@ -653,7 +653,7 @@ function generateCapMeshes(
     // Intersection surface can be a multipolygon consisting of disconnected polygons
     const polygons: Vector3[][] = buildPolygons(edges);
 
-    const color =
+    const colorThree =
       mesh.material instanceof MeshStandardNodeMaterial
         ? mesh.material.color
         : new Color(0.1, 0.1, 0.1);
@@ -665,7 +665,7 @@ function generateCapMeshes(
       alphaToCoverage: true,
     });
 
-    material.colorNode = vec4(color.r, color.g, color.b, 1.0);
+    material.colorNode = color(colorThree.r, colorThree.g, colorThree.b);
 
     polygons.forEach((polygon) => {
       const geometry = triangulatePolygon(polygon, plane);
diff --git a/app/three/utils/build-meshes.ts b/app/three/utils/build-meshes.ts
index da55ada..b0f59cb 100644
--- a/app/three/utils/build-meshes.ts
+++ b/app/three/utils/build-meshes.ts
@@ -10,7 +10,7 @@ import { fetchVertices, fetchTriangleIndices, transform } from "./utils";
 import { TRIANGLE_INDICES_URL, VERTICES_URL } from "../config";
 import { topoNodeMaterial } from "../ShaderMaterial";
 import { MeshStandardNodeMaterial } from "three/webgpu";
-import { vec4 } from "three/tsl";
+import { color, vec4 } from "three/tsl";
 
 interface MappedFeature {
   featuregeom_id: number;
@@ -73,8 +73,8 @@ async function buildMesh(layerData: MappedFeature) {
     alphaToCoverage: true,
   });
 
-  const color = new Color(colorHex);
-  material.colorNode = vec4(color.r, color.g, color.b, 1.0);
+  // Required by ClippingGroup otherwise clipping does not work
+  material.colorNode = color(colorHex);
 
   const mesh = new Mesh(
     geometry,