Add OSM topography

app/components/Form.tsx

@@ -7,6 +7,7 @@ import {
   SceneViewContextType,
 } from "../providers/scene-view-provider";
 import { Mesh, MeshStandardMaterial } from "three";
+import { scheduler } from "timers/promises";
 
 function Toggle({
   title,
@@ -123,16 +124,23 @@ export function Form() {
     }
   }
 
+  function handleChangeTopography() {
+    if (!sceneView) return;
+
+    sceneView.toggleTopography();
+  }
+
   return (
     <div className="w-full flex flex-col gap-2 overflow-y-auto">
       <div className="w-full flex flex-col gap-3 p-4 border border-gray-200 rounded shadow">
         <Toggle title="Slicing Box" onChange={handleChange} />
+        <Toggle title="Coordinate Grid" onChange={handleChangeCG} />
+        <Toggle title="Wireframe" onChange={handleChangeWireframe} />
         <Toggle
-          title="Coordinate Grid"
-          onChange={handleChangeCG}
+          title="Topography (OSM)"
+          onChange={handleChangeTopography}
           defaultChecked
         />
-        <Toggle title="Wireframe" onChange={handleChangeWireframe} />
         <Accordion title="Layers">
           {
             <div className="flex flex-col gap-2">

app/components/Map.tsx

@@ -1,12 +1,16 @@
 "use client";
 
 import { useContext, useEffect, useRef } from "react";
-import { SceneView } from "../three/SceneView";
 import {
   SceneViewContext,
   SceneViewContextType,
 } from "../providers/scene-view-provider";
 
+async function lazyLoad() {
+  const { SceneView } = await import("../three/SceneView");
+  return SceneView;
+}
+
 export function Map() {
   const divRef = useRef<HTMLDivElement>(null);
   const { setSceneView } = useContext(SceneViewContext) as SceneViewContextType;
@@ -17,6 +21,7 @@ export function Map() {
 
     async function loadScene() {
       if (divRef.current) {
+        const SceneView = await lazyLoad();
         const _sceneView = await SceneView.create(divRef.current, "20");
         if (_sceneView) {
           setSceneView(_sceneView);