对缓冲区几何进行射线投射时如何获得相交面答案

【问题标题】：How to get intersected face when raycasting against buffer geometry对缓冲区几何进行射线投射时如何获得相交面
【发布时间】：2018-10-08 10:14:03
【问题描述】：

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

相交对象的几何形状是“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 个面的数组。

我怎样才能得到相交的脸。

【问题讨论】：

我是否理解正确，首先，您找到缓冲区几何体的面索引，然后将该几何体转换为常用几何体，并尝试将该面索引应用于新的常用几何体（这与原始缓冲几何没有任何共同点）？
是的。我如何才能为通常的几何图形获取新的 faceIndex。
你的缓冲区几何结构没有索引吗？
是的。内部 bufferGeometry 索引为空。我认为这意味着它是非索引的

标签： three.js raycasting buffer-geometry

【解决方案1】：

使用intersection face 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 = ...;

【讨论】：

我应该如何使用 aVertex、bVertex 和 cVertex 从普通几何体中获取面
您可以使用这些顶点来构造三角形并进行渲染。如果一开始就有缓冲几何，为什么还要处理普通几何？

【解决方案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;
}

&lt;script src="https://threejs.org/build/three.min.js"&gt;&lt;/script&gt;

【讨论】：