fixes review drcmda

pmndrs · May 2, 2023 · ee87945 · ee87945
1 parent d2b6a5b
commit ee87945
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 114 deletions.
diff --git a/README.md b/README.md
@@ -75,93 +75,5 @@ function App() {
 
 ## Documentation
 
-#### EffectComposer
-
-The EffectComposer must wrap all your effects. It will manage them for you.
-
-```jsx
-<EffectComposer
-  enabled?: boolean
-  children: JSX.Element | JSX.Element[]
-  depthBuffer?: boolean
-  disableNormalPass?: boolean
-  stencilBuffer?: boolean
-  autoClear?: boolean
-  multisampling?: number
-  frameBufferType?: TextureDataType
-  /** For effects that support DepthDownsamplingPass */
-  resolutionScale?: number
-  renderPriority?: number
-  camera?: THREE.Camera
-  scene?: THREE.Scene
->
-```
-
-#### Selection/Select
-
-Some effects, like Outline or SelectiveBloom can select specific objects. To manage this in a declarative scene with just references can be messy, especially when things have to be grouped. These two components take care of it:
-
-```jsx
-<Selection
-  children: JSX.Element | JSX.Element[]
-  enabled?: boolean
->
-
-<Select
-  children: JSX.Element | JSX.Element[]
-  enabled?: boolean
->
-```
-
-You wrap everything into a selection, this one holds all the selections. Now you can individually select objects or groups. Effects that support selections (for instance `Outline`) will acknowledge it.
-
-```jsx
-<Selection>
-  <EffectComposer autoclear={false}>
-    <Outline blur edgeStrength={100} />
-  </EffectComposer>
-  <Select enabled>
-    <mesh />
-  </Select>
-</Selection>
-```
-
-Selection can be nested and group multiple object, higher up selection take precence over lower ones. The following for instance will select everything. Remove the outmost `enabled` and only the two mesh group is selected. You can flip the selections or bind them to interactions and state.
-
-```jsx
-<Select enabled>
-  <Select enabled>
-    <mesh />
-    <mesh />
-  </Select>
-  <Select>
-    <mesh />
-  </Select>
-</Select>
-```
-
-#### Selective bloom
-
-Bloom is selective by default, you control it not on the effect pass but on the materials by lifting their colors out of 0-1 range. a `luminanceThreshold` of 1 ensures that ootb nothing will glow, only the materials you pick. For this to work `toneMapped` has to be false on the materials, because it would otherwise clamp colors between 0 and 1 again.
-
-```jsx
-<Bloom mipmapBlur luminanceThreshold={1} />
-
-// ❌ will not glow, same as RGB [1,0,0]
-<meshStandardMaterial color="red"/>
-
-// ✅ will glow, same as RGB [2,0,0]
-<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />
-
-// ❌ will not glow, same as RGB [1,0,0]
-<meshBasicMaterial color="red" />
-
-// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
-<meshBasicMaterial color={[2,0,0]} />
-
-// ✅ will glow, same as RGB [2,0,0]
-<meshBasicMaterial color={[2,0,0]} toneMapped={false} />
-```
-
-- [react-postprocessing exports](https://github.com/pmndrs/react-postprocessing/blob/master/api.md)
+- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
 - [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)
diff --git a/src/Autofocus.tsx b/src/Autofocus.tsx
@@ -37,7 +37,8 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
     const hitpointRef = useRef<THREE.Mesh>(null)
     const targetRef = useRef<THREE.Mesh>(null)
 
-    const { size, gl, scene } = useThree()
+    const scene = useThree(({ scene }) => scene)
+    const pointer = useThree(({ pointer }) => pointer)
     const { composer, camera } = useContext(EffectComposerContext)
 
     // see: https://codesandbox.io/s/depthpickingpass-x130hg
@@ -67,25 +68,6 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
       [ndc, depthPickingPass, camera]
     )
 
-    const [pointer] = useState(new THREE.Vector2())
-    useEffect(() => {
-      if (!followMouse) return
-
-      async function onPointermove(e: PointerEvent) {
-        const clientX = e.clientX - size.left
-        const clientY = e.clientY - size.top
-        const x = (clientX / size.width) * 2.0 - 1.0
-        const y = -(clientY / size.height) * 2.0 + 1.0
-
-        pointer.set(x, y)
-      }
-      gl.domElement.addEventListener('pointermove', onPointermove, {
-        passive: true,
-      })
-
-      return () => void gl.domElement.removeEventListener('pointermove', onPointermove)
-    }, [gl.domElement, hitpoint, size, followMouse, getHit, pointer])
-
     const update = useCallback(
       async (delta: number, updateTarget = true) => {
         // Update hitpoint
@@ -110,11 +92,9 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
     )
 
     useFrame(async (_, delta) => {
-      if (manual) return
-      update(delta)
-    })
-
-    useFrame(() => {
+      if (!manual) {
+        update(delta)
+      }
       if (hitpointRef.current) {
         hitpointRef.current.position.copy(hitpoint)
       }