Question

I have created a plane surface (THREE.js, CanvasRenderer) which is made up of multiple triangular faces. I want the faces to change their color randomly when I hover the mouse pointer over them. When all the vertices of the faces are at z = 0, it works fine:

http://jsfiddle.net/koweiny/FT4uS/

But when I set the faces to any other value, let’s say z = -10, it behaves in a crazy way, as if the surface were now a reflection of an invisible surface at z = 0:

http://jsfiddle.net/koweiny/FT4uS/2/

The only change in the code is the 3rd component of the variable node, which is -10 now for all the vertices:

var node = new THREE.Vector3(x, y, -10);

instead of

var node = new THREE.Vector3(x, y, 0);

Can anyone tell me why this happens?

Answer 1

Ray.intersectObjects() requires face centroids.

geometry.computeCentroids();

fiddle: http://jsfiddle.net/FT4uS/5/

three.js r.53