three.js - 检查点是否在自定义网格几何体内

Question

检查点是否在自定义（不规则）网格几何体中的最简单方法是什么？

Answer 1

如果您的网格是特写镜头。您可以使用 THREE.js 内置的光线投射器。示例代码如下

const point = new THREE.Vector3(2,2,2) // Your point
const geometry = new THREE.BoxBufferGeometry( 5, 5, 5 )
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } )
const mesh = new THREE.Mesh( geometry, material )
const raycaster = new THREE.Raycaster()
raycaster.set(point, new THREE.Vector3(1,1,1))
const intersects = raycaster.intersectObject(mesh)
if( intersects.length %2 === 1) { // Points is in objet
   console.log(`Point is in object`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.js"></script>

Answer 2

只需从该点向任意方向投射一次，然后检查相交数，如果是奇数，则该点在几何中，这里是演示

Answer 3

这是一个计算几何问题。您可以查看Finding if point is inside geometry。由于您的几何形状不规则，因此问题要困难得多。

但是如果精度不是太重要，您可以检查该点是否在几何的边界框内。

Answer 4

最好使用光线方向和面法线的点积来检查

在three.js（r103）上测试

const point = new THREE.Vector3(2, 2, 2) // Your point
const direction = new THREE.Vector3(1, 1, 1);
const geometry = new THREE.BoxGeometry(5, 5, 5)
const material = new THREE.MeshBasicMaterial({ color: 0xffff00, side: THREE.DoubleSide });
const mesh = new THREE.Mesh(geometry, material)
const raycaster = new THREE.Raycaster()

raycaster.set(point, direction)
const intersects = raycaster.intersectObject(mesh);

if (intersects.length && direction.dot(intersects[0].face.normal) > 0) {
  console.log(`Point is in object`);
} else {
  console.log(`Point is out of object`);
}

在极少数情况下，您可以获得偶数个与位于网格内的点的交点

（试试point = new THREE.Vector3(0, 0, 0)，应该有 4 个交叉点）