Add grid; clipping plane

app/three/utils/build-scene.ts

@@ -1,16 +1,8 @@
-import {
-  BoxGeometry,
-  Camera,
-  Mesh,
-  MeshBasicMaterial,
-  PerspectiveCamera,
-  Scene,
-  Vector3,
-  WebGLRenderer,
-} from "three";
+import { Color, PerspectiveCamera, Scene, Vector3, WebGLRenderer } from "three";
 
 import { buildDefaultLights } from "./build-default-lights";
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import { getCenter3D, getMaxSize } from "./utils";
 
 export interface Extent {
   xmin: number;
@@ -26,34 +18,30 @@ let renderer: WebGLRenderer;
 let camera: PerspectiveCamera;
 let scene: Scene;
 export async function buildScene(container: HTMLElement, extent: Extent) {
-  const size = Math.max(
-    extent.xmax - extent.xmin,
-    extent.ymax - extent.ymin,
-    extent.zmax - extent.zmin
-  );
-
-  const center = new Vector3(
-    (extent.xmin + extent.xmax) / 2,
-    (extent.ymin + extent.ymax) / 2,
-    0
-  );
+  const maxSize = getMaxSize(extent);
+  const center = getCenter3D(extent);
 
   const width = container.clientWidth;
   const height = container.clientHeight;
 
-  camera = new PerspectiveCamera(30, width / height, 0.1, size * 25);
-  camera.position.set(center.x, center.y, size * 5);
+  camera = new PerspectiveCamera(
+    50,
+    width / height,
+    maxSize * 0.1,
+    maxSize * 25
+  );
+
+  camera.position.set(center.x, center.y, extent.zmax + 150000);
   camera.lookAt(center);
 
   renderer = new WebGLRenderer({
     alpha: true,
+    logarithmicDepthBuffer: true,
   });
 
   renderer.setPixelRatio(window.devicePixelRatio);
   renderer.setSize(width, height);
   renderer.localClippingEnabled = true;
-  // renderer.autoClear = false;
-  // renderer.setClearColor(0x000000, 0.0); // second param is opacity, 0 => transparent
   renderer.setAnimationLoop(animate);
   window.addEventListener("resize", () => onWindowResize(container));
 
@@ -62,18 +50,16 @@ export async function buildScene(container: HTMLElement, extent: Extent) {
   controls = new OrbitControls(camera, renderer.domElement);
   controls.target.set(center.x, center.y, center.z); // Focus on the center
   controls.enableDamping = true; // Smooth camera movement
+  controls.maxDistance = maxSize * 5;
   controls.update();
 
   // Scene will hold all our elements such as objects, cameras and lights
   scene = new Scene();
+  scene.background = new Color(0xdddddd);
 
   buildDefaultLights(scene);
 
-  // const queryString = window.location.search;
-  // const urlParams = new URLSearchParams(queryString);
-  // const modelid = parseInt(urlParams.get("model_id") ?? "20", 10);
-
-  return { renderer, scene, camera };
+  return { renderer, scene, camera, controls };
 }
 
 function onWindowResize(container: HTMLElement) {