From 44c398ec36671d30ac5fd54d6b12206b1f99028f Mon Sep 17 00:00:00 2001 From: hrntsm Date: Mon, 23 Oct 2023 18:21:48 +0900 Subject: [PATCH 1/3] Add 3jsArtifactViewer to OBJLoader --- .../ts/components/ThreejsArtifactViewer.tsx | 67 ++++++++++++++----- 1 file changed, 50 insertions(+), 17 deletions(-) diff --git a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx index f04a269e..8b970702 100644 --- a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx +++ b/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx @@ -4,6 +4,7 @@ import { Canvas } from "@react-three/fiber" import { GizmoHelper, GizmoViewport, OrbitControls } from "@react-three/drei" import { STLLoader } from "three/examples/jsm/loaders/STLLoader" import { Rhino3dmLoader } from "three/examples/jsm/loaders/3DMLoader" +import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader" import { PerspectiveCamera } from "three" import { Modal, Box, useTheme } from "@mui/material" import ClearIcon from "@mui/icons-material/Clear" @@ -11,7 +12,9 @@ import IconButton from "@mui/material/IconButton" export const isThreejsArtifact = (artifact: Artifact): boolean => { return ( - artifact.filename.endsWith(".stl") || artifact.filename.endsWith(".3dm") + artifact.filename.endsWith(".stl") || + artifact.filename.endsWith(".3dm") || + artifact.filename.endsWith(".obj") ) } @@ -68,23 +71,11 @@ export const ThreejsArtifactViewer: React.FC = ( useEffect(() => { if ("stl" === props.filetype) { - const stlLoader = new STLLoader() - stlLoader.load(props.src, (stlGeometries: THREE.BufferGeometry) => { - if (stlGeometries) { - handleLoadedGeometries([stlGeometries]) - } - }) + loadSTL(props, handleLoadedGeometries) } else if ("3dm" === props.filetype) { - const loader = new Rhino3dmLoader() - loader.setLibraryPath("https://cdn.jsdelivr.net/npm/rhino3dm@7.15.0/") - loader.load(props.src, (object: THREE.Object3D) => { - const meshes = object.children as THREE.Mesh[] - const rhinoGeometries = meshes.map((mesh) => mesh.geometry) - THREE.Object3D.DEFAULT_UP.set(0, 0, 1) - if (rhinoGeometries.length > 0) { - handleLoadedGeometries(rhinoGeometries) - } - }) + loadRhino3dm(props, handleLoadedGeometries) + } else if ("obj" === props.filetype) { + loadOBJ(props, handleLoadedGeometries) } }, []) @@ -188,3 +179,45 @@ export const useThreejsArtifactModal = (): [ } return [openModal, renderDeleteStudyDialog] } + +function loadSTL( + props: ThreejsArtifactViewerProps, + handleLoadedGeometries: (geometries: THREE.BufferGeometry[]) => THREE.Box3 +) { + const stlLoader = new STLLoader() + stlLoader.load(props.src, (stlGeometries: THREE.BufferGeometry) => { + if (stlGeometries) { + handleLoadedGeometries([stlGeometries]) + } + }) +} + +function loadRhino3dm( + props: ThreejsArtifactViewerProps, + handleLoadedGeometries: (geometries: THREE.BufferGeometry[]) => THREE.Box3 +) { + const loader = new Rhino3dmLoader() + loader.setLibraryPath("https://cdn.jsdelivr.net/npm/rhino3dm@7.15.0/") + loader.load(props.src, (object: THREE.Object3D) => { + const meshes = object.children as THREE.Mesh[] + const rhinoGeometries = meshes.map((mesh) => mesh.geometry) + THREE.Object3D.DEFAULT_UP.set(0, 0, 1) + if (rhinoGeometries.length > 0) { + handleLoadedGeometries(rhinoGeometries) + } + }) +} + +function loadOBJ( + props: ThreejsArtifactViewerProps, + handleLoadedGeometries: (geometries: THREE.BufferGeometry[]) => THREE.Box3 +) { + const objLoader = new OBJLoader() + objLoader.load(props.src, (object: THREE.Object3D) => { + const meshes = object.children as THREE.Mesh[] + const objGeometries = meshes.map((mesh) => mesh.geometry) + if (objGeometries.length > 0) { + handleLoadedGeometries(objGeometries) + } + }) +} From 9ba21c20ba16cbefefb19304397bed7f83954d8d Mon Sep 17 00:00:00 2001 From: hrntsm Date: Mon, 23 Oct 2023 18:38:23 +0900 Subject: [PATCH 2/3] Add Canvas to frameloop to improve performance --- optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx index 8b970702..7baf983f 100644 --- a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx +++ b/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx @@ -103,6 +103,7 @@ export const ThreejsArtifactViewer: React.FC = ( return ( From 67d08cfbc0d48c9e71b3052553e5911b592c5948 Mon Sep 17 00:00:00 2001 From: hrntsm Date: Mon, 23 Oct 2023 18:41:53 +0900 Subject: [PATCH 3/3] Update 3dm loader name --- optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx b/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx index 7baf983f..8d8c045d 100644 --- a/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx +++ b/optuna_dashboard/ts/components/ThreejsArtifactViewer.tsx @@ -197,9 +197,9 @@ function loadRhino3dm( props: ThreejsArtifactViewerProps, handleLoadedGeometries: (geometries: THREE.BufferGeometry[]) => THREE.Box3 ) { - const loader = new Rhino3dmLoader() - loader.setLibraryPath("https://cdn.jsdelivr.net/npm/rhino3dm@7.15.0/") - loader.load(props.src, (object: THREE.Object3D) => { + const rhino3dmLoader = new Rhino3dmLoader() + rhino3dmLoader.setLibraryPath("https://cdn.jsdelivr.net/npm/rhino3dm@7.15.0/") + rhino3dmLoader.load(props.src, (object: THREE.Object3D) => { const meshes = object.children as THREE.Mesh[] const rhinoGeometries = meshes.map((mesh) => mesh.geometry) THREE.Object3D.DEFAULT_UP.set(0, 0, 1)