714 lines
20 KiB
TypeScript
714 lines
20 KiB
TypeScript
"use client";
|
||
|
||
/* eslint-disable @next/next/no-img-element */
|
||
import {
|
||
ContactShadows,
|
||
Environment,
|
||
Grid,
|
||
OrbitControls,
|
||
useGLTF,
|
||
} from "@react-three/drei";
|
||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||
import { AlertCircle, Box, ExternalLink, Loader2 } from "lucide-react";
|
||
import React, { Suspense, useEffect, useMemo, useRef } from "react";
|
||
import * as THREE from "three";
|
||
import type { Mesh, Object3D } from "three";
|
||
import { KTX2Loader } from "three-stdlib";
|
||
import { Button } from "@/components/ui/button";
|
||
import { buildThreeAssetUrl } from "@/lib/canvas/three-asset-url";
|
||
|
||
export type Model3DLayer = {
|
||
id: string;
|
||
name: string;
|
||
triangles: number;
|
||
vertices: number;
|
||
};
|
||
|
||
export type Model3DStats = {
|
||
triangles: number;
|
||
vertices: number;
|
||
meshCount: number;
|
||
};
|
||
|
||
export type Model3DCameraPreset = "front" | "iso" | "right" | "top";
|
||
|
||
export type Model3DViewerSettings = {
|
||
cameraPreset: Model3DCameraPreset;
|
||
envPreset:
|
||
| "city"
|
||
| "sunset"
|
||
| "studio"
|
||
| "dawn"
|
||
| "night"
|
||
| "warehouse"
|
||
| "forest"
|
||
| "apartment"
|
||
| "park"
|
||
| "lobby";
|
||
lightIntensity: number;
|
||
autoRotate: boolean;
|
||
showGrid: boolean;
|
||
wireframe: boolean;
|
||
};
|
||
|
||
type Model3DViewerProps = {
|
||
modelUrl?: string | null;
|
||
previewImageUrl?: string | null;
|
||
emptyStateTitle?: string;
|
||
settings: Model3DViewerSettings;
|
||
modelRotation?: [number, number, number];
|
||
showMovementControls?: boolean;
|
||
layerVisibility?: Record<string, boolean>;
|
||
onLayersChange?: (layers: Model3DLayer[]) => void;
|
||
onStatsChange?: (stats: Model3DStats) => void;
|
||
resetViewToken?: number;
|
||
onCaptureReady?: (capture: (() => Promise<Blob | null>) | null) => void;
|
||
};
|
||
|
||
type MovementCommand = "forward" | "backward" | "left" | "right" | "up" | "down";
|
||
|
||
type MovementState = Record<MovementCommand, boolean>;
|
||
|
||
const EMPTY_MOVEMENT_STATE: MovementState = {
|
||
forward: false,
|
||
backward: false,
|
||
left: false,
|
||
right: false,
|
||
up: false,
|
||
down: false,
|
||
};
|
||
|
||
const KEY_TO_MOVEMENT: Partial<Record<string, MovementCommand>> = {
|
||
KeyW: "forward",
|
||
ArrowUp: "forward",
|
||
KeyS: "backward",
|
||
ArrowDown: "backward",
|
||
KeyA: "left",
|
||
ArrowLeft: "left",
|
||
KeyD: "right",
|
||
ArrowRight: "right",
|
||
KeyQ: "up",
|
||
PageUp: "up",
|
||
KeyE: "down",
|
||
PageDown: "down",
|
||
};
|
||
|
||
const CAMERA_PRESET_POSITIONS: Record<
|
||
Model3DCameraPreset,
|
||
[number, number, number]
|
||
> = {
|
||
front: [0, 1.1, 3.2],
|
||
iso: [2, 1.5, 2],
|
||
right: [3.2, 1.1, 0],
|
||
top: [0, 3.4, 0.001],
|
||
};
|
||
|
||
const KTX2_TRANSCODER_PATH = "/three/basis/";
|
||
|
||
function CameraPresetController({
|
||
controlsRef,
|
||
preset,
|
||
resetToken,
|
||
}: {
|
||
controlsRef: React.MutableRefObject<any>;
|
||
preset: Model3DCameraPreset;
|
||
resetToken?: number;
|
||
}) {
|
||
const { camera } = useThree();
|
||
|
||
useEffect(() => {
|
||
const [x, y, z] =
|
||
CAMERA_PRESET_POSITIONS[preset] || CAMERA_PRESET_POSITIONS.iso;
|
||
|
||
camera.position.set(x, y, z);
|
||
if (preset === "top") {
|
||
camera.up.set(0, 0, -1);
|
||
} else {
|
||
camera.up.set(0, 1, 0);
|
||
}
|
||
camera.lookAt(0, 0, 0);
|
||
|
||
const controls = controlsRef.current;
|
||
if (controls) {
|
||
controls.target.set(0, 0, 0);
|
||
controls.update();
|
||
}
|
||
}, [camera, controlsRef, preset, resetToken]);
|
||
|
||
return null;
|
||
}
|
||
|
||
// eslint-disable-next-line
|
||
class ViewerErrorBoundary extends React.Component<
|
||
{ children: React.ReactNode; fallback: React.ReactNode },
|
||
{ hasError: boolean }
|
||
> {
|
||
constructor(props: { children: React.ReactNode; fallback: React.ReactNode }) {
|
||
super(props);
|
||
this.state = { hasError: false };
|
||
}
|
||
|
||
static getDerivedStateFromError() {
|
||
return { hasError: true };
|
||
}
|
||
|
||
componentDidUpdate(prevProps: { children: React.ReactNode }) {
|
||
if (prevProps.children !== this.props.children && this.state.hasError) {
|
||
this.setState({ hasError: false });
|
||
}
|
||
}
|
||
|
||
render() {
|
||
if (this.state.hasError) {
|
||
return this.props.fallback;
|
||
}
|
||
return this.props.children;
|
||
}
|
||
}
|
||
|
||
function isMesh(node: Object3D): node is Mesh {
|
||
return (node as Mesh).isMesh === true;
|
||
}
|
||
|
||
function createMovementState(): MovementState {
|
||
return { ...EMPTY_MOVEMENT_STATE };
|
||
}
|
||
|
||
function isEditableKeyboardTarget(target: EventTarget | null) {
|
||
if (!(target instanceof HTMLElement)) return false;
|
||
if (target.isContentEditable) return true;
|
||
|
||
const editableSelector = "input, textarea, select, [contenteditable='true'], [role='textbox']";
|
||
if (target.matches(editableSelector)) return true;
|
||
return Boolean(target.closest(editableSelector));
|
||
}
|
||
|
||
function collectSceneMeta(scene: Object3D): {
|
||
layers: Model3DLayer[];
|
||
stats: Model3DStats;
|
||
meshRefs: Array<{ layerId: string; mesh: Mesh }>;
|
||
} {
|
||
const layers: Model3DLayer[] = [];
|
||
const meshRefs: Array<{ layerId: string; mesh: Mesh }> = [];
|
||
let triangles = 0;
|
||
let vertices = 0;
|
||
let meshCount = 0;
|
||
let meshIndex = 0;
|
||
|
||
scene.traverse((node) => {
|
||
if (!isMesh(node)) return;
|
||
const geometry = node.geometry;
|
||
if (!geometry) return;
|
||
|
||
const id = `${node.name || "Mesh"}__${meshIndex}`;
|
||
meshIndex += 1;
|
||
const indexCount = geometry.index?.count || 0;
|
||
const positionCount = geometry.attributes.position?.count || 0;
|
||
const meshTriangles =
|
||
indexCount > 0
|
||
? Math.floor(indexCount / 3)
|
||
: Math.floor(positionCount / 3);
|
||
const meshVertices = positionCount;
|
||
|
||
triangles += meshTriangles;
|
||
vertices += meshVertices;
|
||
meshCount += 1;
|
||
|
||
layers.push({
|
||
id,
|
||
name: node.name?.trim() || `mesh_${meshCount}`,
|
||
triangles: meshTriangles,
|
||
vertices: meshVertices,
|
||
});
|
||
meshRefs.push({ layerId: id, mesh: node });
|
||
});
|
||
|
||
return {
|
||
layers,
|
||
stats: {
|
||
triangles,
|
||
vertices,
|
||
meshCount,
|
||
},
|
||
meshRefs,
|
||
};
|
||
}
|
||
|
||
function ModelScene({
|
||
url,
|
||
settings,
|
||
modelRotation,
|
||
layerVisibility,
|
||
onLayersChange,
|
||
onStatsChange,
|
||
}: {
|
||
url: string;
|
||
settings: Model3DViewerSettings;
|
||
modelRotation?: [number, number, number];
|
||
layerVisibility?: Record<string, boolean>;
|
||
onLayersChange?: (layers: Model3DLayer[]) => void;
|
||
onStatsChange?: (stats: Model3DStats) => void;
|
||
}) {
|
||
const { gl } = useThree();
|
||
const ktx2Loader = useMemo(() => {
|
||
const nextLoader = new KTX2Loader();
|
||
nextLoader.setTranscoderPath(KTX2_TRANSCODER_PATH);
|
||
nextLoader.detectSupport(gl);
|
||
return nextLoader;
|
||
}, [gl]);
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
ktx2Loader.dispose();
|
||
};
|
||
}, [ktx2Loader]);
|
||
|
||
const model = useGLTF(
|
||
url,
|
||
true,
|
||
true,
|
||
(loader) => {
|
||
loader.setKTX2Loader(ktx2Loader);
|
||
},
|
||
);
|
||
const scene = useMemo(() => model.scene.clone(), [model.scene]);
|
||
const meta = useMemo(() => collectSceneMeta(scene), [scene]);
|
||
|
||
useEffect(() => {
|
||
onLayersChange?.(meta.layers);
|
||
onStatsChange?.(meta.stats);
|
||
}, [meta.layers, meta.stats, onLayersChange, onStatsChange]);
|
||
|
||
useEffect(() => {
|
||
for (const { layerId, mesh } of meta.meshRefs) {
|
||
const nextVisible = layerVisibility?.[layerId];
|
||
mesh.visible = nextVisible !== false;
|
||
}
|
||
}, [layerVisibility, meta.meshRefs]);
|
||
|
||
useEffect(() => {
|
||
for (const { mesh } of meta.meshRefs) {
|
||
mesh.castShadow = true;
|
||
mesh.receiveShadow = true;
|
||
const materials = Array.isArray(mesh.material)
|
||
? mesh.material
|
||
: [mesh.material];
|
||
for (const material of materials) {
|
||
if (!material) continue;
|
||
const textureLikeKeys = ["map", "emissiveMap"] as const;
|
||
for (const key of textureLikeKeys) {
|
||
const texture = (material as any)?.[key];
|
||
if (texture && "colorSpace" in texture) {
|
||
texture.colorSpace = THREE.SRGBColorSpace;
|
||
texture.needsUpdate = true;
|
||
}
|
||
}
|
||
if ("wireframe" in material) {
|
||
(material as any).wireframe = settings.wireframe;
|
||
}
|
||
material.needsUpdate = true;
|
||
}
|
||
}
|
||
}, [meta.meshRefs, settings.wireframe]);
|
||
|
||
return (
|
||
<group rotation={modelRotation || [0, 0, 0]}>
|
||
<primitive object={scene} scale={1} />
|
||
</group>
|
||
);
|
||
}
|
||
|
||
function ViewerCaptureBridge({
|
||
onCaptureReady,
|
||
}: {
|
||
onCaptureReady?: (capture: (() => Promise<Blob | null>) | null) => void;
|
||
}) {
|
||
const { camera, gl, scene } = useThree();
|
||
|
||
useEffect(() => {
|
||
if (!onCaptureReady) return;
|
||
|
||
onCaptureReady(async () => {
|
||
const canvas = gl.domElement;
|
||
gl.render(scene, camera);
|
||
|
||
const blob = await new Promise<Blob | null>((resolve) => {
|
||
if (typeof canvas.toBlob === "function") {
|
||
canvas.toBlob(resolve, "image/png");
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const dataUrl = canvas.toDataURL("image/png");
|
||
fetch(dataUrl)
|
||
.then((response) => response.blob())
|
||
.then((result) => resolve(result))
|
||
.catch(() => resolve(null));
|
||
} catch {
|
||
resolve(null);
|
||
}
|
||
});
|
||
|
||
return blob;
|
||
});
|
||
|
||
return () => onCaptureReady(null);
|
||
}, [camera, gl, onCaptureReady, scene]);
|
||
|
||
return null;
|
||
}
|
||
|
||
function ModelMovementControls({
|
||
enabled,
|
||
movementStateRef,
|
||
orbitControlsRef,
|
||
}: {
|
||
enabled: boolean;
|
||
movementStateRef: React.MutableRefObject<MovementState>;
|
||
orbitControlsRef: React.MutableRefObject<any>;
|
||
}) {
|
||
const { camera } = useThree();
|
||
const directionRef = useRef(new THREE.Vector3());
|
||
const rightRef = useRef(new THREE.Vector3());
|
||
const upRef = useRef(new THREE.Vector3());
|
||
const moveRef = useRef(new THREE.Vector3());
|
||
|
||
useEffect(() => {
|
||
if (!enabled) {
|
||
movementStateRef.current = createMovementState();
|
||
return;
|
||
}
|
||
|
||
const handleKeyDown = (event: KeyboardEvent) => {
|
||
const movement = KEY_TO_MOVEMENT[event.code];
|
||
if (!movement) return;
|
||
if (event.metaKey || event.ctrlKey || event.altKey) return;
|
||
if (isEditableKeyboardTarget(event.target)) {
|
||
movementStateRef.current = createMovementState();
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
movementStateRef.current[movement] = true;
|
||
};
|
||
const handleKeyUp = (event: KeyboardEvent) => {
|
||
const movement = KEY_TO_MOVEMENT[event.code];
|
||
if (!movement) return;
|
||
event.preventDefault();
|
||
movementStateRef.current[movement] = false;
|
||
};
|
||
const handleBlur = () => {
|
||
movementStateRef.current = createMovementState();
|
||
};
|
||
|
||
window.addEventListener("keydown", handleKeyDown);
|
||
window.addEventListener("keyup", handleKeyUp);
|
||
window.addEventListener("blur", handleBlur);
|
||
return () => {
|
||
window.removeEventListener("keydown", handleKeyDown);
|
||
window.removeEventListener("keyup", handleKeyUp);
|
||
window.removeEventListener("blur", handleBlur);
|
||
};
|
||
}, [enabled, movementStateRef]);
|
||
|
||
useFrame((_, delta) => {
|
||
if (!enabled) return;
|
||
|
||
const pressed = movementStateRef.current;
|
||
if (!Object.values(pressed).some(Boolean)) return;
|
||
|
||
camera.getWorldDirection(directionRef.current);
|
||
directionRef.current.setY(0);
|
||
if (directionRef.current.lengthSq() < 0.0001) {
|
||
directionRef.current.set(0, 0, -1);
|
||
}
|
||
directionRef.current.normalize();
|
||
rightRef.current.crossVectors(directionRef.current, camera.up).normalize();
|
||
upRef.current.copy(camera.up).normalize();
|
||
moveRef.current.set(0, 0, 0);
|
||
|
||
if (pressed.forward) moveRef.current.add(directionRef.current);
|
||
if (pressed.backward) moveRef.current.addScaledVector(directionRef.current, -1);
|
||
if (pressed.left) moveRef.current.addScaledVector(rightRef.current, -1);
|
||
if (pressed.right) moveRef.current.add(rightRef.current);
|
||
if (pressed.up) moveRef.current.add(upRef.current);
|
||
if (pressed.down) moveRef.current.addScaledVector(upRef.current, -1);
|
||
if (moveRef.current.lengthSq() === 0) return;
|
||
|
||
const distance = 2.6 * delta;
|
||
moveRef.current.normalize().multiplyScalar(distance);
|
||
camera.position.add(moveRef.current);
|
||
if (orbitControlsRef.current?.target) {
|
||
orbitControlsRef.current.target.add(moveRef.current);
|
||
orbitControlsRef.current.update?.();
|
||
}
|
||
});
|
||
|
||
return null;
|
||
}
|
||
|
||
function ModelMovementPad({
|
||
movementStateRef,
|
||
}: {
|
||
movementStateRef: React.MutableRefObject<MovementState>;
|
||
}) {
|
||
const setPressed = React.useCallback(
|
||
(command: MovementCommand, pressed: boolean) => {
|
||
movementStateRef.current[command] = pressed;
|
||
},
|
||
[movementStateRef]
|
||
);
|
||
const clearMovement = React.useCallback(() => {
|
||
movementStateRef.current = createMovementState();
|
||
}, [movementStateRef]);
|
||
const buttonClass =
|
||
"flex h-8 w-8 select-none items-center justify-center rounded-[8px] border border-white/15 bg-black/60 text-[12px] font-bold text-white shadow-[0_8px_22px_rgba(0,0,0,0.28)] backdrop-blur-md transition hover:bg-black/75 active:scale-95";
|
||
const buttonProps = (command: MovementCommand) => ({
|
||
"aria-label": command,
|
||
className: buttonClass,
|
||
onPointerDown: (event: React.PointerEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
event.currentTarget.setPointerCapture?.(event.pointerId);
|
||
setPressed(command, true);
|
||
},
|
||
onPointerUp: (event: React.PointerEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setPressed(command, false);
|
||
},
|
||
onPointerCancel: (event: React.PointerEvent<HTMLButtonElement>) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
clearMovement();
|
||
},
|
||
onPointerLeave: (event: React.PointerEvent<HTMLButtonElement>) => {
|
||
event.stopPropagation();
|
||
setPressed(command, false);
|
||
},
|
||
type: "button" as const,
|
||
});
|
||
|
||
return (
|
||
<div
|
||
className="nodrag nopan nowheel pointer-events-auto absolute bottom-3 left-3 z-20 flex items-end gap-2"
|
||
data-canvas-no-drag="true"
|
||
onContextMenu={(event) => event.preventDefault()}
|
||
onPointerDown={(event) => event.stopPropagation()}
|
||
onPointerUp={(event) => event.stopPropagation()}
|
||
onWheel={(event) => event.stopPropagation()}
|
||
>
|
||
<div className="grid grid-cols-3 gap-1 rounded-[12px] border border-white/10 bg-black/26 p-1.5 backdrop-blur-md">
|
||
<span />
|
||
<button {...buttonProps("forward")}>W</button>
|
||
<span />
|
||
<button {...buttonProps("left")}>A</button>
|
||
<button {...buttonProps("backward")}>S</button>
|
||
<button {...buttonProps("right")}>D</button>
|
||
</div>
|
||
<div className="grid gap-1 rounded-[12px] border border-white/10 bg-black/26 p-1.5 backdrop-blur-md">
|
||
<button {...buttonProps("up")}>Q</button>
|
||
<button {...buttonProps("down")}>E</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function isGlbOrGltf(url?: string | null) {
|
||
const value = String(url || "").toLowerCase();
|
||
return /\.(gltf|glb)(\?|#|$)/.test(value);
|
||
}
|
||
|
||
function EmptyState({
|
||
previewImageUrl,
|
||
title,
|
||
}: {
|
||
previewImageUrl?: string | null;
|
||
title: string;
|
||
}) {
|
||
return (
|
||
<div className="flex h-full w-full flex-col items-center justify-center gap-4 bg-zinc-950/50 p-4">
|
||
{previewImageUrl ? (
|
||
<div className="relative aspect-square w-64 overflow-hidden rounded-xl border border-white/10 bg-zinc-900/50 shadow-2xl">
|
||
<img
|
||
alt="3D 预览"
|
||
className="h-full w-full object-cover opacity-50 transition-opacity hover:opacity-100"
|
||
src={previewImageUrl}
|
||
/>
|
||
<div className="absolute inset-0 flex items-center justify-center bg-black/20 backdrop-blur-[1px]">
|
||
<Loader2 className="h-8 w-8 animate-spin text-white/50" />
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="flex flex-col items-center gap-4 text-zinc-500">
|
||
<div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-zinc-900/50 shadow-inner">
|
||
<Box className="h-10 w-10 opacity-20" />
|
||
</div>
|
||
<p className="font-medium text-sm">{title}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function Model3DViewer({
|
||
modelUrl,
|
||
previewImageUrl,
|
||
emptyStateTitle = "准备生成 3D 资产",
|
||
settings,
|
||
modelRotation,
|
||
showMovementControls = false,
|
||
layerVisibility,
|
||
onLayersChange,
|
||
onStatsChange,
|
||
resetViewToken,
|
||
onCaptureReady,
|
||
}: Model3DViewerProps) {
|
||
const controlsRef = useRef<any>(null);
|
||
const movementStateRef = useRef<MovementState>(createMovementState());
|
||
const resolvedModelUrl = useMemo(() => {
|
||
return buildThreeAssetUrl(modelUrl);
|
||
}, [modelUrl]);
|
||
|
||
if (!modelUrl) {
|
||
return (
|
||
<EmptyState previewImageUrl={previewImageUrl} title={emptyStateTitle} />
|
||
);
|
||
}
|
||
|
||
if (!isGlbOrGltf(modelUrl)) {
|
||
return (
|
||
<div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
|
||
<AlertCircle className="h-8 w-8 text-yellow-500/50" />
|
||
<p className="text-sm">当前文件格式不支持内嵌预览，请在新窗口打开</p>
|
||
<Button
|
||
asChild
|
||
className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
|
||
variant="outline"
|
||
>
|
||
<a href={modelUrl} rel="noreferrer" target="_blank">
|
||
<ExternalLink className="h-4 w-4" />
|
||
打开3D文件
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<ViewerErrorBoundary
|
||
fallback={
|
||
<div className="flex h-full w-full flex-col items-center justify-center gap-3 bg-zinc-950 p-4 text-zinc-400">
|
||
<AlertCircle className="h-8 w-8 text-red-500/50" />
|
||
<p className="text-sm">3D 预览加载失败，请尝试在新窗口打开</p>
|
||
<Button
|
||
asChild
|
||
className="gap-2 border-white/10 text-zinc-300 hover:bg-white/5"
|
||
variant="outline"
|
||
>
|
||
<a href={modelUrl} rel="noreferrer" target="_blank">
|
||
<ExternalLink className="h-4 w-4" />
|
||
打开3D文件
|
||
</a>
|
||
</Button>
|
||
</div>
|
||
}
|
||
>
|
||
<div className="relative h-full w-full overflow-hidden">
|
||
<Canvas
|
||
camera={{
|
||
position:
|
||
CAMERA_PRESET_POSITIONS[settings.cameraPreset] ||
|
||
CAMERA_PRESET_POSITIONS.iso,
|
||
fov: 45,
|
||
}}
|
||
className="bg-gradient-to-b from-zinc-900 to-zinc-950"
|
||
gl={{ preserveDrawingBuffer: true }}
|
||
onCreated={({ gl }) => {
|
||
gl.outputColorSpace = THREE.SRGBColorSpace;
|
||
gl.toneMapping = THREE.ACESFilmicToneMapping;
|
||
gl.toneMappingExposure = 1;
|
||
}}
|
||
>
|
||
<ViewerCaptureBridge onCaptureReady={onCaptureReady} />
|
||
<CameraPresetController
|
||
controlsRef={controlsRef}
|
||
preset={settings.cameraPreset}
|
||
resetToken={resetViewToken}
|
||
/>
|
||
<ModelMovementControls
|
||
enabled={showMovementControls}
|
||
movementStateRef={movementStateRef}
|
||
orbitControlsRef={controlsRef}
|
||
/>
|
||
<ambientLight intensity={0.5 * settings.lightIntensity} />
|
||
<directionalLight
|
||
intensity={1.2 * settings.lightIntensity}
|
||
position={[5, 8, 5]}
|
||
shadow-bias={-0.0001}
|
||
/>
|
||
|
||
{settings.showGrid ? (
|
||
<Grid
|
||
args={[20, 20]}
|
||
cellColor="#3f3f46"
|
||
cellSize={0.5}
|
||
fadeDistance={30}
|
||
fadeStrength={1}
|
||
position={[0, -0.01, 0]}
|
||
sectionColor="#52525b"
|
||
sectionSize={2}
|
||
/>
|
||
) : null}
|
||
|
||
<Suspense
|
||
fallback={
|
||
<mesh>
|
||
<boxGeometry args={[0.5, 0.5, 0.5]} />
|
||
<meshStandardMaterial color="#27272a" wireframe />
|
||
</mesh>
|
||
}
|
||
>
|
||
<group position={[0, 0, 0]}>
|
||
<ModelScene
|
||
layerVisibility={layerVisibility}
|
||
modelRotation={modelRotation}
|
||
onLayersChange={onLayersChange}
|
||
onStatsChange={onStatsChange}
|
||
settings={settings}
|
||
url={resolvedModelUrl}
|
||
/>
|
||
<ContactShadows
|
||
blur={2}
|
||
color="#000000"
|
||
far={4}
|
||
opacity={0.4}
|
||
resolution={256}
|
||
scale={10}
|
||
/>
|
||
</group>
|
||
<Environment preset={settings.envPreset} />
|
||
</Suspense>
|
||
<OrbitControls
|
||
autoRotate={settings.autoRotate}
|
||
dampingFactor={0.08}
|
||
enableDamping
|
||
enablePan={false}
|
||
enableRotate
|
||
enableZoom
|
||
makeDefault
|
||
maxPolarAngle={Math.PI / 1.75}
|
||
mouseButtons={{
|
||
LEFT: THREE.MOUSE.ROTATE,
|
||
MIDDLE: THREE.MOUSE.DOLLY,
|
||
RIGHT: THREE.MOUSE.ROTATE,
|
||
}}
|
||
minPolarAngle={0}
|
||
ref={controlsRef}
|
||
/>
|
||
</Canvas>
|
||
{showMovementControls ? <ModelMovementPad movementStateRef={movementStateRef} /> : null}
|
||
</div>
|
||
</ViewerErrorBoundary>
|
||
);
|
||
}
|