CODEWITHSUNDEEP
javascriptthree.js
Lord Goderick
Lord Goderick

Reputation: 985

EdgesGeometry: raycasting not accurate

I'm using EdgesGeometry on PlaneGeometry and it seems it creates a larger hitbox in mouse events. This however, isn't evident when using CircleGeometry. I have the following:

    createPanel = function(width, height, widthSegments) {

      var geometry = new THREE.PlaneBufferGeometry(width, height, widthSegments);

      var edges = new THREE.EdgesGeometry( geometry );

      var panel = new THREE.LineSegments( edges, new THREE.LineBasicMaterial({ 
      color: 0xffffff }));

      return panel;

    }

   var tile = createPanel(1.45, .6, 1);

Now I'm using a library called RayInput which does all the raycasting for me but imagine I'm just using a normal raycaster for mouse events. Without the edges and using just the plane, the boundaries of collision is accurate.

After adding EdgesGeometry, the vertical hitbox seems to has increased dramatically thus, the object is detected being clicked when I'm not even clicking on it. The horizontal hitbox seems to have increased only slightly. I've never used EdgesGeometry before so anyone have a clue what is going on?

Thanks in advance.

Upvotes: 2

Views: 695

Answers (1)

WestLangley
WestLangley

Reputation: 104843

If you are raycasting against THREE.Line or THREE.LineSegments, you should set the Line.threshold parameter to a value appropriate to the scale of your scene:

raycaster.params.Line.threshold = 0.1; // default is 1

three.js r.114

Upvotes: 5

Related Questions