0

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

相交对象的几何形状是“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 face 包含一个在 face 中不存在的索引。例如，在上述情况下，INTERSECTED.faceIndex 为 732，但我获得的面仅包含 200 个面的数组。

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

4

2 回答 2

1

使用相交面 a、b、c 属性从位置缓冲区属性中获取 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 = ...;
于 2018-04-27T14:53:20.183 回答
0

您可以像这样通过索引访问面的顶点（我看到这样做的原因是改变面的颜色；非索引几何只是三角形汤）：

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>

于 2018-04-27T15:24:21.857 回答