wip

.storybook/stories/Raycaster.stories.tsx

@@ -0,0 +1,67 @@
+import * as THREE from 'three'
+import * as React from 'react'
+
+import { Vector3 } from 'three'
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Setup } from '../Setup'
+
+import { Raycaster } from '../../src'
+import { ComponentProps, useRef } from 'react'
+import { useFrame } from '@react-three/fiber'
+
+export default {
+  title: 'Abstractions/Raycaster',
+  component: Raycaster,
+  decorators: [
+    (Story) => (
+      <Setup cameraPosition={new Vector3(1, 2, 4)} cameraFov={60}>
+        <Story />
+      </Setup>
+    ),
+  ],
+} satisfies Meta<typeof Raycaster>
+
+type Story = StoryObj<typeof Raycaster>
+
+function RaycasterScene({ origin, direction, ...props }: React.ComponentProps<typeof Raycaster>) {
+  return (
+    <>
+      <color attach="background" args={['#303030']} />
+
+      <Raycaster origin={new Vector3(-4, 0, 0)} direction={new Vector3(1, 0, 0)} {...props} helper />
+
+      <El position-x={-2} />
+      <El />
+      <El position-x={2} />
+    </>
+  )
+}
+
+export const RaycasterSt = {
+  render: (args) => <RaycasterScene {...args} />,
+
+  name: 'Default',
+} satisfies Story
+
+const El = ({
+  // layers,
+  ...props
+}: ComponentProps<'mesh'>) => {
+  const $mesh = useRef<THREE.Mesh>(null)
+
+  useFrame(({ clock }) => {
+    if (!$mesh.current) return
+    $mesh.current.position.y = Math.sin(clock.getElapsedTime() * 0.5 + $mesh.current.position.x)
+    $mesh.current.rotation.z = Math.sin(clock.getElapsedTime() * 0.5) * Math.PI * 1
+  })
+
+  return (
+    <mesh ref={$mesh} {...props}>
+      {/* <Layers layers={layers} /> */}
+
+      <capsuleGeometry args={[0.5, 0.5, 4, 32]} />
+      <meshNormalMaterial side={THREE.DoubleSide} />
+    </mesh>
+  )
+}

package.json

@@ -46,6 +46,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
+    "@gsimone/three-raycaster-helper": "^0.1.0",
     "@mediapipe/tasks-vision": "0.10.17",
     "@monogrid/gainmap-js": "^3.0.6",
     "@react-spring/three": "~9.7.5",

src/core/Helper.tsx

@@ -3,19 +3,19 @@ import { Object3D } from 'three'
 import { useThree, useFrame } from '@react-three/fiber'
 import { Falsey } from 'utility-types'
 
-type HelperType = Object3D & { update: () => void; dispose: () => void }
-type HelperConstructor = new (...args: any[]) => any
-type HelperArgs<T> = T extends [infer _, ...infer R] ? R : never
-
-export function useHelper<T extends HelperConstructor>(
-  object3D: React.MutableRefObject<Object3D> | Falsey,
-  helperConstructor: T,
-  ...args: HelperArgs<ConstructorParameters<T>>
+type HelperType = Object3D & { update: () => void; dispose?: () => void }
+type HelperConstructor<T = HelperType> = new (...args: any[]) => T
+type HelperArgs<T> = T extends [any, ...infer R] ? R : never
+
+export function useHelper<T extends HelperType, H extends HelperConstructor<T>>(
+  object3D: React.RefObject<ConstructorParameters<H>[0]> | Falsey,
+  helperConstructor: H,
+  ...args: HelperArgs<ConstructorParameters<H>>
 ) {
-  const helper = React.useRef<HelperType>()
+  const helper = React.useRef<T>()
   const scene = useThree((state) => state.scene)
   React.useLayoutEffect(() => {
-    let currentHelper: HelperType = undefined!
+    let currentHelper: T = undefined!
 
     if (object3D && object3D?.current && helperConstructor) {
       helper.current = currentHelper = new (helperConstructor as any)(object3D.current, ...args)
@@ -39,15 +39,15 @@ export function useHelper<T extends HelperConstructor>(
 
 //
 
-export type HelperProps<T extends HelperConstructor> = {
-  type: T
-  args?: HelperArgs<ConstructorParameters<T>>
+export type HelperProps<H extends HelperConstructor> = {
+  type: H
+  args?: HelperArgs<ConstructorParameters<H>>
 }
 
-export const Helper = <T extends HelperConstructor>({
+export const Helper = <H extends HelperConstructor>({
   type: helperConstructor,
   args = [] as never,
-}: HelperProps<T>) => {
+}: HelperProps<H>) => {
   const thisRef = React.useRef<Object3D>(null!)
   const parentRef = React.useRef<Object3D>(null!)
 

src/core/Raycaster.tsx

@@ -0,0 +1,32 @@
+import * as THREE from 'three'
+import * as React from 'react'
+import { ComponentProps, forwardRef, useRef, useState } from 'react'
+import { useFrame } from '@react-three/fiber'
+import { RaycasterHelper } from '@gsimone/three-raycaster-helper'
+
+import { useHelper } from '..'
+
+type RaycasterProps = Omit<ComponentProps<'raycaster'>, 'args'> & {
+  origin: NonNullable<ComponentProps<'raycaster'>['args']>[0]
+  direction: NonNullable<ComponentProps<'raycaster'>['args']>[1]
+} & {
+  helper?: boolean
+}
+
+export const Raycaster = forwardRef<THREE.Raycaster, RaycasterProps>(
+  ({ origin, direction, helper, ...props }, fref) => {
+    const [r] = useState(() => new THREE.Raycaster(origin, direction))
+
+    const raycasterRef = useRef<THREE.Raycaster>(null)
+
+    const raycasterHelper = useHelper(!!helper && raycasterRef, RaycasterHelper)
+    useFrame(({ scene }) => {
+      if (!raycasterHelper.current || !raycasterRef.current) return
+      // @ts-ignore
+      raycasterHelper.current.hits = raycasterRef.current.intersectObjects(scene.children)
+    })
+
+    // return <raycaster ref={raycasterRef} args={[origin, direction]} {...props} />
+    return <primitive object={r} near={props.near} far={props.far} ref={raycasterRef}></primitive>
+  }
+)

src/core/index.ts

@@ -24,6 +24,7 @@ export * from './Svg'
 export * from './Gltf'
 export * from './AsciiRenderer'
 export * from './Splat'
+export * from './Raycaster'
 
 // Cameras
 export * from './OrthographicCamera'

yarn.lock

@@ -2133,6 +2133,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@gsimone/three-raycaster-helper@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@gsimone/three-raycaster-helper@npm:0.1.0"
+  peerDependencies:
+    three: ^0.139.2
+  checksum: 10c0/adefc5b44a449d0ef1540e46454b81b6ff6c267dfb1ad187a1f64da723d6dabc77158958cdd1cb0a63295ecfd9c2e5a4d08577b6821653963e334ef8e4d54b90
+  languageName: node
+  linkType: hard
+
 "@humanfs/core@npm:^0.19.1":
   version: 0.19.1
   resolution: "@humanfs/core@npm:0.19.1"
@@ -2837,6 +2846,7 @@ __metadata:
     "@eslint/compat": "npm:^1.2.3"
     "@eslint/eslintrc": "npm:^3.2.0"
     "@eslint/js": "npm:^9.15.0"
+    "@gsimone/three-raycaster-helper": "npm:^0.1.0"
     "@mediapipe/tasks-vision": "npm:0.10.17"
     "@monogrid/gainmap-js": "npm:^3.0.6"
     "@playwright/test": "npm:^1.45.2"