diff --git a/public/index.html b/public/index.html index c5b23be..fc7ff5c 100644 --- a/public/index.html +++ b/public/index.html @@ -6,6 +6,7 @@ Editor Demo +
Editor Demo
diff --git a/src/components/GizmoManager.tsx b/src/components/GizmoManager.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/canvas.tsx b/src/components/canvas.tsx index 6a75af2..d8cf7e0 100644 --- 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 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 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 async loadScene() { await setupEngine(); await setupScene(); + await setupGizmo(); await runLoop(); } } React.useImperativeHandle(env, () => handle); return ( -
- -
+ ) } diff --git a/src/index.tsx b/src/index.tsx index 40c01a4..298d4af 100644 --- 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(); 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(); + root.render(); } \ No newline at end of file diff --git a/src/style.css b/src/style.css index edcb704..c681b1b 100644 --- a/src/style.css +++ b/src/style.css @@ -1,4 +1,5 @@ .babylon-canvas { width: 100%; height: 100%; + outline: none; } \ No newline at end of file