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();

三.js r.58