three.js icon indicating copy to clipboard operation
three.js copied to clipboard

RFC: RaycasterHelper

Open gsimone opened this issue 2 years ago • 5 comments

Hey! 👋
I made a very simple raycaster helper for myself, was wondering if it isn't worth adding this along the other existing helpers.

https://user-images.githubusercontent.com/1862172/162688071-4993e811-2fe0-4b8a-99c6-99c38214d78e.mov

Try it here https://6tc01w.csb.app/

It displays:

  • a segment going from origin to near + near to far
  • the two near/far points
  • optionally displays any hit via instances - this could just be points tbh
  • optionally displays wether or not any hit exists

The style is halfway between @gkjohnson 's bvh ray visualizations and three's directional light helper

API is:

const raycaster = new Raycaster(origin, direction, near, far)
const helper = new RaycasterHelper( raycaster, 5 ) // raycaster + max number of hits to display

// in your loop
const hits = raycaster.intersectObjects( scene.children )
helper.hits = hits;

Some boring nuance:

  • all the elements created by the helper have their raycast set as null, otherwise they'd always be hit by the ray they are visualizing 😓
  • there's some inefficiency in the way lines are updated, but that should be easily fixed if it's worth doing
  • all the components of the visualization are exposed as properties of the object, so they can be easily overridden, eg.
const helper = new RaycasterHelper( raycaster )
// make the hits red instead of white
helper.hitsVisualization.material.color = "#ff005b"

gsimone avatar Apr 11 '22 07:04 gsimone

Screen Shot 2022-04-11 at 12 58 49 PM

🤔

mrdoob avatar Apr 11 '22 19:04 mrdoob

I'm also confused by these points:

Screen Shot 2022-04-11 at 1 00 12 PM

🤔

mrdoob avatar Apr 11 '22 20:04 mrdoob

Looks good though! Would be nice to put it in examples/jsm/helpers/.

mrdoob avatar Apr 11 '22 20:04 mrdoob

@mrdoob ops, that's silly me, I recorded this from a demo where I'm doing some experiments with layers, so there's a third capsule that doesn't show up in the camera layer lol

Also fixed the sandbox link, I forgot to remove some typescript when copypasting 😊

gsimone avatar Apr 12 '22 09:04 gsimone

Ah I see...

Yeah, sounds good to me!

By the way, I just noticed that CapsuleGeometry's normals seem to have something wrong at the poles 🤔

Screen Shot 2022-04-14 at 11 12 25 AM

mrdoob avatar Apr 14 '22 18:04 mrdoob