haughty spade May 14, 2023, 11:13 AM

#

how do i change the threshold for the raycast if i am using onPointerOver / onPointerOut events on my Line. Right now its seems to be something like 1, my scene is scalled x1000 so you kinda have to match the line by 1 pixel.

haughty spade May 14, 2023, 11:34 AM

#

ive found this in the r3f docs,

#

const eventManagerFactory: Parameters<typeof Canvas>[0]['events'] = (state) => ({
// Default configuration
...events(state),

// Determines if the event layer is active
enabled: true,

// Event layer priority, higher prioritized layers come first and may stop(-propagate) lower layer
priority: 1,

// The filter can re-order or re-structure the intersections
filter: (items: THREE.Intersection[], state: RootState) => items,

// The compute defines how pointer events are translated into the raycaster and pointer vector2
compute: (event: DomEvent, state: RootState, previous?: RootState) => {
state.pointer.set((event.offsetX / state.size.width) * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1)
state.raycaster.setFromCamera(state.pointer, state.camera)
state.raycaster.params.Line.threshold = 1;
state.raycaster.params.Mesh.threshold = 1;
state.raycaster.layers.enableAll ();

},

// Find more configuration default on ./packages/fiber/src/web/events.ts
// And type definitions in ./packages/fiber/src/core/events.ts
})

#

so i can customize the events on canvas. so ive tried to set the raycaster there, but thers an reactjs error :

#

./src/pages/treppenstufen-konfigurator.js
Error:
x 'const' declarations must be initialized
,-[/Users/patrickpanknin/Desktop/Iservy/REACT/Projects/holz-treppenstufen/src/pages/treppenstufen-konfigurator.js:9:1]
9 |
10 |
11 |
12 | const eventManagerFactory: Parameters<typeof Canvas>[0]['events'] = (state) => ({
: ^^^^^^^^^^^^^^^^^^^
13 | // Default configuration
14 | ...events(state),
`----

x Expected a semicolon
,-[/Users/patrickpanknin/Desktop/Iservy/REACT/Projects/holz-treppenstufen/src/pages/treppenstufen-konfigurator.js:9:1]
9 |
10 |
11 |
12 | const eventManagerFactory: Parameters<typeof Canvas>[0]['events'] = (state) => ({
: ^
13 | // Default configuration
14 | ...events(state),
`----

x Expression expected
,-[/Users/patrickpanknin/Desktop/Iservy/REACT/Projects/holz-treppenstufen/src/pages/treppenstufen-konfigurator.js:11:1]
11 |
12 | const eventManagerFactory: Parameters<typeof Canvas>[0]['events'] = (state) => ({
13 | // Default configuration
14 | ...events(state),
: ^^^
15 |
16 | // Determines if the event layer is active
17 | enabled: true,
`----

Caused by:
Syntax Error

#

Not sure why is occures, since this code is an official document

boreal tiger May 14, 2023, 11:49 AM

#

wdym by "raycast threshold" ?

haughty spade May 14, 2023, 12:50 PM

#

boreal tiger wdym by "raycast threshold" ?

.params : Object
An object with the following properties:
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}
Where threshold is the precision of the raycaster when intersecting objects, in world units.

boreal tiger May 14, 2023, 12:50 PM

#

wdym precision

#

ray is not a volume, it's a line with an infinitely small width

haughty spade May 14, 2023, 12:55 PM

#

Iam aware of this. But there’s still the threshold parameter I need to change in the event that gets fired

boreal tiger May 14, 2023, 1:00 PM

#

const { raycaster } = useThree();

useEffect(() => {
  raycaster.params.Line.threshold = 
    raycaster.params.Line2.threshold = 
    raycaster.params.Points.threshold = 100.0;
}, [raycaster]);

cat_think ?

#

(keep in mind Line and Line2 are not the same - so if you're using Line2 somewhere, you need to set both)

haughty spade May 14, 2023, 1:03 PM

#

Will this raycaster be used when I set a function on <Line onPointerOver={}>

#

I don’t think so ?

boreal tiger May 14, 2023, 1:04 PM

#

I'd give it a try

#

it's the default raycaster r3f uses

#

so there's a big chance it will

haughty spade May 14, 2023, 1:05 PM

#

Somewhere the raycaster is defined in fiber. Might be in orbitcontrolls or where so ever. There I need to change it

#

Ah ok I’ll try it out

#

Thank you so far I’ll try it out in the evening. I’ll give you feedback

haughty spade May 14, 2023, 3:45 PM

#

doesnt work on my app, but i found the solution. I can manipulte the raycaster created within the Canvas element. I love google. BUT i cant figure out how to do since im quite new to JSX

#

Canvas

The Canvas object is your portal into Threejs. It renders Threejs elements, not DOM elements!

<Canvas
  children                      // Either a function child (which receives state) or regular children
  gl                            // Props that go into the default webGL-renderer
  camera                        // Props that go into the default camera
  raycaster                     // Props that go into the default raycaster
  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
  pixelRatio = 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
  onCreated                     // Callback when vdom is ready (you can block first render via promise)
  onPointerMissed />            // Response for pointer clicks that have missed a target

You can give it additional properties like style and className, which will be added to the container (a div) that holds the dom-canvas element.

#

<Canvas raycaster-params-line-threshold = {100} /> thats not working ...

haughty spade May 14, 2023, 4:06 PM

#

okay for now ive achieved it through useEffect hook

#

useEffect( ( ) => {

    if ( canvas === 0 ) { return }


    canvas.raycaster.params.Line.threshold = 10;

}, [ sceneDemension ])

#

But the goal is to do it in Canvas component like <Canvas raycaster-params-line-threshold ={10}/>

undone forge May 14, 2023, 4:12 PM

#

To my knowledge, there is no direct way to pass raycaster parameters through the Canvas component as props. This is because the Canvas component doesn't have built-in support for such specific configurations.

However, you can create a custom component that sets the raycaster.params.Line.threshold property.

📎 SetRaycasterParams.js

haughty spade May 14, 2023, 4:13 PM

#

haughty spade # Canvas The `Canvas` object is your portal into Threejs. It renders Threejs el...

thank you for that snippet, ill try it out. But theres the description about the Canvas element, should it be possible as it is mentioned ?

#

the jsx canvas element says: prop: raycaster // Props that go into the default raycaster

haughty spade May 14, 2023, 4:16 PM

#

undone forge To my knowledge, there is no direct way to pass raycaster parameters through the...

this defnetly worked bro ! so many thanks for that ❤️ your not human 😄 😄

undone forge May 14, 2023, 4:16 PM

#

It does take a raycaster prop. However, this prop is used to configure the general properties of the raycaster and it's not designed to handle the detailed configuration for specific types of intersections like Line.

This is because the raycaster is a complex object with a lot of different settings, and the Line threshold is just one of them. Different types of intersections (with Meshes, Lines, Points, etc.) have different settings, and these can't be easily represented with a single prop on the Canvas component.

So, while you can pass a raycaster prop to the Canvas component, it won't let you set the raycaster.params.Line.threshold property directly.

undone forge May 14, 2023, 4:16 PM

#

haughty spade this defnetly worked bro ! so many thanks for that ❤️ your not human 😄 😄

No worries. Hope it helped SXFAnyaLove_Maomao

haughty spade May 14, 2023, 4:17 PM

#

it did and made my code much cleaner 😄 ❤️ ill stay with this solution

#

as its the same solution @boreal tiger posted, but i was unable to implement it because ive declared the function in my export function many thanks to you aswell ❤️

undone forge May 14, 2023, 4:28 PM

#

No problem feel free to close the thread if you don't have any further questions SGuraHype

haughty spade May 14, 2023, 4:31 PM

#

actualy i have 1 more question

#

i want to assigne custom functions to my meshes. e.g. i have a component that will be a <exdrudeGeometry> and i want to assigne a custom function, e.g. draw2DContours()

#

do i do it the same way ive did it with the raycatser ?

#

a helper function could be, drawSprites(), create sprites for each vertex in the bufferGeometry

#

e.g. drawSprites() would be called if i intersec a Line through the intersection object

undone forge May 14, 2023, 4:42 PM

#

You can assign custom functions to your meshes or any other components in a similar way. For example:

📎 Temp_codesketch_20230514.js

undone forge May 14, 2023, 4:43 PM

#

haughty spade e.g. drawSprites() would be called if i intersec a Line through the intersection...

You could use a similar approach for the drawSprites function. You could call this function when an intersection is detected, by using the onPointerEnter or onPointerOver event, for example:

📎 Temp_codesketch_20230514.js

#

Let me know if this answered your question. ^^

haughty spade May 14, 2023, 5:24 PM

#

I’ll check it tomorrow morning and then hopefully I’ll close this thread if it’s okay , thank you man. I’ve worked with threejs for years bymyself and now I need to migrate my Programm to fiber, I’ve never reached out to the community or even new there was one. This is so amazing having people here with huge knowledge and who are open to help others. Thank you so much ❤️

dusk moss May 15, 2023, 8:19 AM

#

<Canvas raycaster={{ params: { Line: { threshold: 2 } } }}>

#

the raycaster is also part of the state model, you can access it from everywhere, just like @boreal tiger @undone forge did above

#

though as a suggestion, it's a good idea to make components self-contained

function Raycaster({ threshold }) {
  const raycaster = useThree(state => state.raycaster)
  useEffect(() => {
    const old = raycaster.params.Line.threshold
    raycaster.params.Line.threshold = threshold
    return () => raycaster.params.Line.threshold = old
  }, [raycaster, threshold])
}

<Raycaster threshold={10} />

#change raycast threshold for onPointerOver event.

Canvas