Three.js Raycaster не пересекает пользовательскую сетку

Question

Я создал пользовательскую сетку (восьмиугольную призму), создав геометрию с вершинами, а затем построив грани. Теперь я пытаюсь добавить взаимодействие с мышью, однако Raycaster не возвращает пересечений из этой сетки.

Я думаю, что это проблема с сеткой, так как другие геометрии правильно возвращаются на пересечении в сцене.

Полный пример можно увидеть здесь: http://jsfiddle.net/mattheath/3qxzS/

var x, y, z, width, height, opacity; 


// Container object 
var octagon = new THREE.Object3D(); 

// Adjust registration point to bottom of object 
y = y + height/2; 

// Default opacity to non-transparent 
opacity = opacity || 1; 

// Calculate distance from edge of a cube the octagonal side starts 
var cornerRadius = ((width - (width/(1 + Math.sqrt(2))))/2) * 0.85; 

// Boundaries 
var xMin = x - width/2; 
var xMax = x + width/2; 
var zMin = z - width/2; 
var zMax = z + width/2; 
var yMin = y; 
var yMax = y + height; 

// Calculate vertices 

var vertices = []; 

vertices.push(new THREE.Vector3(xMax - cornerRadius, yMin, zMin)); 
vertices.push(new THREE.Vector3(xMin + cornerRadius, yMin, zMin)); 
vertices.push(new THREE.Vector3(xMin, yMin, zMin + cornerRadius)); 
vertices.push(new THREE.Vector3(xMin, yMin, zMax - cornerRadius)); 
vertices.push(new THREE.Vector3(xMin + cornerRadius, yMin, zMax)); 
vertices.push(new THREE.Vector3(xMax - cornerRadius, yMin, zMax)); 
vertices.push(new THREE.Vector3(xMax, yMin, zMax - cornerRadius)); 
vertices.push(new THREE.Vector3(xMax, yMin, zMin + cornerRadius)); 

vertices.push(new THREE.Vector3(xMax - cornerRadius, yMax, zMin)); 
vertices.push(new THREE.Vector3(xMin + cornerRadius, yMax, zMin)); 
vertices.push(new THREE.Vector3(xMin, yMax, zMin + cornerRadius)); 
vertices.push(new THREE.Vector3(xMin, yMax, zMax - cornerRadius)); 
vertices.push(new THREE.Vector3(xMin + cornerRadius, yMax, zMax)); 
vertices.push(new THREE.Vector3(xMax - cornerRadius, yMax, zMax)); 
vertices.push(new THREE.Vector3(xMax, yMax, zMax - cornerRadius)); 
vertices.push(new THREE.Vector3(xMax, yMax, zMin + cornerRadius)); 

// Start building Geometry 
var geometry = new THREE.Geometry(); 

// Push in all the vertices 
geometry.vertices.push(vertices[0]); 
geometry.vertices.push(vertices[1]); 
geometry.vertices.push(vertices[2]); 
geometry.vertices.push(vertices[3]); 
geometry.vertices.push(vertices[4]); 
geometry.vertices.push(vertices[5]); 
geometry.vertices.push(vertices[6]); 
geometry.vertices.push(vertices[7]); 

geometry.vertices.push(vertices[8]); 
geometry.vertices.push(vertices[9]); 
geometry.vertices.push(vertices[10]); 
geometry.vertices.push(vertices[11]); 
geometry.vertices.push(vertices[12]); 
geometry.vertices.push(vertices[13]); 
geometry.vertices.push(vertices[14]); 
geometry.vertices.push(vertices[15]); 

// Add faces, top and bottom need 3 polygons 

// Bottom face 
geometry.faces.push(new THREE.Face4(0, 1, 2, 3)); 
geometry.faces.push(new THREE.Face4(0, 3, 4, 7)); 
geometry.faces.push(new THREE.Face4(4, 5, 6, 7)); 

// Top face 
geometry.faces.push(new THREE.Face4(8, 9, 10, 11)); 
geometry.faces.push(new THREE.Face4(8, 11, 12, 15)); 
geometry.faces.push(new THREE.Face4(12, 13, 14, 15)); 

// And each side 
geometry.faces.push(new THREE.Face4(0, 1, 9, 8)); 
geometry.faces.push(new THREE.Face4(1, 2, 10, 9)); 
geometry.faces.push(new THREE.Face4(2, 3, 11, 10)); 
geometry.faces.push(new THREE.Face4(3, 4, 12, 11)); 
geometry.faces.push(new THREE.Face4(4, 5, 13, 12)); 
geometry.faces.push(new THREE.Face4(5, 6, 14, 13)); 
geometry.faces.push(new THREE.Face4(6, 7, 15, 14)); 
geometry.faces.push(new THREE.Face4(7, 0, 8, 15)); 

var octagonMaterial = new THREE.MeshBasicMaterial({ color: 0xE6E6E6, side: THREE.DoubleSide, opacity: opacity, transparent: true }); 
var mesh = new THREE.Mesh(geometry, octagonMaterial); 
mesh.name = "octagon"; 
octagon.add(mesh); 

// The mesh is then added to the scene 

Answer 1

Raycaster.intersectObjects() требует лица нормалей.

Для пользовательских геометрии, можно вычислить их следующим образом:

geometry.computeFaceNormals(); 

Three.js R.58