CODEWITHSUNDEEP
javascriptthree.js
David Biga
David Biga

Reputation: 2801

IntersectObjects - THREE.Line - Three.js

I have a THREE.Line object that is used to orchestrate a custom grid. Now the problem I am having is when using a raycast to intersectObjects when the users mouse might goes over this grid, the intercept only succeeds if the users mouse goes "directly" over any of the grid lines.

Please see the attached photo: Custom Grid

So ultimately what I am am trying to accomplish is, how can the fill in the space between the lines with an "invisible" face or even shape so that when the users mouse goes over this grid, I can trigger an action. Here is currently what I am doing:

var response = this.buildGridGeometry(modelStep,modelSize,gridtype);
var geometry = response['geometry'];
geometry.computeBoundingBox();
// #  Setup the material
var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
// #  Draw each individual line
var line = new THREE.Line( geometry, material, THREE.LinePieces );

Any suggestions?

Upvotes: 1

Views: 1001

Answers (1)

micnil
micnil

Reputation: 4805

The easiest solution would be to create a custom Geometry with the same shape as the grid, then make it's initial position, rotation and scale match with the grid (if it isn't already). After that you can add the custom Geometry as a child to the grid so that it moves correspondingly. Last step is to make the custom Geometry mesh invisible by setting its property .visible = false;.

Now you just need to use the raycasters intersectsObject() on the custom Geometry mesh instead, and when it does intersect, you know that the grid is intersected aswell.

Upvotes: 2

Related Questions