Render meshes before completion of download

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))

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) {