Finish explode tool

app/three/SceneView.ts

@@ -1,15 +1,17 @@
 import {
-  Camera,
   Group,
+  Material,
   Mesh,
   MeshBasicMaterial,
   MeshStandardMaterial,
+  PerspectiveCamera,
   Plane,
   Raycaster,
   Scene,
   SphereGeometry,
   Vector2,
   Vector3,
+  WebGLRenderer,
 } from "three";
 import { buildMeshes } from "./utils/build-meshes";
 import { Extent, buildScene } from "./utils/build-scene";
@@ -40,7 +42,7 @@ export class SceneView extends EventTarget {
   private _scene: Scene;
   private _dragControls: DragControls;
   private _model: Group;
-  private _camera: Camera;
+  private _camera: PerspectiveCamera;
   private _container: HTMLElement;
   private _raycaster: Raycaster;
   private _extent: Extent;
@@ -50,15 +52,17 @@ export class SceneView extends EventTarget {
   private static _DRAG_THRESHOLD = 5;
   private _callback: EventListenerOrEventListenerObject | null = null;
   private _orbitControls: OrbitControls;
+  private _renderer: WebGLRenderer;
 
   constructor(
     scene: Scene,
     model: Group,
     dragControls: DragControls,
-    camera: Camera,
+    camera: PerspectiveCamera,
     container: HTMLElement,
     extent: Extent,
-    orbitControls: OrbitControls
+    orbitControls: OrbitControls,
+    renderer: WebGLRenderer
   ) {
     super();
     this._scene = scene;
@@ -69,13 +73,12 @@ export class SceneView extends EventTarget {
     this._raycaster = new Raycaster();
     this._extent = extent;
     this._orbitControls = orbitControls;
+    this._renderer = renderer;
   }
 
   static async create(container: HTMLElement, modelId: string) {
-    const { scene, model, dragControls, camera, extent, controls } = await init(
-      container,
-      modelId
-    );
+    const { scene, model, dragControls, camera, extent, controls, renderer } =
+      await init(container, modelId);
 
     return new SceneView(
       scene,
@@ -84,7 +87,8 @@ export class SceneView extends EventTarget {
       camera,
       container,
       extent,
-      controls
+      controls,
+      renderer
     );
   }
 
@@ -311,7 +315,7 @@ export class SceneView extends EventTarget {
   }
 
   // Function to export the group as an OBJ file
-  public exportOBJ() {
+  exportOBJ() {
     const exporter = new OBJExporter();
     const objString = exporter.parse(this._model);
 
@@ -326,9 +330,70 @@ export class SceneView extends EventTarget {
   }
 
   // Reset view to initial extent
-  public resetView() {
+  resetView() {
     this._orbitControls.reset();
   }
+
+  explode(explode: boolean) {
+    const DISPLACEMENT = 2000;
+    for (let i = 1; i < this._model.children.length; i++) {
+      const mesh = this._model.children[i];
+
+      if (explode) {
+        const displacement =
+          (this._model.children.length - i - 1) * DISPLACEMENT;
+        mesh.userData.originalPosition = mesh.position.clone();
+        mesh.translateZ(displacement);
+
+        if (i === 1) {
+          this._model.userData.zmax = this._extent.zmax;
+          this._extent.zmax += displacement;
+        }
+      } else {
+        if (mesh.userData.originalPosition) {
+          mesh.position.copy(mesh.userData.originalPosition);
+        }
+      }
+    }
+
+    // Reset extent
+    if (!explode && this._model.userData.zmax) {
+      this._extent.zmax = this._model.userData.zmax;
+    }
+
+    const box = this._scene.getObjectByName("clipping-box");
+    let visible = false;
+    if (box) {
+      visible = box.visible;
+      this._scene.remove(box);
+    }
+    const { planes, dragControls } = buildClippingplanes(
+      this._renderer,
+      this._camera,
+      this._orbitControls,
+      this._extent,
+      this._model.children as Mesh[],
+      this._scene,
+      visible
+    );
+
+    this._dragControls = dragControls;
+
+    // Add clipping planes to the meshes
+    for (const mesh of this._model.children) {
+      ((mesh as Mesh).material as Material).clippingPlanes = planes;
+    }
+
+    // Remove existing cap meshes
+    for (const o in Orientation) {
+      const capMeshGroupName = `cap-mesh-group-${o}`;
+      let capMeshGroup = this._scene.getObjectByName(capMeshGroupName);
+      while (capMeshGroup) {
+        this._scene.remove(capMeshGroup);
+        capMeshGroup = this._scene.getObjectByName(capMeshGroupName);
+      }
+    }
+  }
 }
 
 async function init(container: HTMLElement, modelId = MODEL_ID) {
@@ -358,13 +423,15 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
   scene.add(model);
 
   // Build the clipping planes and add them to the scene
+  const visible = false;
   const { planes, dragControls } = buildClippingplanes(
     renderer,
     camera,
     controls,
     extent,
     meshes,
-    scene
+    scene,
+    visible
   );
 
   // Add clipping planes to the meshes
@@ -404,5 +471,5 @@ async function init(container: HTMLElement, modelId = MODEL_ID) {
   map.name = "topography";
   scene.add(map);
 
-  return { scene, model, dragControls, camera, extent, controls };
+  return { scene, model, dragControls, camera, extent, controls, renderer };
 }

app/three/utils/build-clipping-planes.ts

@@ -23,9 +23,9 @@ import { Extent } from "./build-scene";
 import earcut from "earcut";
 
 export enum Orientation {
-  X = "x",
-  Y = "y",
-  Z = "z",
+  X = "X",
+  Y = "Y",
+  Z = "Z",
 }
 
 type PlaneMesh = Mesh<PlaneGeometry, MeshBasicMaterial, Object3DEventMap>;
@@ -47,7 +47,8 @@ export function buildClippingplanes(
   orbitControls: OrbitControls,
   extent: Extent,
   meshes: Mesh[],
-  scene: Scene
+  scene: Scene,
+  visible: boolean
 ) {
   const planesData = [
     {
@@ -166,7 +167,7 @@ export function buildClippingplanes(
   const clippingBox = new Group();
   clippingBox.add(planeMeshGroup, edgeMeshGroup);
   clippingBox.name = "clipping-box";
-  clippingBox.visible = false;
+  clippingBox.visible = visible;
   scene.add(clippingBox);
 
   // Enable DragControls for the clipping planes
@@ -176,7 +177,7 @@ export function buildClippingplanes(
     renderer.domElement
   );
 
-  dragControls.enabled = false;
+  dragControls.enabled = visible;
 
   dragControls.addEventListener("dragstart", () => {
     // Disable OrbitControls when dragging starts
@@ -469,8 +470,6 @@ function generateCapMeshes(
 
   // Iterate over the list of geologic meshes
   for (const mesh of meshes) {
-    // Slice visible meshes only
-
     const position = mesh.geometry.attributes.position.array;
     const indices = mesh.geometry.index ? mesh.geometry.index.array : null;
     const edges: Array<[Vector3, Vector3]> = [];
@@ -484,9 +483,22 @@ function generateCapMeshes(
       const i2 = indices ? indices[i + 1] * 3 : (i + 1) * 3;
       const i3 = indices ? indices[i + 2] * 3 : (i + 2) * 3;
 
-      const v1 = new Vector3(position[i1], position[i1 + 1], position[i1 + 2]);
-      const v2 = new Vector3(position[i2], position[i2 + 1], position[i2 + 2]);
-      const v3 = new Vector3(position[i3], position[i3 + 1], position[i3 + 2]);
+      // Account for local translation of the mesh to its original geometry
+      const v1 = new Vector3(
+        position[i1],
+        position[i1 + 1],
+        position[i1 + 2] + mesh.position.z
+      );
+      const v2 = new Vector3(
+        position[i2],
+        position[i2 + 1],
+        position[i2 + 2] + mesh.position.z
+      );
+      const v3 = new Vector3(
+        position[i3],
+        position[i3 + 1],
+        position[i3 + 2] + mesh.position.z
+      );
 
       // Check if the triangle is cut by the plane
       const d1 = plane.distanceToPoint(v1);
@@ -516,7 +528,7 @@ function generateCapMeshes(
       color: (mesh.material as MeshStandardMaterial).color,
       side: DoubleSide,
       metalness: 0.0,
-      roughness: 0.75,
+      roughness: 1.0,
       flatShading: true,
       polygonOffset: true,
       polygonOffsetFactor: offset,

app/three/utils/build-meshes.ts

@@ -52,15 +52,11 @@ async function buildMesh(layerData: MappedFeature) {
   const indices = new BufferAttribute(indexArray, 1);
 
   geometry.setIndex(indices);
-  geometry.scale(1, 1, 1);
-  geometry.computeBoundingSphere();
-  geometry.computeVertexNormals();
-  geometry.computeBoundingBox();
 
   const material = new MeshStandardMaterial({
     color: color,
     metalness: 0.0,
-    roughness: 0.75,
+    roughness: 1.0,
     flatShading: true,
     side: DoubleSide,
     wireframe: false,

app/three/utils/build-scene.ts

@@ -13,6 +13,7 @@ import {
   SpriteMaterial,
   Sprite,
   Euler,
+  Color,
 } from "three";
 
 import { OrbitControls } from "three/addons/controls/OrbitControls.js";
@@ -41,12 +42,7 @@ export function buildScene(container: HTMLElement, extent: Extent) {
   const width = container.clientWidth;
   const height = container.clientHeight;
 
-  camera = new PerspectiveCamera(
-    50,
-    width / height,
-    maxSize * 0.1,
-    maxSize * 25
-  );
+  camera = new PerspectiveCamera(50, width / height, 10, maxSize * 20);
 
   camera.position.set(center.x, center.y - 200000, extent.zmax + 100000);
   camera.up.set(0, 0, 1);
@@ -54,7 +50,6 @@ export function buildScene(container: HTMLElement, extent: Extent) {
 
   // Initialize the renderer
   renderer = new WebGLRenderer({
-    alpha: true,
     logarithmicDepthBuffer: true,
   });
 
@@ -80,6 +75,7 @@ export function buildScene(container: HTMLElement, extent: Extent) {
   // Set wireframe to false on initial load
   scene = new Scene();
   scene.userData.wireframe = false;
+  scene.background = new Color(0xbfd1e5);
 
   // Add lights to the scene
   buildDefaultLights(scene, extent);