First commit

app/three/utils/build-scene.ts

@@ -0,0 +1,104 @@
+import {
+  BoxGeometry,
+  Camera,
+  Mesh,
+  MeshBasicMaterial,
+  PerspectiveCamera,
+  Scene,
+  Vector3,
+  WebGLRenderer,
+} from "three";
+
+import { buildDefaultLights } from "./build-default-lights";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+
+export interface Extent {
+  xmin: number;
+  ymin: number;
+  xmax: number;
+  ymax: number;
+  zmin: number;
+  zmax: number;
+}
+
+let controls: OrbitControls;
+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 width = container.clientWidth;
+  const height = container.clientHeight;
+
+  camera = new PerspectiveCamera(30, width / height, 0.1, size * 100);
+  camera.position.set(center.x, center.y, size * 5);
+  camera.lookAt(center);
+
+  renderer = new WebGLRenderer({
+    alpha: true,
+  });
+
+  renderer.setPixelRatio(window.devicePixelRatio);
+  renderer.setSize(width, height);
+  //renderer.autoClear = false;
+  //renderer.setClearColor(0x000000, 0.0); // second param is opacity, 0 => transparent
+
+  // enable clipping
+  renderer.localClippingEnabled = true;
+  container.appendChild(renderer.domElement);
+
+  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.update();
+
+  // Scene will hold all our elements such as objects, cameras and lights
+  scene = new Scene();
+
+  buildDefaultLights(scene);
+
+  // const queryString = window.location.search;
+  // const urlParams = new URLSearchParams(queryString);
+  // const modelid = parseInt(urlParams.get("model_id") ?? "20", 10);
+
+  renderer.setAnimationLoop(animate);
+
+  window.addEventListener("resize", () => onWindowResize(container));
+
+  const testCube = new Mesh(
+    new BoxGeometry(size * 0.1, size * 0.1, size * 0.1),
+    new MeshBasicMaterial({ color: 0xff0000 })
+  );
+  testCube.position.copy(center);
+  scene.add(testCube);
+
+  return { renderer, scene, camera };
+}
+
+function onWindowResize(container: HTMLElement) {
+  // Update the camera's aspect ratio and the renderer's size to reflect
+  // the new screen dimensions upon a browser window resize.
+  camera.aspect = container.clientWidth / container.clientHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(container.clientWidth, container.clientHeight);
+
+  // required if controls.enableDamping or controls.autoRotate are set to true
+  controls.update();
+}
+
+function animate() {
+  renderer.render(scene, camera);
+  // required if controls.enableDamping or controls.autoRotate are set to true
+  controls.update();
+}