README.md

@@ -2558,7 +2558,7 @@ A small hook that sets the css body cursor according to the hover state of a mes
 
 ```jsx
 const [hovered, set] = useState()
-useCursor(hovered, /*'pointer', 'auto'*/)
+useCursor(hovered, /*'pointer', 'auto', document.body*/)
 return (
   <mesh onPointerOver={() => set(true)} onPointerOut={() => set(false)}>
 ```

src/core/MeshTransmissionMaterial.tsx

@@ -430,14 +430,14 @@ export const MeshTransmissionMaterial = React.forwardRef(
           state.gl.setRenderTarget(fboMain)
           state.gl.render(state.scene, state.camera)
 
+          parent.material = ref.current
           parent.material.thickness = thickness
           parent.material.side = side
           parent.material.buffer = fboMain.texture
 
           // Set old state back
           state.scene.background = oldBg
           state.gl.setRenderTarget(null)
-          parent.material = ref.current
           state.gl.toneMapping = oldTone
         }
       }

src/core/QuadraticBezierLine.tsx

@@ -12,7 +12,7 @@ type Props = Omit<LineProps, 'points' | 'ref'> & {
   segments?: number
 }
 
-type Line2Props = Object3DNode<Line2, typeof Line2> & {
+export type Line2Props = Object3DNode<Line2, typeof Line2> & {
   setPoints: (
     start: Vector3 | [number, number, number],
     end: Vector3 | [number, number, number],

src/core/useEnvironment.tsx

@@ -47,7 +47,7 @@ export function useEnvironment({
     ? 'exr'
     : files.startsWith('data:application/hdr')
     ? 'hdr'
-    : files.split('.').pop()?.toLowerCase()
+    : files.split('.').pop()?.split('?')?.shift()?.toLowerCase()
   loader = isCubeMap ? CubeTextureLoader : extension === 'hdr' ? RGBELoader : extension === 'exr' ? EXRLoader : null
 
   if (!loader) throw new Error('useEnvironment: Unrecognized file extension: ' + files)

src/web/PresentationControls.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react'
 import { MathUtils } from 'three'
 import { useThree } from '@react-three/fiber'
-import { a, useSpring } from '@react-spring/three'
+import { a, SpringConfig, useSpring } from '@react-spring/three'
 import { useGesture } from '@use-gesture/react'
-import { SpringConfig } from '@react-spring/core'
 
 export type PresentationControlProps = {
   snap?: Boolean | SpringConfig

src/web/useCursor.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 
-export function useCursor(hovered: boolean, onPointerOver = 'pointer', onPointerOut = 'auto') {
+export function useCursor(hovered: boolean, onPointerOver = 'pointer', onPointerOut = 'auto', container: HTMLElement = document.body) {
   React.useEffect(() => {
     if (hovered) {
-      document.body.style.cursor = onPointerOver
-      return () => void (document.body.style.cursor = onPointerOut)
+      container.style.cursor = onPointerOver
+      return () => void (container.style.cursor = onPointerOut)
     }
   }, [hovered])
 }