Skip to content

Commit be81fa4

Browse files
committed
wip
1 parent 039798c commit be81fa4

File tree

7 files changed

+365
-26
lines changed

7 files changed

+365
-26
lines changed
+85
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import * as THREE from 'three'
2+
import * as React from 'react'
3+
4+
import { Vector3 } from 'three'
5+
import { Meta, StoryObj } from '@storybook/react'
6+
7+
import { Setup } from '../Setup'
8+
9+
import { Raycaster } from '../../src'
10+
import { ComponentProps, useRef } from 'react'
11+
import { useFrame } from '@react-three/fiber'
12+
13+
export default {
14+
title: 'Abstractions/Raycaster',
15+
component: Raycaster,
16+
decorators: [
17+
(Story) => (
18+
<Setup cameraPosition={new Vector3(0, 0, 10)}>
19+
<Story />
20+
</Setup>
21+
),
22+
],
23+
argTypes: {
24+
near: { control: { type: 'range', min: 0, max: 15 } },
25+
far: { control: { type: 'range', min: 0, max: 15 } },
26+
helper: { control: { type: 'boolean' } },
27+
},
28+
} satisfies Meta<typeof Raycaster>
29+
30+
type Story = StoryObj<typeof Raycaster>
31+
32+
function RaycasterScene(props: React.ComponentProps<typeof Raycaster>) {
33+
const raycasterRef = useRef<THREE.Raycaster>(null)
34+
35+
React.useEffect(() => {
36+
console.log('raycasterRef', raycasterRef)
37+
})
38+
39+
return (
40+
<>
41+
<color attach="background" args={['#303030']} />
42+
43+
<Raycaster ref={raycasterRef} {...props} />
44+
45+
<Capsule position-x={-2} />
46+
<Capsule />
47+
<Capsule position-x={2} />
48+
</>
49+
)
50+
}
51+
52+
export const RaycasterSt = {
53+
render: (args) => <RaycasterScene {...args} />,
54+
args: {
55+
origin: [-4, 0, 0],
56+
direction: [1, 0, 0],
57+
near: 1,
58+
far: 8,
59+
helper: true,
60+
},
61+
62+
name: 'Default',
63+
} satisfies Story
64+
65+
const Capsule = ({
66+
// layers,
67+
...props
68+
}: ComponentProps<'mesh'>) => {
69+
const meshRef = useRef<THREE.Mesh>(null)
70+
71+
useFrame(({ clock }) => {
72+
if (!meshRef.current) return
73+
meshRef.current.position.y = Math.sin(clock.getElapsedTime() * 0.5 + meshRef.current.position.x)
74+
meshRef.current.rotation.z = Math.sin(clock.getElapsedTime() * 0.5) * Math.PI * 1
75+
})
76+
77+
return (
78+
<mesh ref={meshRef} {...props}>
79+
{/* <Layers layers={layers} /> */}
80+
81+
<capsuleGeometry args={[0.5, 0.5, 4, 32]} />
82+
<meshNormalMaterial side={THREE.DoubleSide} />
83+
</mesh>
84+
)
85+
}

package.json

+1
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@
4646
},
4747
"dependencies": {
4848
"@babel/runtime": "^7.26.0",
49+
"@gsimone/three-raycaster-helper": "^0.1.0",
4950
"@mediapipe/tasks-vision": "0.10.17",
5051
"@monogrid/gainmap-js": "^3.0.6",
5152
"@react-spring/three": "~9.7.5",

src/core/Helper.tsx

+49-26
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,84 @@
1+
/* eslint react-hooks/exhaustive-deps: 1 */
12
import * as React from 'react'
23
import { Object3D } from 'three'
34
import { useThree, useFrame } from '@react-three/fiber'
45
import { Falsey } from 'utility-types'
56

6-
type HelperType = Object3D & { update: () => void; dispose: () => void }
7-
type HelperConstructor = new (...args: any[]) => any
8-
type HelperArgs<T> = T extends [infer _, ...infer R] ? R : never
7+
type HelperConstructor = new (...args: any[]) => Object3D & { update: () => void; dispose?: () => void }
8+
type HelperArgs<T> = T extends [any, ...infer R] ? R : never
99

10-
export function useHelper<T extends HelperConstructor>(
11-
object3D: React.MutableRefObject<Object3D> | Falsey,
12-
helperConstructor: T,
13-
...args: HelperArgs<ConstructorParameters<T>>
10+
/**
11+
* Instantiate a `THREE.*Helper` for an existing node and add it to the scene.
12+
*
13+
* Examples:
14+
*
15+
* ```ts
16+
* useHelper(sphereRef, BoxHelper, 'royalblue')
17+
* useHelper(sphereRef, VertexNormalsHelper, 1, 0xff0000)
18+
19+
* useHelper(raycasterRef, RaycasterHelper, 20)
20+
* ```
21+
*/
22+
export function useHelper<H extends HelperConstructor>(
23+
/** A ref to the node the helper is instantiate on (type inferred from H's ctor 1st param) */
24+
nodeRef: React.RefObject<ConstructorParameters<H>[0]> | Falsey,
25+
/** `*Helper` class */
26+
helperConstructor: H,
27+
/** Rest of arguments for H (types inferred from H's ctor params, omitting first) */
28+
...args: HelperArgs<ConstructorParameters<H>>
1429
) {
15-
const helper = React.useRef<HelperType>()
30+
const helperRef = React.useRef<InstanceType<H>>(null!)
1631
const scene = useThree((state) => state.scene)
32+
1733
React.useLayoutEffect(() => {
18-
let currentHelper: HelperType = undefined!
34+
let currentHelper: InstanceType<H> = undefined!
1935

20-
if (object3D && object3D?.current && helperConstructor) {
21-
helper.current = currentHelper = new (helperConstructor as any)(object3D.current, ...args)
36+
if (nodeRef && nodeRef?.current && helperConstructor) {
37+
helperRef.current = currentHelper = new helperConstructor(nodeRef.current, ...args) as InstanceType<H>
2238
}
2339

2440
if (currentHelper) {
2541
// Prevent the helpers from blocking rays
2642
currentHelper.traverse((child) => (child.raycast = () => null))
2743
scene.add(currentHelper)
2844
return () => {
29-
helper.current = undefined
45+
helperRef.current = null!
3046
scene.remove(currentHelper)
3147
currentHelper.dispose?.()
3248
}
3349
}
34-
}, [scene, helperConstructor, object3D, ...args])
50+
}, [scene, helperConstructor, nodeRef, args])
3551

36-
useFrame(() => void helper.current?.update?.())
37-
return helper
52+
useFrame(() => void helperRef.current?.update?.())
53+
return helperRef
3854
}
3955

4056
//
4157

42-
export type HelperProps<T extends HelperConstructor> = {
43-
type: T
44-
args?: HelperArgs<ConstructorParameters<T>>
58+
export type HelperProps<H extends HelperConstructor> = {
59+
/** `*Helper` class */
60+
type: H
61+
/** Rest of arguments for H (types inferred from H's ctor params, omitting first) */
62+
args?: HelperArgs<ConstructorParameters<H>>
4563
}
4664

47-
export const Helper = <T extends HelperConstructor>({
65+
/**
66+
* Instantiate a `THREE.*Helper` for parent node and add it to the scene.
67+
*/
68+
69+
export const Helper = <H extends HelperConstructor>({
4870
type: helperConstructor,
4971
args = [] as never,
50-
}: HelperProps<T>) => {
51-
const thisRef = React.useRef<Object3D>(null!)
72+
}: HelperProps<H>) => {
5273
const parentRef = React.useRef<Object3D>(null!)
5374

54-
React.useLayoutEffect(() => {
55-
parentRef.current = thisRef.current.parent!
56-
})
57-
5875
useHelper(parentRef, helperConstructor, ...args)
5976

60-
return <object3D ref={thisRef} />
77+
return (
78+
<object3D
79+
ref={(obj) => {
80+
parentRef.current = obj?.parent!
81+
}}
82+
/>
83+
)
6184
}

src/core/Raycaster.tsx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import * as THREE from 'three'
2+
import * as React from 'react'
3+
import { ComponentProps, forwardRef, useRef, useState } from 'react'
4+
import { useFrame, type Vector3 } from '@react-three/fiber'
5+
// import { RaycasterHelper } from '@gsimone/three-raycaster-helper'
6+
import { RaycasterHelper } from '../tmp/raycaster-helper'
7+
8+
import { useHelper } from '..'
9+
10+
type RaycasterProps = Omit<ComponentProps<'raycaster'>, 'args'> & {
11+
origin: Vector3
12+
direction: Vector3
13+
} & {
14+
helper?: boolean
15+
}
16+
17+
function toThreeVec3(v: Vector3) {
18+
return v instanceof THREE.Vector3 ? v : new THREE.Vector3(...(typeof v === 'number' ? [v, v, v] : v))
19+
}
20+
21+
export const Raycaster = forwardRef<THREE.Raycaster, RaycasterProps>(
22+
({ origin: _origin, direction: _direction, near, far, helper, ...props }, fref) => {
23+
const origin = toThreeVec3(_origin)
24+
const direction = toThreeVec3(_direction)
25+
26+
const [r] = useState(() => new THREE.Raycaster(origin, direction))
27+
28+
const raycasterRef = useRef<THREE.Raycaster>(null)
29+
const ref = fref || raycasterRef
30+
const isCallbackRef = typeof ref === 'function'
31+
32+
const raycasterHelperRef = useHelper(helper && !isCallbackRef && ref, RaycasterHelper)
33+
34+
// Update the hits with intersection results
35+
useFrame(({ scene }) => {
36+
if (!helper) return
37+
if (!ref || isCallbackRef) return
38+
39+
if (!raycasterHelperRef.current || !ref.current) return
40+
raycasterHelperRef.current.hits = ref.current.intersectObjects(scene.children)
41+
})
42+
43+
return <primitive ref={ref} object={r} {...{ origin, direction, near, far }} {...props} />
44+
}
45+
)

src/core/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export * from './Svg'
2424
export * from './Gltf'
2525
export * from './AsciiRenderer'
2626
export * from './Splat'
27+
export * from './Raycaster'
2728

2829
// Cameras
2930
export * from './OrthographicCamera'

0 commit comments

Comments
 (0)