在针对缓冲区几何形状进行射线播放时，如何获得相交的脸部

Question

我正在对场景进行射线播放。

相交对象的几何形状是"缓冲区计"。相交对象的一部分是

{
  distance: 494.77924415158327
  face: Face3 {a: 732, b: 733, c: 734, normal: Vector3, vertexNormals: [], …},
  faceIndex: 732,
  index: 732,
  object: Mesh {id: 16, uuid: "F1E299F1-927D-4CD8-ACF6-3A5AA528EACD", name: "collide_main", type: "Mesh", parent: Group, …},
  point: Vector3 {x: -3.025193341955971, y: 2.63172597487887, z: -4.237102099257478, isVector3: true, …},
  uv: Vector2 {x: 0.46554459963387684, y: 0.6888516128730314, isVector2: true, …}
 }

我需要得到那个对象的脸。我是为此做的。

var geometry = new THREE.Geometry().fromBufferGeometry( INTERSECTED.object.geometry );
var faces = geometry.faces;
var intersectedFace = faces[INTERESECTED.faceIndex];

但是很多时间相交的面部包含一个索引，而索引不在脸上。例如，在上述情况下相交。FaceIndex为732，但是我获得的面积仅包含200个面数。

我如何获得相交的脸。

Answer 1

使用相交面A，B，C属性从位置BufferAttribute获取x，y，z：

let positionAttribute = bufferGeometry.attributes["position"];
let aVertex = new THREE.Vector3(positionAttribute.getX(intersection.face.a), positionAttribute.getY(intersection.face.a), positionAttribute.getZ(intersection.face.a));
let bVertex = ...;
let cVertex = ...;

Answer 2

您可以通过其索引访问面部的顶点(我认为这样做的原因是改变脸部的颜色；非索引的几何形状只是三角形汤(：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var planeGeom = new THREE.PlaneBufferGeometry(10, 10, 10, 10);
var planeGeomNonIndexed = planeGeom.toNonIndexed();
console.log(planeGeomNonIndexed);
var colors = [];
planeGeomNonIndexed.attributes.position.array.forEach(p => {
  colors.push(1, 1, 1);
});
planeGeomNonIndexed.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
var plane = new THREE.Mesh(planeGeomNonIndexed, new THREE.MeshBasicMaterial({
  vertexColors: THREE.VertexColors
}));
scene.add(plane);
scene.add(new THREE.Mesh(planeGeom, new THREE.MeshBasicMaterial({
  color: "black",
  wireframe: true
})));
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var intersects = [];
window.addEventListener("mousedown", onMouseDown, false);
function onMouseDown(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  intersects = raycaster.intersectObject(plane);
  if (intersects.length === 0) return;
  let faceIndex = intersects[0].faceIndex;
  planeGeomNonIndexed.attributes.color.setXYZ(faceIndex, 1, 0, 0);
  planeGeomNonIndexed.attributes.color.setXYZ(faceIndex + 1, 1, 0, 0);
  planeGeomNonIndexed.attributes.color.setXYZ(faceIndex + 2, 1, 0, 0);
  planeGeomNonIndexed.attributes.color.needsUpdate = true;
}
render();
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>