added mesh selection and highlighting

99-Knots · Jun 3, 2024 · adba986 · adba986
1 parent 06eb58f
commit adba986
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 5 deletions.
diff --git a/public/index.html b/public/index.html
@@ -6,6 +6,7 @@
     <title>Editor Demo</title>
   </head>
   <body>
+    <div>Editor Demo</div>
     <div id="react-root"></div>
   </body>
 </html>
diff --git a/src/components/GizmoManager.tsx b/src/components/GizmoManager.tsx
diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx
@@ -9,6 +9,10 @@ import { SkyMaterial } from '@babylonjs/materials/sky';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
 import { Texture } from '@babylonjs/core/Materials/Textures/texture';
 import { Tools } from '@babylonjs/core/Misc/tools'
+import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents";
+import { Ray } from "@babylonjs/core/Culling/ray";
+import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
+import { Mesh } from "@babylonjs/core/Meshes/mesh";
 
 import floor_tex from '../../assets/floortiles.png';
 import floor_norm from '../../assets/floortiles_normal.png';
@@ -92,6 +96,7 @@ const CanvasRenderer: React.ForwardRefRenderFunction<CanvasHandle, CanvasProps>
     const addTestObject = async () => {
         const cube = MeshBuilder.CreateBox('box', {size: 1}, scene.current);
         cube.translate(new Vector3(0, 1, 0), 0.5001);   // avoid clipping with ground
+        cube.metadata = {selectable: true}
     }
 
     const setupEngine = async () => {
@@ -106,6 +111,30 @@ const CanvasRenderer: React.ForwardRefRenderFunction<CanvasHandle, CanvasProps>
         await addTestObject();
     }
 
+    const setupGizmo = async () => {
+        let pressedTimestamp = 0;
+        const ray = new Ray(Vector3.Zero(), Vector3.Zero())
+        const hlLayer = new HighlightLayer('hlLayer', scene.current);
+        scene.current.onPointerObservable.add((pointerinfo) => {
+            if (pointerinfo.type == PointerEventTypes.POINTERDOWN && pointerinfo.event.button == 0) {
+                pressedTimestamp = Date.now();
+            }
+
+            if (pointerinfo.type == PointerEventTypes.POINTERUP && pointerinfo.event.button == 0) {
+
+                let elapsedSincePressed = Date.now() - pressedTimestamp;
+                if (elapsedSincePressed < 200) {
+                    let node = pointerinfo.pickInfo.pickedMesh;
+                    hlLayer.removeAllMeshes();
+                    if (node.metadata?.selectable) {
+                        let n = node as Mesh;
+                        hlLayer.addMesh(n, new Color3(255, 255, 255));
+                    }
+                };
+            }
+        });
+    }
+
     const runLoop = async () => {
         engine.current.runRenderLoop(() => {
             scene.current.render();
@@ -123,15 +152,14 @@ const CanvasRenderer: React.ForwardRefRenderFunction<CanvasHandle, CanvasProps>
         async loadScene() {
             await setupEngine();
             await setupScene();
+            await setupGizmo();
             await runLoop();
         }
     }
     React.useImperativeHandle(env, () => handle);
 
     return (
-        <div>
-            <canvas className='babylon-canvas' ref={canvas} ></canvas>
-        </div>
+        <canvas className='babylon-canvas' ref={canvas} ></canvas>
     )
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -4,7 +4,7 @@ import { Canvas, CanvasHandle } from './components/canvas';
 import './style.css'
 
 
-function Test() {
+function App() {
     const canvasHandle = React.useRef<CanvasHandle>();
     React.useEffect(() => {
         canvasHandle.current.loadScene();
@@ -17,5 +17,5 @@ function Test() {
 const rootElement = document.getElementById('react-root');
 if (!!rootElement) {
     const root = createRoot(rootElement);
-    root.render(<Test />);
+    root.render(<App />);
 }
diff --git a/src/style.css b/src/style.css
@@ -1,4 +1,5 @@
 .babylon-canvas {
     width: 100%;
     height: 100%;
+    outline: none;
 }