add editor to examples and prepare editor example deployment

.github/workflows/static.yml

@@ -48,6 +48,7 @@ jobs:
           mkdir -p public/examples/room-with-shadows
           mkdir -p public/examples/layers
           mkdir -p public/examples/secondary-input-sources
+          mkdir -p public/examples/editor
           cp -r ./examples/minecraft/dist/* ./public/examples/minecraft
           cp -r ./examples/pingpong/dist/* ./public/examples/pingpong
           cp -r ./examples/rag-doll/dist/* ./public/examples/rag-doll
@@ -56,6 +57,7 @@ jobs:
           cp -r ./examples/room-with-shadows/dist/* ./public/examples/room-with-shadows
           cp -r ./examples/layers/dist/* ./public/examples/layers
           cp -r ./examples/secondary-input-sources/dist/* ./public/examples/secondary-input-sources
+          cp -r ./examples/editor/dist/* ./public/examples/editor
 
       - name: Upload Artifact
         uses: actions/upload-artifact@v4

docs/getting-started/examples.md

@@ -29,4 +29,7 @@ nav: 3
   <li>
     [![Screenshot from Secondary Input Sources demo](./secondary-input-sources.gif)](https://pmndrs.github.io/xr/examples/secondary-input-sources/)
   </li>
+  <li>
+    [![Screenshot from the React-three-handle Editor demo](./editor.gif)](https://pmndrs.github.io/xr/examples/editor/)
+  </li>
 </Grid>

examples/editor/app.tsx

@@ -1,4 +1,4 @@
-import { Canvas, Color, extend, MeshProps, RootState, useFrame, useThree } from '@react-three/fiber'
+import { Canvas, Color, extend, RootState, useFrame, useThree } from '@react-three/fiber'
 import {
   createXRStore,
   isXRInputSourceState,
@@ -37,21 +37,19 @@ import {
   DirectionalLight,
   Euler,
   Group,
-  Matrix4,
   Mesh,
   Object3D,
   Object3DEventMap,
-  OrthographicCamera,
   Quaternion,
   Scene as SceneImpl,
   ShaderMaterial,
   Uniform,
-  Vector2,
   Vector3,
   Vector3Tuple,
   WebGLRenderer,
   WebGLRenderTarget,
   PositionalAudio as PAudio,
+  BackSide,
 } from 'three'
 import { create } from 'zustand'
 import { defaultApply, HandleState, HandleStore } from '@pmndrs/handle'
@@ -122,12 +120,15 @@ export function App() {
         events={noEvents}
         style={{ width: '100%', flexGrow: 1 }}
       >
-        <color args={['black']} attach="background" />
-        <group pointerEventsType={{ deny: 'touch' }}>
-          <AudioEffects />
-          <PointerEvents />
-          <OrbitHandles />
-          <XR store={store}>
+        <XR store={store}>
+          <mesh scale={1000}>
+            <meshBasicMaterial side={BackSide} color="black" />
+            <sphereGeometry />
+          </mesh>
+          <group pointerEventsType={{ deny: 'touch' }}>
+            <AudioEffects />
+            <PointerEvents />
+            <OrbitHandles />
             <XROrigin position={[0, -1, 0.5]} />
             <HandleTarget>
               <Scene addSunHandle />
@@ -177,8 +178,8 @@ export function App() {
               <CameraHelper />
             </HandleTarget>
             <Screen />
-          </XR>
-        </group>
+          </group>
+        </XR>
       </Canvas>
     </>
   )
@@ -291,8 +292,8 @@ function Screen() {
               </mesh>
               <XRLayer
                 pointerEventsType={{ deny: 'grab' }}
-                customRender={isInXR ? renderFunction : undefined}
                 position-y={0.15}
+                customRender={isInXR ? renderFunction : undefined}
                 scale={[(0.3 * 16) / 9, 0.3, 0.3]}
                 pixelWidth={1920 / 2}
                 pixelHeight={1080 / 2}

packages/pointer-events/src/event.ts

@@ -72,7 +72,7 @@ export class PointerEvent<E extends NativeEvent = globalThis.PointerEvent>
   get face(): Face | null | undefined {
     return this.intersection.face
   }
-  get faceIndex(): number | undefined {
+  get faceIndex(): number | null | undefined {
     return this.intersection.faceIndex
   }
   get uv(): Vector2 | undefined {

packages/pointer-events/src/forward.ts

@@ -1,6 +1,6 @@
-import { Object3D, OrthographicCamera, PerspectiveCamera, Scene, Vector2 } from 'three'
+import { Object3D, Object3DEventMap, OrthographicCamera, PerspectiveCamera, Scene, Vector2 } from 'three'
 import { GetCamera, Pointer, PointerOptions } from './pointer.js'
-import { NativeEvent, NativeWheelEvent, PointerEvent } from './event.js'
+import { NativeEvent, NativeWheelEvent, PointerEvent, PointerEventsMap } from './event.js'
 import { ScreenRayIntersector } from './intersections/ray.js'
 import { generateUniquePointerId } from './pointer/index.js'
 import { IntersectionOptions } from './intersections/index.js'
@@ -83,7 +83,7 @@ export function forwardObjectEvents(
   options?: ForwardEventsOptions,
 ) {
   return forwardEvents(
-    fromPortal,
+    fromPortal as any,
     getCamera,
     scene,
     portalEventToCoords,