我尝试在 Threejs 中使用可点击的 3D 对象制作一个非常简单的程序。我的代码基于
https://threejs.org/examples/#webgl_interactive_cubes
当我单击对象时它起作用(尽管结果数组包含该对象两次，我假设是因为光线在进入它和退出它时与它相交)。
但是当我单击对象周围的区域时，raycaster.intersectObjects 返回该对象，尽管它应该返回一个空数组。
我做错了什么？ 为什么当我单击对象旁边而不是其上时，对象也会相交？并且由于光线进入和退出对象，对象总是在相交数组中包含两次吗？
代码的工作示例如下:
https://codepen.io/ettir_deul/pen/PoGLNZx
(点击屏幕后打开控制台即可看到相交数组)
代码如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="libs/three.min.js.r116.1"></script>
</head>
<body>
<div id="threejsCanvas"></div>
<script>
let scene, center, camera, renderer, raycaster;
const mouse = new THREE.Vector2();
const threejsCanvas = document.getElementById("threejsCanvas");
init3d();
function init3d(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0xAAAAEE);
center = new THREE.Vector3(0, 0, 0);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(center.x, center.y, center.z+1);
camera.lookAt(center);
buttonMesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), new THREE.MeshBasicMaterial({map : null, color: 0x008844, wireframe: false, side: THREE.DoubleSide}));
buttonMesh.position.set(center.x, center.y, center.z);
scene.add(buttonMesh);
buttonMesh.objId = "buttonMesh";
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
threejsCanvas.appendChild(renderer.domElement);
renderer.render(scene, camera);
raycaster = new THREE.Raycaster();
document.addEventListener('click', onMouseClick, false);
}
function onMouseClick(event){
event.preventDefault();
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObjects(scene.children);
console.log(intersects);
}
</script>
</body>
</html>
最佳答案
两次获取对象的原因是
side: THREE.DoubleSide
在 Material 中。您可以使用THREE.FrontSide
鼠标靠近时拾取对象的原因是 Canvas 和窗口尺寸不相等。 如果添加:
body{
padding: 0;
margin: 0;
}
在CSS中它是固定的。
这是一个codepen有效。
关于javascript - Threejs 中鼠标相机光线转换的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/65794285/