Question

所以我的问题是在threejs中使用内置的raycaster，是否有可能获得共面相交。所以目前我有一个二维网格，它与光线投射方向向量位于同一平面上，但是光线投射没有记录任何交集。如果我将其更改为一条线而不是一个网格，它将检测到它，但是当它只是一个网格时不会检测到它。下面，我发布了我的意思的代码示例：

'use strict';

const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xff0000);

//var camera = new THREE.PerspectiCamera( canvas.width / - 2, canvas.width / 2, canvas.height / 2, canvas.height / - 2, 1, 1000 );
var camera = new THREE.PerspectiveCamera( 90, canvas.width / canvas.height, 1, 1000 );
camera.translateZ(20);

var geometry = new THREE.CircleGeometry(5,64);
geometry.computeBoundingSphere();
var material = new THREE.MeshBasicMaterial({color: 0x000000,side: THREE.DoubleSide});
var mesh = new THREE.Mesh(geometry,material);
//mesh.rotateY(.5);
scene.add(mesh);

var dir = new THREE.Vector3( -1, -1, 0 );
dir.normalize();
var origin = new THREE.Vector3( 10, 12, 0 );

var help = new THREE.ArrowHelper(dir,origin,30,0xf0f0f0);
scene.add(help);

var caster = new THREE.Raycaster(origin,dir,0,30);

var frameCount = 0
function main() {
  requestAnimationFrame(main);
  if(frameCount<3)
    console.log(caster.intersectObject(mesh));
  renderer.render(scene, camera);
  frameCount++;
}

main();

<!DOCTYPE html>
<html>
	<head>
		<title>Threejs</title>
	</head>
<body>
	<canvas id="c" width="600" height="450" style="border:1px solid #d3d3d3;"></canvas>
	<script src="https://threejsfundamentals.org/threejs/resources/threejs/r105/three.min.js"></script>
	<script src="body.js"></script>
</body>
</html>

所以这条线穿过圆，但是我无法检测到相交。如果变得更糟，我只能将其制成薄圆柱体，但我更希望找到一种在使其保持2d的同时工作的方法。

共面射线投射网格相交

0 个答案: