From b8468a8afbaf3c2b569307fa5541a675210f1a11 Mon Sep 17 00:00:00 2001
From: Thomas Fuhrmann <thomas.fuhrmann@geosphere.at>
Date: Wed, 30 Apr 2025 13:15:13 +0200
Subject: [PATCH] Render meshes before completion of download

---
 app/three/SceneView.ts          |  7 +++++--
 app/three/utils/build-meshes.ts | 11 ++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/three/SceneView.ts b/app/three/SceneView.ts
index 8eb0509..66d5415 100644
--- a/app/three/SceneView.ts
+++ b/app/three/SceneView.ts
@@ -452,12 +452,14 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
 
   const { renderer, scene, camera, controls } = buildScene(container, extent);
 
+  // Start render loop
+  renderer.setAnimationLoop(animate(() => {}));
+
   // Build the 3D model
-  const meshes = await buildMeshes(mappedFeatures);
   const model = new Group();
-  model.add(...meshes);
   model.name = "geologic-model";
   scene.add(model);
+  await buildMeshes(mappedFeatures, model);
 
   // Add a coordinate grid to the scene
   const { gridHelper, annotations } = buildCoordinateGrid(extent);
@@ -489,6 +491,7 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
   map.visible = false;
   scene.add(map);
 
+  // Update render loop to include topography
   const topography = scene.getObjectByName("Topography") as Mesh;
   renderer.setAnimationLoop(
     animate(rendererCallback(camera, renderer, scene, map, extent, topography))
diff --git a/app/three/utils/build-meshes.ts b/app/three/utils/build-meshes.ts
index 07679e3..fb959ae 100644
--- a/app/three/utils/build-meshes.ts
+++ b/app/three/utils/build-meshes.ts
@@ -2,6 +2,7 @@ import {
   BufferAttribute,
   BufferGeometry,
   DoubleSide,
+  Group,
   Mesh,
   MeshStandardMaterial,
 } from "three";
@@ -17,18 +18,18 @@ interface MappedFeature {
   preview: { legend_color: string; legend_text: string };
 }
 
-export async function buildMeshes(mappedFeatures: MappedFeature[]) {
-  const meshes = [];
+export async function buildMeshes(
+  mappedFeatures: MappedFeature[],
+  model: Group
+) {
   for (let i = 0; i < mappedFeatures.length; i++) {
     const layerData = mappedFeatures[i];
     const mesh = await buildMesh(layerData);
     if (layerData.name === "Topography") {
       mesh.visible = false;
     }
-    meshes.push(mesh);
+    model.add(mesh);
   }
-
-  return meshes;
 }
 
 async function buildMesh(layerData: MappedFeature) {