noEvents, cleanup

.size-snapshot.json

@@ -19,41 +19,41 @@
     "gzipped": 5244
   },
   "dist/web.js": {
-    "bundled": 34279,
-    "minified": 16312,
-    "gzipped": 5950,
+    "bundled": 34344,
+    "minified": 16342,
+    "gzipped": 5951,
     "treeshaked": {
       "rollup": {
-        "code": 12257,
+        "code": 12287,
         "import_statements": 800
       },
       "webpack": {
-        "code": 14205
+        "code": 14235
       }
     }
   },
   "dist/web.cjs.js": {
-    "bundled": 41542,
-    "minified": 19159,
-    "gzipped": 6387
+    "bundled": 41607,
+    "minified": 19189,
+    "gzipped": 6389
   },
   "dist/native.js": {
-    "bundled": 35780,
-    "minified": 17035,
+    "bundled": 35845,
+    "minified": 17065,
     "gzipped": 6147,
     "treeshaked": {
       "rollup": {
-        "code": 13023,
+        "code": 13053,
         "import_statements": 898
       },
       "webpack": {
-        "code": 14901
+        "code": 14931
       }
     }
   },
   "dist/native.cjs.js": {
-    "bundled": 44342,
-    "minified": 20303,
-    "gzipped": 6694
+    "bundled": 44407,
+    "minified": 20333,
+    "gzipped": 6696
   }
 }

examples/components/Hud.js

@@ -93,7 +93,7 @@ function Content() {
 
 export default function App() {
   return (
-    <Canvas style={{ background: '#272727' }}>
+    <Canvas>
       <Content />
     </Canvas>
   )

examples/components/Stars.js

@@ -67,7 +67,7 @@ function Stars() {
 export default function App() {
   return (
     <>
-      <Canvas style={{ background: '#272727' }}>
+      <Canvas>
         <ambientLight color="lightblue" />
         <pointLight color="white" intensity={1} position={[10, 10, 10]} />
         <Stars />

examples/index.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import App from './components/Hud'
+import App from './components/Stars'
 import './styles.css'
 
 //ReactDOM.unstable_createRoot(document.getElementById('root')).render(<App />)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-three-fiber",
-  "version": "3.0.0-beta.15",
+  "version": "3.0.0-beta.16",
   "description": "React-fiber renderer for THREE.js",
   "main": "./dist/web.cjs.js",
   "module": "./dist/web.js",

readme.md

@@ -58,6 +58,7 @@ The `Canvas` object is your portal into Threejs. It renders Threejs elements, _n
   shadowMap                     // Props that go into gl.shadowMap, can also be set true for PCFsoft
   vr = false                    // Switches renderer to VR mode, then uses gl.setAnimationLoop
   orthographic = false          // Creates an orthographic camera if true
+  noEvents = false              // Switch off raytracing and event support
   pixelRation = undefined        // You could provide window.devicePixelRatio if you like
   invalidateFrameloop = false   // When true it only renders on changes, when false it's a game loop
   updateDefaultCamera = true    // Adjusts default camera on size changes

src/canvas.tsx

@@ -63,6 +63,7 @@ export type Subscription = {
 
 export type CanvasContext = SharedCanvasContext & {
   captured: Intersection[] | undefined
+  noEvents: boolean
   ready: boolean
   active: boolean
   manual: number
@@ -84,6 +85,7 @@ export type CanvasProps = {
   orthographic?: boolean
   invalidateFrameloop?: boolean
   updateDefaultCamera?: boolean
+  noEvents?: boolean
   gl?: Partial<THREE.WebGLRenderer>
   camera?: Partial<THREE.OrthographicCamera & THREE.PerspectiveCamera>
   raycaster?: Partial<THREE.Raycaster> & { filter?: FilterFunction }
@@ -115,7 +117,7 @@ function makeId(event: THREE.Intersection) {
 
 export const stateContext = createContext<SharedCanvasContext>({} as SharedCanvasContext)
 
-export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents } => {
+export const useCanvas = (props: UseCanvasProps): PointerEvents => {
   const {
     children,
     gl,
@@ -128,6 +130,7 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
     shadowMap = false,
     invalidateFrameloop = false,
     updateDefaultCamera = true,
+    noEvents = false,
     onCreated,
     onPointerMissed,
   } = props
@@ -169,6 +172,7 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
     active: true,
     manual: 0,
     vr,
+    noEvents,
     invalidateFrameloop: false,
     frames: 0,
     aspect: 0,
@@ -215,37 +219,17 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
     state.current.invalidateFrameloop = invalidateFrameloop
     state.current.vr = vr
     state.current.gl = gl
-  }, [invalidateFrameloop, vr, ready, size, defaultCam, gl])
-
-  // Dispose renderer on unmount
-  useEffect(
-    () => () => {
-      if (state.current.gl) {
-        state.current.gl.forceContextLoss!()
-        state.current.gl.dispose!()
-        ;(state.current as any).gl = undefined
-        unmountComponentAtNode(state.current.scene)
-        state.current.active = false
-      }
-    },
-    []
-  )
+    state.current.noEvents = noEvents
+  }, [invalidateFrameloop, vr, noEvents, ready, size, defaultCam, gl])
 
   // Update pixel ratio
-  useLayoutEffect(() => {
-    if (pixelRatio) gl.setPixelRatio(pixelRatio)
-  }, [pixelRatio])
-
+  useLayoutEffect(() => void (pixelRatio && gl.setPixelRatio(pixelRatio)), [pixelRatio])
   // Update shadowmap
   useLayoutEffect(() => {
     if (shadowMap) {
-      if (typeof shadowMap === 'object') {
-        gl.shadowMap.enabled = true
-        Object.assign(gl, shadowMap)
-      } else {
-        gl.shadowMap.enabled = true
-        gl.shadowMap.type = THREE.PCFSoftShadowMap
-      }
+      gl.shadowMap.enabled = true
+      if (typeof shadowMap === 'object') Object.assign(gl, shadowMap)
+      else gl.shadowMap.type = THREE.PCFSoftShadowMap
     }
   }, [shadowMap])
 
@@ -289,16 +273,12 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
 
   // This component is a bridge into the three render context, when it gets rendererd
   // we know we are ready to compile shaders, call subscribers, etc
-  const IsReady = useCallback(({ children }) => {
-    const activate = useCallback(() => setReady(true), [])
+  const IsReady = useCallback(() => {
+    const activate = () => setReady(true)
     useEffect(() => {
-      if (onCreated) {
-        const result = onCreated(state.current)
-        if (result && result.then) return void result.then(activate)
-      }
-      activate()
+      const result = onCreated && onCreated(state.current)
+      return void (result && result.then ? result.then(activate) : activate())
     }, [])
-
     return null
   }, [])
 
@@ -309,6 +289,7 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
       ready,
       manual,
       vr,
+      noEvents,
       invalidateFrameloop,
       frames,
       subscribers,
@@ -340,12 +321,24 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
       } else if (gl.vr && gl.setAnimationLoop) {
         gl.vr.enabled = true
         gl.setAnimationLoop((t: number) => renderGl(state, t, 0, true))
-      } else {
-        console.warn('react-three-fiber: the gl instance does not support VR!')
-      }
+      } else console.warn('the gl instance does not support VR!')
     }
   }, [ready])
 
+  // Dispose renderer on unmount
+  useEffect(
+    () => () => {
+      if (state.current.gl) {
+        state.current.gl.forceContextLoss!()
+        state.current.gl.dispose!()
+        ;(state.current as any).gl = undefined
+        unmountComponentAtNode(state.current.scene)
+        state.current.active = false
+      }
+    },
+    []
+  )
+
   /** Sets up defaultRaycaster */
   const prepareRay = useCallback(event => {
     if (event.clientX !== void 0) {
@@ -359,15 +352,16 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
       // }
 
       const { left, right, top, bottom } = state.current.size
-      const mouseX = ((event.clientX - left) / (right - left)) * 2 - 1
-      const mouseY = -((event.clientY - top) / (bottom - top)) * 2 + 1
-      mouse.set(mouseX, mouseY)
+      mouse.set(((event.clientX - left) / (right - left)) * 2 - 1, -((event.clientY - top) / (bottom - top)) * 2 + 1)
       defaultRaycaster.setFromCamera(mouse, state.current.camera)
     }
   }, [])
 
   /** Intersects interaction objects using the event input */
   const intersect = useCallback((event: DomEvent, prepare = true): Intersection[] => {
+    // Skip event handling when noEvents is set
+    if (state.current.noEvents) return []
+
     if (prepare) prepareRay(event)
 
     const seen = new Set<string>()
@@ -449,9 +443,7 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
         if (handlers && handlers[name]) {
           // Forward all events back to their respective handlers with the exception of click,
           // which must must the initial target
-          if (name !== 'click' || state.current.initialHits.includes(eventObject)) {
-            handlers[name](data)
-          }
+          if (name !== 'click' || state.current.initialHits.includes(eventObject)) handlers[name](data)
         }
       })
       // If a click yields no results, pass it back to the user as a miss
@@ -512,16 +504,13 @@ export const useCanvas = (props: UseCanvasProps): { pointerEvents: PointerEvents
   }, [])
 
   return {
-    pointerEvents: {
-      onClick: handlePointer('click'),
-      onWheel: handlePointer('wheel'),
-      onPointerDown: handlePointer('pointerDown'),
-      onPointerUp: handlePointer('pointerUp'),
-      onPointerLeave: (e: any) => handlePointerCancel(e, []),
-      onPointerMove: handlePointerMove,
-      onGotPointerCapture: (e: any) => (state.current.captured = intersect(e, false)),
-      onLostPointerCapture: (e: any) => ((state.current.captured = undefined), handlePointerCancel(e)),
-    },
-    // anything else we might want to return?
+    onClick: handlePointer('click'),
+    onWheel: handlePointer('wheel'),
+    onPointerDown: handlePointer('pointerDown'),
+    onPointerUp: handlePointer('pointerUp'),
+    onPointerLeave: (e: any) => handlePointerCancel(e, []),
+    onPointerMove: handlePointerMove,
+    onGotPointerCapture: (e: any) => (state.current.captured = intersect(e, false)),
+    onLostPointerCapture: (e: any) => ((state.current.captured = undefined), handlePointerCancel(e)),
   }
 }

src/hooks.ts

@@ -19,15 +19,8 @@ export function useFrame(callback: RenderCallback, renderPriority: number = 0):
   }, [renderPriority])
 }
 
-export function useRender(callback: RenderCallback, takeOverRenderloop: boolean = false, deps: any[] = []): void {
-  useEffect(
-    () =>
-      void console.warn(
-        'react-three-fiber: Please use useFrame(fn, [priority=0]) ✅ instead of useRender ❌, the former will be made obsolete soon!'
-      ),
-    []
-  )
-  useFrame(callback, takeOverRenderloop ? 1 : 0)
+export function useRender(callback: RenderCallback, takeOver: boolean) {
+  return useFrame(callback, takeOver ? 1 : 0)
 }
 
 export function useThree(): SharedCanvasContext {
@@ -49,7 +42,6 @@ export function useUpdate<T>(
       invalidate()
     }
   }, dependents)
-
   return ref
 }
 

src/reconciler.tsx

@@ -287,7 +287,6 @@ function switchInstance(instance: any, type: string, newProps: any, fiber: Recon
   const newInstance = createInstance(type, newProps, instance.__container)
   removeChild(parent, instance)
   appendChild(parent, newInstance)
-
   // This evil hack switches the react-internal fiber node
   // https://github.com/facebook/react/issues/14983
   // https://github.com/facebook/react/pull/15021

src/targets/native/canvas.tsx

@@ -30,15 +30,15 @@ type NativeCanvasProps = Omit<CanvasProps, 'style'> & {
 const styles: ViewStyle = { flex: 1 }
 
 const IsReady = React.memo(({ gl, ...props }: NativeCanvasProps & { gl: any; size: any }) => {
-  const { pointerEvents } = useCanvas({ ...props, gl } as UseCanvasProps)
+  const events = useCanvas({ ...props, gl } as UseCanvasProps)
 
   let pointerDownCoords: null | [number, number] = null
 
   const panResponder = React.useMemo(
     () =>
       PanResponder.create({
         onStartShouldSetPanResponderCapture(e) {
-          pointerEvents.onGotPointerCapture(clientXY(e))
+          events.onGotPointerCapture(clientXY(e))
           return true
         },
         onStartShouldSetPanResponder: () => true,
@@ -47,23 +47,23 @@ const IsReady = React.memo(({ gl, ...props }: NativeCanvasProps & { gl: any; siz
         onPanResponderTerminationRequest: () => true,
         onPanResponderStart: e => {
           pointerDownCoords = [e.nativeEvent.locationX, e.nativeEvent.locationY]
-          pointerEvents.onPointerDown(clientXY(e))
+          events.onPointerDown(clientXY(e))
         },
-        onPanResponderMove: e => pointerEvents.onPointerMove(clientXY(e)),
+        onPanResponderMove: e => events.onPointerMove(clientXY(e)),
         onPanResponderEnd: e => {
-          pointerEvents.onPointerUp(clientXY(e))
+          events.onPointerUp(clientXY(e))
           if (pointerDownCoords) {
             const xDelta = pointerDownCoords[0] - e.nativeEvent.locationX
             const yDelta = pointerDownCoords[1] - e.nativeEvent.locationY
             if (Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2)) < CLICK_DELTA) {
-              pointerEvents.onClick(clientXY(e))
+              events.onClick(clientXY(e))
             }
           }
           pointerDownCoords = null
         },
-        onPanResponderRelease: e => pointerEvents.onPointerLeave(clientXY(e)),
-        onPanResponderTerminate: e => pointerEvents.onLostPointerCapture(clientXY(e)),
-        onPanResponderReject: e => pointerEvents.onLostPointerCapture(clientXY(e)),
+        onPanResponderRelease: e => events.onPointerLeave(clientXY(e)),
+        onPanResponderTerminate: e => events.onLostPointerCapture(clientXY(e)),
+        onPanResponderReject: e => events.onLostPointerCapture(clientXY(e)),
       }),
     []
   )