New 'model3d' builtin viewer backed by three.js: GLTFLoader for gltf/glb, FBXLoader and OBJLoader for the rest, OrbitControls for camera, and bounding-sphere auto-framing. The renderer lazy-chunks (~186KB gz) so it only loads when a model is opened. Registered in the default file_viewers config; a schema patch appends it to existing installs on the next release bump. Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>pull/3582/head
Tomas Dvorak
2 weeks ago
parent
d264d3c734
commit
c6bf098b87
@ -0,0 +1,75 @@
|
||||
import { Suspense, useCallback, useEffect, useState } from "react";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import React from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { getFileEntityUrl } from "../../../api/api.ts";
|
||||
import { closeModelViewer } from "../../../redux/globalStateSlice.ts";
|
||||
import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts";
|
||||
import { getFileLinkedUri } from "../../../util";
|
||||
import { DefaultCloseAction } from "../../Common/Snackbar/snackbar.tsx";
|
||||
import ViewerDialog, { ViewerLoading } from "../ViewerDialog.tsx";
|
||||
|
||||
const ModelViewerCanvas = React.lazy(() => import("./ModelViewerCanvas.tsx"));
|
||||
|
||||
const ModelViewer = () => {
|
||||
const { t } = useTranslation();
|
||||
const dispatch = useAppDispatch();
|
||||
const viewerState = useAppSelector((state) => state.globalState.modelViewer);
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [src, setSrc] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (!viewerState || !viewerState.open) {
|
||||
return;
|
||||
}
|
||||
|
||||
setSrc("");
|
||||
setLoading(true);
|
||||
dispatch(
|
||||
getFileEntityUrl({
|
||||
uris: [getFileLinkedUri(viewerState.file)],
|
||||
entity: viewerState.version,
|
||||
}),
|
||||
)
|
||||
.then((res) => setSrc(res.urls[0].url))
|
||||
.catch(() => onClose())
|
||||
.finally(() => setLoading(false));
|
||||
}, [viewerState]);
|
||||
|
||||
const onClose = useCallback(() => {
|
||||
dispatch(closeModelViewer());
|
||||
}, [dispatch]);
|
||||
|
||||
const onError = useCallback(() => {
|
||||
enqueueSnackbar({
|
||||
message: t("fileManager.modelLoadFailed"),
|
||||
variant: "error",
|
||||
action: DefaultCloseAction,
|
||||
});
|
||||
onClose();
|
||||
}, [onClose, t]);
|
||||
|
||||
return (
|
||||
<ViewerDialog
|
||||
file={viewerState?.file}
|
||||
loading={loading}
|
||||
dialogProps={{
|
||||
open: !!(viewerState && viewerState.open),
|
||||
onClose: onClose,
|
||||
fullWidth: true,
|
||||
fullScreen: true,
|
||||
maxWidth: "lg",
|
||||
}}
|
||||
>
|
||||
{!src && <ViewerLoading />}
|
||||
{src && (
|
||||
<Suspense fallback={<ViewerLoading />}>
|
||||
<ModelViewerCanvas src={src} fileName={viewerState?.file.name ?? ""} onError={onError} />
|
||||
</Suspense>
|
||||
)}
|
||||
</ViewerDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default ModelViewer;
|
||||
@ -0,0 +1,135 @@
|
||||
import { Box } from "@mui/material";
|
||||
import { useEffect, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||
import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
|
||||
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
|
||||
import { fileExtension } from "../../../util";
|
||||
|
||||
export interface ModelViewerCanvasProps {
|
||||
src: string;
|
||||
fileName: string;
|
||||
onLoaded?: () => void;
|
||||
onError?: () => void;
|
||||
}
|
||||
|
||||
const loadModel = (src: string, ext: string): Promise<THREE.Object3D> => {
|
||||
switch (ext) {
|
||||
case "gltf":
|
||||
case "glb":
|
||||
return new Promise((resolve, reject) =>
|
||||
new GLTFLoader().load(src, (g) => resolve(g.scene), undefined, reject),
|
||||
);
|
||||
case "fbx":
|
||||
return new Promise((resolve, reject) => new FBXLoader().load(src, resolve, undefined, reject));
|
||||
case "obj":
|
||||
return new Promise((resolve, reject) => new OBJLoader().load(src, resolve, undefined, reject));
|
||||
default:
|
||||
return Promise.reject(new Error(`unsupported model format: ${ext}`));
|
||||
}
|
||||
};
|
||||
|
||||
const ModelViewerCanvas = ({ src, fileName, onLoaded, onError }: ModelViewerCanvasProps) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const container = containerRef.current;
|
||||
if (!container || !src) {
|
||||
return;
|
||||
}
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x1a1a1a);
|
||||
|
||||
const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 5000);
|
||||
const controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
|
||||
scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 1.2));
|
||||
const dir = new THREE.DirectionalLight(0xffffff, 1.5);
|
||||
dir.position.set(3, 5, 4);
|
||||
scene.add(dir);
|
||||
scene.add(new THREE.GridHelper(10, 20, 0x444444, 0x2a2a2a));
|
||||
|
||||
let disposed = false;
|
||||
let model: THREE.Object3D | undefined;
|
||||
loadModel(src, fileExtension(fileName) ?? "")
|
||||
.then((obj) => {
|
||||
if (disposed) {
|
||||
return;
|
||||
}
|
||||
model = obj;
|
||||
// Center on origin and scale so the model fits the view.
|
||||
const box = new THREE.Box3().setFromObject(obj);
|
||||
const center = box.getCenter(new THREE.Vector3());
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const radius = Math.max(size.x, size.y, size.z, 1e-6);
|
||||
obj.position.sub(center);
|
||||
const scale = 4 / radius;
|
||||
obj.scale.setScalar(scale);
|
||||
scene.add(obj);
|
||||
|
||||
const sphere = new THREE.Box3().setFromObject(obj).getBoundingSphere(new THREE.Sphere());
|
||||
camera.position.set(sphere.radius * 1.8, sphere.radius * 1.2, sphere.radius * 1.8);
|
||||
camera.near = sphere.radius / 100;
|
||||
camera.far = sphere.radius * 100;
|
||||
camera.updateProjectionMatrix();
|
||||
controls.target.set(0, 0, 0);
|
||||
controls.update();
|
||||
onLoaded?.();
|
||||
})
|
||||
.catch(() => onError?.());
|
||||
|
||||
const resize = () => {
|
||||
const w = container.clientWidth;
|
||||
const h = container.clientHeight;
|
||||
if (w === 0 || h === 0) {
|
||||
return;
|
||||
}
|
||||
camera.aspect = w / h;
|
||||
camera.updateProjectionMatrix();
|
||||
renderer.setSize(w, h);
|
||||
};
|
||||
resize();
|
||||
const observer = new ResizeObserver(resize);
|
||||
observer.observe(container);
|
||||
|
||||
const animate = () => {
|
||||
if (disposed) {
|
||||
return;
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
animate();
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
observer.disconnect();
|
||||
controls.dispose();
|
||||
model?.traverse((o) => {
|
||||
const mesh = o as THREE.Mesh;
|
||||
mesh.geometry?.dispose();
|
||||
const material = mesh.material as THREE.Material | THREE.Material[] | undefined;
|
||||
if (Array.isArray(material)) {
|
||||
material.forEach((m) => m.dispose());
|
||||
} else {
|
||||
material?.dispose();
|
||||
}
|
||||
});
|
||||
renderer.dispose();
|
||||
container.removeChild(renderer.domElement);
|
||||
};
|
||||
}, [src, fileName]);
|
||||
|
||||
return <Box ref={containerRef} sx={{ width: "100%", height: "100%", minHeight: "calc(100vh - 200px)" }} />;
|
||||
};
|
||||
|
||||
export default ModelViewerCanvas;
|
||||
Loading…
Reference in new issue