Raycaster intersection with morphTarget

Questions
, , , ,
1

I am trying to allow the user to click on an object that is also modified by morphTargetInfluences. What I am finding is that it’s very difficult to click on the target as the target area is the unmorphed shape.

I believe this is due to the morph taking place on the GPU in buffergeometry and raycaster working on the CPU, unaware of the morph. Is there a workaround to keep the two in sync?

Thanks!

1 Like
2

Correct. Unfortunately, there is no library function for raycasting against morphed meshes. Same for skinned meshes (see github issue). So for now, you have to apply the vertex transformation via JavaScript and then perform the raycast against the morphed geometry.

3

Can you explain a little bit more what you mean here when you say raycast against the morph geometry? I am trying to do the same thing as the OP, and I am not sure if you are suggesting a work around or if you are saying that it just isn’t possible currently with skinned meshes.

If it isn’t currently possible to do this with raytracing, do you know of another way a user can select a skinned mesh in the scene by clicking?

I found a work-around for my situation. I keep an array of all objects I would want to click on in the scene. Then I call raycast.intersectObject on each of those objects. This function does recognize skinned meshes.

4

Please have a look at the following thread: Object bounds not updated with animation

I’ve posted there two fiddles that demonstrate how to apply the vertex transformation of skeletal animation in JavaScript.

In general, it is no good approach to compute this vertex transformation each frame since it’s computationally very expensive. You might want to use the following fiddle which computes the maximum bounding box that contains the SkinnedMesh the entire animation. You can then raycast against the AABB each frame which is a very fast operation.

https://jsfiddle.net/v02kLhsm/2/

1 Like
5

Hi,

in three.js 149dev

I have found that the issue is caused by this function

if ( geometry.boundingBox !== null ) {

			if ( _ray$2.intersectsBox( geometry.boundingBox ) === false ) return;

		}

By going even further deep … :mag_right: :thinking: :diving_mask:

in intersectBox function

I have found that the issue is caused by these two lines in three.module.js (149dev) ~ L6100

if ( ( tmin > tymax ) || ( tymin > tmax ) ) return null;
if ( ( tmin > tzmax ) || ( tzmin > tmax ) ) return null;

They are always true for morph glbs whereas varying among true or false for static.

I have commented them and raycasting works for morphs too.

Are these checks necessary ? t is for x axis whereas ty is for the y axis. I do not see why these checks should hold since they are on irrelevant axes.

Best,
Dimitrios