Three.js射线检测未与自定义网格相交

4
我已经通过创建顶点并构建面来构建了一个自定义网格(一个八面体棱柱)。现在我正在尝试添加鼠标悬停交互,但是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
1个回答

7

Raycaster.intersectObjects()需要面法线。

对于自定义几何体,您可以按照以下方式计算它们:

geometry.computeFaceNormals();

three.js r.58


另外,请确保对Raycaster的direction参数进行.normalize()处理。 - Alex Varga

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接