ThreeFiber prototype

package.json

@@ -38,28 +38,29 @@
         "@babel/runtime-corejs2": "7.16.7",
         "@emotion/react": "^11.10.5",
         "@emotion/styled": "^11.10.5",
-        "@exabyte-io/cove.js": "2023.8.10-0",
+        "@exabyte-io/cove.js": "2023.8.18-0",
         "@exabyte-io/periodic-table.js": "2022.5.5-2",
         "@mui/icons-material": "^5.11.0",
+        "@mui/lab": "^5.0.0-alpha.120",
         "@mui/material": "^5.11.9",
         "@mui/styles": "^5.11.7",
+        "@react-three/fiber": "^7.0.0",
         "classnames": "2.3.1",
         "enzyme-adapter-react-16": "^1.15.6",
         "jquery": "3.6.0",
         "mixwith": "^0.1.1",
+        "moment": "^2.29.4",
         "prop-types": "^15.8.0",
         "react-bootstrap": "0.32.4",
         "react-scripts": "^4.0.3",
-        "typescript": "^4.9.5",
         "sass": "1.45.2",
         "sprintf-js": "^1.1.2",
         "static-kdtree": "^1.0.2",
         "sweetalert": "^2.1.2",
-        "three": "npm:@exabyte-io/[email protected]",
+        "three": "^0.155.0",
+        "typescript": "^4.9.5",
         "underscore": "^1.8.3",
-        "underscore.string": "^3.3.4",
-        "@mui/lab": "^5.0.0-alpha.120",
-        "moment": "^2.29.4"
+        "underscore.string": "^3.3.4"
     },
     "peerDependencies": {
         "@exabyte-io/made.js": "*",
@@ -70,10 +71,11 @@
         "@babel/preset-typescript": "^7.22.5",
         "@exabyte-io/eslint-config": "^2022.11.17-0",
         "@exabyte-io/made.js": "2022.5.5-3",
-        "@typescript-eslint/eslint-plugin": "^5.56.0",
-        "@typescript-eslint/parser": "^5.56.0",
         "@types/react": "^18.2.8",
         "@types/react-dom": "^18.2.4",
+        "@types/three": "^0.155.0",
+        "@typescript-eslint/eslint-plugin": "^5.56.0",
+        "@typescript-eslint/parser": "^5.56.0",
         "@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
         "babel-jest": "^28.1.0",
         "cross-env": "^7.0.3",
@@ -109,8 +111,8 @@
         "node": ">=12.0.0"
     },
     "lint-staged": {
-        "*.{js,jsx}": "eslint --cache --fix",
-        "*.{js,jsx,css}": "prettier --write"
+        "*.{js,jsx,tsx}": "eslint --cache --fix",
+        "*.{js,jsx,tsx,css}": "prettier --write"
     },
     "browserslist": [
         ">0.2%",

src/components/IconsToolbar.tsx

@@ -38,6 +38,7 @@ function IconsToolbar(props: IconToolbarProps) {
         top: "25px",
         left: "25px",
         boxShadow: theme.shadows[4],
+        zIndex: 100,
     };
 
     const paperSx: SxProps = {

src/components/ThreeDEditor.jsx

@@ -35,7 +35,7 @@ import settings from "../settings";
 import { exportToDisk } from "../utils";
 import IconsToolbar from "./IconsToolbar";
 import ParametersMenu from "./ParametersMenu";
-import { ThreejsEditorModal } from "./ThreejsEditorModal";
+import { ThreejsEditor } from "./ThreejsEditor";
 import { WaveComponent } from "./WaveComponent";
 
 /**
@@ -324,20 +324,6 @@ export class ThreeDEditor extends React.Component {
         }
     }
 
-    /**
-     * Returns a cover div to cover the area and prevent user interaction with component
-     */
-    renderCoverDiv() {
-        const style = {
-            position: "absolute",
-            height: "100%",
-            width: "100%",
-        };
-        const { isInteractive } = this.state;
-        if (isInteractive) style.display = "none";
-        return <div className="atom-view-cover" style={style} />;
-    }
-
     renderWaveComponent() {
         const {
             isConventionalCellShown,
@@ -629,26 +615,23 @@ export class ThreeDEditor extends React.Component {
     renderWaveOrThreejsEditorModal() {
         const { originalMaterial, isThreejsEditorModalShown } = this.state;
 
-        if (isThreejsEditorModalShown) {
-            return (
-                <ThreejsEditorModal
-                    show={isThreejsEditorModalShown}
-                    onHide={this.onThreejsEditorModalHide}
-                    materials={[originalMaterial]}
-                    modalId="threejs-editor"
-                />
-            );
-        }
         const { isInteractive } = this.state;
         return (
             <div className={this.getThreeDEditorClassNames()}>
-                {this.renderCoverDiv()}
                 <IconsToolbar
                     toolbarConfig={this.getToolbarConfig()}
                     isInteractive={isInteractive}
                     handleToggleInteractive={this.handleToggleInteractive}
                 />
-                {this.renderWaveComponent()}
+                {!isThreejsEditorModalShown && this.renderWaveComponent()}
+                {isThreejsEditorModalShown && (
+                    <ThreejsEditor
+                        show={isThreejsEditorModalShown}
+                        onHide={this.onThreejsEditorModalHide}
+                        materials={[originalMaterial]}
+                        id="threejs-editor"
+                    />
+                )}
             </div>
         );
     }

src/components/ThreejsEditor.tsx

@@ -0,0 +1,74 @@
+// @ts-ignore
+import { Made } from "@exabyte-io/made.js";
+import { Box } from "@mui/material";
+import { Canvas, useThree } from "@react-three/fiber";
+import React, { useEffect, useRef } from "react";
+import * as THREE from "three";
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
+import { materialsToThreeDSceneData } from "../utils";
+import { WaveComponent } from "./WaveComponent";
+
+interface ThreejsSceneProps {
+    materials: Made.Material[];
+}
+
+function ThreejsScene({ materials }: ThreejsSceneProps): JSX.Element | null {
+    const { scene } = useThree();
+
+    useEffect(() => {
+        const loader = new THREE.ObjectLoader();
+        const loadedScene = loader.parse(materialsToThreeDSceneData(materials));
+        console.log(loadedScene);
+        // Merges the loaded objects into the existing scene.
+        scene.add(...loadedScene.children);
+    }, [materials, scene]);
+
+    return null; // This component doesn't render anything visually itself
+}
+
+function Camera() {
+    const { camera, gl } = useThree();
+    useEffect(() => {
+        camera.position.set(-20, 0, 10);
+        camera.up.set(0, 0, 1);
+        camera.lookAt(new THREE.Vector3(1, 1, 1));
+
+        const controls = new OrbitControls(camera, gl.domElement);
+        return () => controls.dispose();
+    }, [camera, gl]);
+
+    return null;
+}
+
+interface ThreejsEditorProps {
+    materials: Made.Material[];
+}
+
+export class ThreejsEditor extends WaveComponent {
+    // eslint-disable-next-line no-useless-constructor
+    constructor(props: ThreejsEditorProps) {
+        super(props);
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    componentDidMount() {}
+
+    componentWillUnmount() {
+        // Cleanup actions (equivalent to useEffect with return statement)
+        window.localStorage.removeItem("threejs-editor");
+    }
+
+    render() {
+        return (
+            <Box sx={{ width: "100vw", height: "100vh" }}>
+                <Canvas style={{ background: "black" }}>
+                    <ambientLight />
+                    <pointLight position={[10, 10, 10]} />
+                    <Camera />
+                    <ThreejsScene materials={this.props.materials} />
+                </Canvas>
+            </Box>
+        );
+    }
+}