Как получить пересеченную грань при лучевой трансляции от геометрии буфера

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

Вы можете получить доступ к вершинам лица через его индекс (например, я вижу причину этого в том, чтобы изменить цвет лица; неиндексированная геометрия - это просто суп из треугольника):

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>

Answer 2

Используйте свойства грани пересечения a, b, c, чтобы получить x, y, z из положения bufferattribute:

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 = ...;