提高three.js中的光线投射精度

Question

我正在使用重铸从网格的每个面中点投射光线到网格本身以找到局部厚度。有趣的是，由于网格排列，有时光线在三角形之间传递，并且没有显示正确的厚度。有人提到浮标精度问题。我想知道是否有人知道如何改进我的代码。谢谢。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100000);
camera.position.setScalar(500);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var loader = new THREE.STLLoader();
loader.load('https://sos-ch-dk-2.exo.io/stl-upload-test/uploads/stl/5bd15fae89ff9a1cb7816af9/stl/hexagon.STL', function(geometry) {
  var material = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide, vertexColors: THREE.VertexColors});
  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  colorMesh(mesh);
});

function colorMesh(mesh) {

  //var minDist = 0.6;
	var colorArray = [];
  var raycaster = new THREE.Raycaster();
  var intersects = [];

  var pos = mesh.geometry.attributes.position;

  var ori = new THREE.Vector3();
  var dir = new THREE.Vector3();
  var trc = new THREE.Vector3();
  var a = new THREE.Vector3(),
    b = new THREE.Vector3(),
    c = new THREE.Vector3(),
    midPoint = new THREE.Vector3(),
    tri = new THREE.Triangle();
  var closest = new THREE.Vector3();

  var faces = pos.count / 3;
  for (let i = 0; i < faces; i++) {
    a.fromBufferAttribute(pos, i * 3 + 0);
    b.fromBufferAttribute(pos, i * 3 + 1);
    c.fromBufferAttribute(pos, i * 3 + 2);
    tri.set(a, b, c);
    tri.getMidpoint(ori);
    tri.getNormal(dir)
    raycaster.set(ori, dir.negate());
    intersects = raycaster.intersectObject(mesh);
		//minDist = Math.min(minDist, intersects[intersects.length > 1 ? 1 : 0].distance);
    minDist = intersects[intersects.length > 1 ? 1 : 0].distance;
    console.log(minDist);
    
    var col =  new THREE.Vector3(Math.floor((10/minDist)*255),Math.floor(0.01*minDist*255),0);	
    //var col =  new THREE.Vector3(0,0,0);	
    
    for (var j = 0;j<3;j++) {
      colorArray.push(col.x);
      colorArray.push(col.y);
      colorArray.push(col.z);
    }
    console.log(col);
  }
  var colors = new Uint8Array( colorArray );

  mesh.geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3,true ) );

	//helper = new THREE.VertexNormalsHelper( objects[0], 2, 0x00ff00, 1 );
				// scene.add(helper);
  //return minDist >= 0.6;
}


renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
});

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/loaders/STLLoader.js"></script>

sample image

Answer 1

问题是Ray.js没有考虑所有可能的情况。实际上，它返回交点，或者null，这不足以处理边缘问题。

问题：当光线与网格相交时，可能存在许多特殊情况：

1. ray完全穿过网格的一个单一顶点 - >在当前实现中，这将被报告为零或一个或两个或最多N个交叉点（取决于基于此顶点的浮点精度如何作用于每个N面）
2. 射线完全沿着一个面，
3. 射线沿着面部移动并最终与顶点相遇，

......以及更多类似的情况，但你明白了。

---

有一种方法可以显着降低进入这些情况的风险：不要使用面部中点，而是在脸上取一个随机点。

例如：

// tri.getMidpoint(ori);

// get some random point on face
let r0 = 0.33 * Math.random();
let r1 = 0.33 * Math.random();
let r2 = 1.0 - r0 - r1;

let ori = new THREE.Vector3(
    r0*a.x + r1*b.x + r2*c.x,
    r0*a.y + r1*b.y + r2*c.y,
    r0*a.z + r1*b.z + r2*c.z
);