fuhtho/3d-viewer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finish explode tool

Browse source
This commit is contained in:
Fuhrmann 2025-03-24 15:00:38 +01:00
parent f998ecd519
commit 3e78657aef
5 changed files with 149 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

55
app/components/Form.tsx
View file

@ -22,24 +22,29 @@ function Toggle({
title,
onChange,
defaultChecked,
disabled = false,
}: {
title: string;
onChange: (e: ChangeEvent<HTMLInputElement>) => void;
defaultChecked?: boolean;
disabled?: boolean;
}) {
return (
<label className="inline-flex items-center cursor-pointer">
<input
type="checkbox"
value=""
className="sr-only peer"
onChange={onChange}
defaultChecked={defaultChecked ? true : false}
/>
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-gray-300 rounded-full peer dark:bg-gray-400 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-400 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-400"></div>
<span className="ms-3 text-xs xl:text-sm font-medium text-gray-500 dark:text-gray-400">
{title}
</span>
<label className="group">
<div className="inline-flex items-center cursor-pointer group-has-[input:disabled]:cursor-default">
<input
type="checkbox"
value=""
className="sr-only peer"
onChange={onChange}
defaultChecked={defaultChecked ? true : false}
disabled={disabled}
/>
<div className="relative w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-gray-300 rounded-full peer dark:bg-gray-400 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-400 peer-checked:bg-blue-600 dark:peer-checked:bg-blue-400"></div>
<span className="ms-3 text-xs xl:text-sm font-medium text-gray-500 dark:text-gray-400 group-has-[input:disabled]:text-gray-200">
{title}
</span>
</div>
</label>
);
}
@ -133,6 +138,7 @@ export function Form() {
const accordionRef0 = useRef<AccordionRef>(null);
const [emptyProfile, setEmptyProfile] = useState<boolean>(false);
const [exploded, setExploded] = useState<boolean>(false);
const { sceneView } = useContext(SceneViewContext) as SceneViewContextType;
function handleChange() {
@ -207,6 +213,18 @@ export function Form() {
sceneView.exportOBJ();
}
function handleExplode(e: ChangeEvent<HTMLInputElement>) {
if (!sceneView) return;
if (e.target.checked) {
sceneView.explode(true);
// setExploded(true);
} else {
sceneView.explode(false);
// setExploded(false);
}
}
return (
<div className="w-full max-h-full min-h-0 flex flex-col gap-2 dark:bg-gray-700">
<div className="w-full flex justify-end">
@ -218,8 +236,16 @@ export function Form() {
</button>
</div>
<div className="border border-gray-200 dark:border-gray-400 rounded grid grid-cols-2 gap-y-2 p-2">
<Toggle title="Slicing Box" onChange={handleChange} />
<Toggle title="Virtual Profile" onChange={handleDrilling} />
<Toggle
title="Slicing Box"
onChange={handleChange}
disabled={exploded ? true : false}
/>
<Toggle
title="Virtual Profile"
onChange={handleDrilling}
disabled={exploded ? true : false}
/>
<Toggle title="Coordinate Grid" onChange={handleChangeCG} />
<Toggle title="Wireframe" onChange={handleChangeWireframe} />
<Toggle
@ -227,6 +253,7 @@ export function Form() {
onChange={handleChangeTopography}
defaultChecked
/>
<Toggle title="Explode" onChange={handleExplode} />
</div>
<div className="px-2 pt-2 border border-gray-200 dark:border-gray-400 rounded">
<RangeSlider></RangeSlider>

93
app/three/SceneView.ts
View file

@ -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 };
}

36
app/three/utils/build-clipping-planes.ts
View file

@ -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,

6
app/three/utils/build-meshes.ts
View file

@ -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,

10
app/three/utils/build-scene.ts
View file

@ -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);