Three.js Raycaster 不与自定义网格相交 [英] Three.js Raycaster not intersecting custom mesh

问题描述

我通过创建具有顶点的几何体，然后构建面来构建自定义网格(八角棱镜).我现在正在尝试添加鼠标悬停交互，但是 Raycaster 没有从此网格返回任何交点.

I've built a custom mesh (an octagonal prism) by creating a geometry with vertices, and then building the faces. I'm now trying to add mouseover interaction, however the Raycaster returns no intersections from this mesh.

我认为这是网格的问题，因为其他几何图形在场景中的交叉点上正确返回.

I think it's an issue with the mesh, as other geometries are correctly returned on intersection in the scene.

一个完整的例子可以在这里看到:http://jsfiddle.net/mattheath/3qxzS/

A full example can be seen here: 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

推荐答案

Raycaster.intersectObjects() 需要面法线.

Raycaster.intersectObjects() requires face normals.

对于自定义几何图形，您可以像这样计算它们:

For custom geometries, you can compute them like so:

geometry.computeFaceNormals();

three.js r.58

three.js r.58

这篇关于Three.js Raycaster 不与自定义网格相交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！