1

See following fiddle:

https://jsfiddle.net/1jmws2bp/

If you move the mouse over the line or the circle, it should change color to white (works for me, locally, in jsfiddle sometimes there is a bit of an offset, not entirely sure why).

Problem is, that if you change Line 22: to var circle = new THREE.Mesh(geometry, material) the circle is filled out (as intended), but if you now hover it now, it won't update color.

Why is that? If I manually add this: scene.children[0].material.color.setHex(0xff0000);

it does work. So somehow it looks to me that with a Mesh the RayCaster does not see the intersection. (Verified by adding this line alert("intersection"); after if (intersects.length > 0) no alert if I use Mesh instead of Line)

  • 1
    if you want to intersect mesh of circle, then remove the line `geometry.vertices.shift();` from the `newCircle()` function – prisoner849 Jan 14 '17 at 22:37
  • @prisoner849 Thanks, I wonder though... I added this because of this here: https://stackoverflow.com/questions/13756112/draw-a-circle-not-shaded-with-three-js. What I wonder about is: With `new THREE.Line` it works with or without the shift, but with Mesh it does not, when the shift is present. Why is that? Also, if you add an answer I will gladly accept it! –  Jan 14 '17 at 23:37
  • I made an answer. – prisoner849 Jan 15 '17 at 13:31

1 Answers1

0

If you want to intersect mesh of circle, then remove the line geometry.vertices.shift(); from the newCircle() function.

When you call .shift(), you remove the first element from the array of vertices. Such "shifted" array in a geometry is acceptable for THREE.Line() as it needs vertices only, but not acceptable for THREE.Mesh(), which needs vertices and faces based on vertices.

And also, if you want to use THREE.Mesh() then change the material from THREE.LineBasicMaterial() to THREE.MeshBasicMaterial().

prisoner849
  • 16,894
  • 4
  • 34
  • 68