Three.js raycaster.intersectObject do not intersect when THREE.Points has only 1 vertex or has vertexs arranged in line

问题

I spent several hours to understand this problem. For some inexplicable reason (for me) raycaster.intersectObject( pointCloud ); do not intersect my 'pointCloud' Object when it has just one vertex (the respective position array attribute with three elements). If the Object has two or more vertices only then raycaster.intersectObject works.

My geometry is a THREE.BufferGeometry() and I'm using a custom ShaderMaterial. My object is a THREE.Points.

this.pointCloud = new THREE.Points( geometry, material0 );

Any ideas?

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ New edition of my question ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

Ok, I think the problem here is that when I have a THREE.Point, with a Buffer Geometry with just one vertex (something really specific and odd, but in my case possible) the calculation for a boundingBox min and max, is :

boundingBox: 
  max: 
     THREE.Vector3  x: 50  y: 50  z: -50
  min: 
    THREE.Vector3  x: 50  y: 50  z: -50

And the problem is not just with one vertex, with a set of vertexs arranged in the same line (less odd), the min and max of the boundingBox of the geometry draws a line. I mean, for example, same X pos, Y pos, but different Z pos,

boundingBox: 
  max: 
    THREE.Vector3 x: -100 y: 0 z: 133
  min: 
    THREE.Vector3 x: -100 y: 0 z: -33

So, I think here is why in these both cases raycast intersection do not work.

More details:

In this last case for example, following the thread of the raycast.intersection:

//in my file.js
intersections = raycaster.intersectObject( pc.pointCloud , true);  
//line 7734 three.js
intersectObject( object, this, intersects, recursive ); 
//line 7678 three.js 
object.raycast( raycaster, intersects ); 
//line 16542 three.js
if ( ray.isIntersectionBox( geometry.boundingBox ) === false ) {... 
//line 6152 three.js
intersectBox: function ( box, optionalTarget ) {...

Here, inside this intersectBox function :

//line 6188 three.js 
if ( ( tmin > tymax ) || ( tymin > tmax ) ) return null;

...the evaluation is true, so returns null and the intersections can't be achieved. I assume the problem is that it evaluates the x and y positions of the boundedBox that are the same, and that's why ( tmin > tymax) or (tymin > tmax) gives true. But if I change the position of my particles, to share x and z, and have y as the different one, is the same result, is not intersecting.

Maybe with this new information someone is able to help me to set a good fix for this.

...edit this three.js function?, or do a trick in my geometry to give a valid boundedBox?....

Thanks once again!

Three.js 72

回答1:

@WestLangley gave me the answer in GitHub.

He said:
"Your bounding box has no volume. Try this and report back:

 pointCloud.geometry.boundingBox = null;

I tried and it worked out of the box!. And the detection is working even better than before.

Something that @Beiller pointed out in the comments, and is important to include here I think.

I had a call to

this.geometry.computeBoundingBox();

...for my geometry, but the points are not volumes, so single point or aligned (in one of the three axis: x, y or z) points are not detected. Using instead:

this.geometry.computeBoundingSphere()

solve the problem too.

来源：https://stackoverflow.com/questions/34009220/three-js-raycaster-intersectobject-do-not-intersect-when-three-points-has-only-1

标签

javascript

three.js