Use out-of-band raycaster for scene selection

adeira-source-id: f14b92b41a6f543e12c0e383b55ef37ba990ce1c

.changeset/fuzzy-ligers-rule.md

@@ -0,0 +1,7 @@
+---
+"@triplex/renderer-r3f": minor
+"@triplex/editor": minor
+---
+
+Scene selection is now powered by an out-of-band raycaster. By default scenes
+no-longer receive events when in edit mode.

examples/test-fixture/src/geometry/box.tsx

@@ -4,6 +4,7 @@
  * This source code is licensed under the GPL-3.0 license found in the LICENSE
  * file in the root directory of this source tree.
  */
+import { useState } from "react";
 import { type Vector3Tuple } from "three";
 
 function Box({
@@ -25,19 +26,22 @@ function Box({
   size?: number;
 }) {
   const ok = {};
+  const [hover, setHover] = useState(false);
   return (
     <group scale={scale} visible={true}>
       <mesh
         {...ok}
         name="hello-world"
         onClick={() => {}}
+        onPointerOut={() => setHover(false)}
+        onPointerOver={() => setHover(true)}
         position={position}
         rotation={rotation}
         userData={{ hello: true }}
         visible={true}
       >
         <boxGeometry args={[size, size, size]} />
-        <meshStandardMaterial color={color} key={color} />
+        <meshStandardMaterial color={hover ? "purple" : color} key={color} />
       </mesh>
     </group>
   );

packages/react-three-test/package.json

@@ -9,7 +9,8 @@
     "typedef": "echo \"not implemented\""
   },
   "dependencies": {
-    "@react-three/test-renderer": "^8.2.0"
+    "@react-three/test-renderer": "^8.2.0",
+    "@testing-library/dom": "^9.3.4"
   },
   "peerDependencies": {
     "@react-three/fiber": "^8.0.0",

packages/react-three-test/src/index.ts

@@ -6,6 +6,7 @@
  */
 import renderer from "@react-three/test-renderer";
 import { type TreeNode } from "@react-three/test-renderer/dist/declarations/src/types";
+import { fireEvent as fireDOMEvent } from "@testing-library/dom";
 
 // @ts-expect-error - Ignore global variable in test.
 global.IS_REACT_ACT_ENVIRONMENT = true;
@@ -31,11 +32,21 @@ function find(
 }
 
 export async function render(jsx: JSX.Element) {
-  const controls = await renderer.create(jsx);
+  let canvas: HTMLCanvasElement;
+
+  const controls = await renderer.create(jsx, {
+    onCreated(state) {
+      canvas = state.gl.domElement;
+    },
+  });
 
   return {
     ...controls,
     act: renderer.act,
+    get canvas() {
+      return canvas;
+    },
+    fireDOMEvent,
     tree: {
       getByType(type: string) {
         const tree = controls.toTree();