Fixes the mesh shading

.github/workflows/build.yml

@@ -1,31 +1,43 @@
-name: Build
+name: Build and Sync Frontend
 
 on:
   pull_request:
     paths:
-      - 'frontend/**'
+      - "frontend/**"
+
+# Give the GITHUB_TOKEN permission to write back to the repo
+permissions:
+  contents: write
 
 jobs:
   build:
     runs-on: ubuntu-slim
     steps:
       - name: Checkout
         uses: actions/checkout@v6
+        with:
+          # Crucial: Checkout the branch, not a detached head
+          ref: ${{ github.head_ref }}
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
           node-version: 24
-          cache: 'npm'
+          cache: "npm"
           cache-dependency-path: frontend/compas_threejs/package-lock.json
 
       - name: Install dependencies
         working-directory: frontend/compas_threejs
         run: npm ci
-      
+
       - name: Build frontend assets
         working-directory: frontend/compas_threejs
         run: npm run build
 
-      - name: Ensure frontend build assets are up-to-date
-        run: git diff --exit-code -- src/compas_threejs/viewer
+      # Instead of failing on diff, this commits the new files automatically
+      - name: Auto-commit build assets
+        uses: stefanzweifel/git-auto-commit-action@v7
+        with:
+          commit_message: "chore: automated build of frontend assets"
+          # Only track changes in your viewer folder
+          file_pattern: "src/compas_threejs/viewer/**"

examples/mesh_shading.py

@@ -0,0 +1,49 @@
+from compas.colors import Color
+from compas.geometry import Box, Sphere
+
+from compas_threejs.materials import Material
+from compas_threejs.text import TextGeometry
+from compas_threejs.ui import Slider
+from compas_threejs.viewer import Viewer
+
+viz = Viewer()
+viz.world_axis = False
+viz.picker = True
+viz.default_lighting = True
+
+
+U = 3
+V = 3
+sphere = Sphere(4)
+mesh = sphere.to_mesh(False, U, V)
+viz.add_geometry(mesh)
+
+
+def update_u(value):
+    global mesh
+    global U
+    global V
+    viz.remove_object(mesh)
+    mesh = sphere.to_mesh(False, value, V)
+    U = value
+    viz.add_geometry(mesh)
+
+
+slider = Slider(min=3, max=100, value=3, step=1, label="U", action=update_u)
+viz.add_ui_element(slider)
+
+
+def update_v(value):
+    global mesh
+    global U
+    global V
+    viz.remove_object(mesh)
+    mesh = sphere.to_mesh(False, U, value)
+    V = value
+    viz.update_geometry(mesh)
+
+
+slider = Slider(min=3, max=100, value=3, step=1, label="V", action=update_v)
+viz.add_ui_element(slider)
+
+viz.start()

frontend/compas_threejs/src/protobuff/datastructures/mesh.ts

@@ -2,6 +2,7 @@ import { MeshData } from "../generated/compas_pb/data/datastructures";
 import { Point } from "../geometry/point";
 import { MeshFaceList } from "./facelist";
 import * as THREE from "three";
+import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
 
 export class Mesh {
   public readonly data: MeshData;
@@ -62,7 +63,7 @@ export class Mesh {
   }
 
   buildGeometry() {
-    const geometry = new THREE.BufferGeometry();
+    let geometry = new THREE.BufferGeometry();
 
     // Convert vertices to a flat array of positions
     const vertices = new Float32Array(this.vertices.length * 3);
@@ -84,8 +85,8 @@ export class Mesh {
     geometry.setIndex(indices);
     geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
 
-    // Compute normals for shading
-    geometry.computeVertexNormals();
+    const creaseAngle = THREE.MathUtils.degToRad(30);
+    geometry = BufferGeometryUtils.toCreasedNormals(geometry, creaseAngle);
 
     // Create a basic material
     const material = new THREE.MeshStandardMaterial({

src/compas_threejs/viewer/frontend/index.html

@@ -7,7 +7,7 @@
     <title>COMPAS ThreeJS</title>
     <link rel="preconnect" href="https://rsms.me/">
     <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
-    <script type="module" crossorigin src="/assets/index-DpqKscTv.js"></script>
+    <script type="module" crossorigin src="/assets/index-CMiGoZZk.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-M39ysWrx.css">
   </head>
   <body>