diff --git a/app/three/SceneView.ts b/app/three/SceneView.ts index 67457b1..9f8ab8f 100644 --- a/app/three/SceneView.ts +++ b/app/three/SceneView.ts @@ -400,7 +400,7 @@ export class SceneView extends EventTarget { this._resetClippingBox(); } - for (let i = 1; i < this._model.children.length; i++) { + for (let i = 0; i < this._model.children.length; i++) { const mesh = this._model.children[i]; if (explode) { @@ -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,14 +491,11 @@ 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; - if (topography) { - renderer.setAnimationLoop( - animate( - rendererCallback(camera, renderer, scene, map, extent, topography) - ) - ); - } + renderer.setAnimationLoop( + animate(rendererCallback(camera, renderer, scene, map, extent, topography)) + ); return { scene, @@ -514,10 +513,10 @@ function rendererCallback( scene: Scene, map: MapView, extent: Extent, - topography: Mesh + topography: Mesh | undefined ) { return () => { - if (topography.visible) { + if (topography && topography.visible) { map.lod.updateLOD(map, camera, renderer, scene); const tiles: TileData[] = []; traverse(map.root, extent, tiles); diff --git a/app/three/utils/build-meshes.ts b/app/three/utils/build-meshes.ts index 07679e3..a5bbe37 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 = []; - for (let i = 0; i < mappedFeatures.length; i++) { - const layerData = mappedFeatures[i]; - const mesh = await buildMesh(layerData); - if (layerData.name === "Topography") { +export async function buildMeshes( + mappedFeatures: MappedFeature[], + model: Group +) { + for (const mappedFeature of mappedFeatures) { + const mesh = await buildMesh(mappedFeature); + if (mappedFeature.name === "Topography") { mesh.visible = false; } - meshes.push(mesh); - } - return meshes; + model.add(mesh); + } } async function buildMesh(layerData: MappedFeature) {