我通过创建带有顶点的几何体,然后构建面来构建自定义网格(八角棱柱)。我现在正在尝试添加鼠标悬停交互,但是 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