Question

我正在对一个场景进行光线投射。

相交对象的几何是“BufferGeometry”。相交对象的一部分是

{
  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];

但许多时候INTERSECTED面部包含一个面部不存在的索引。例如，在上面的例子中，INTERSECTED.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>

如何在对缓冲区几何体进行光线投射时获得相交的面

2 个答案: