Threejs中鼠标相机光线投射的问题 [英] Problem with mouse-camera raycasting in threejs
问题描述
我尝试在 Threejs 中使用可点击的 3d 对象制作一个非常简单的程序.我的代码基于
I try to make a very simple program with a clickable 3d object in Threejs. My code is based on
https://threejs.org/examples/#webgl_interactive_cubes
当我点击对象时它起作用(虽然结果数组包含对象两次，我假设是因为光线在进入和退出时与它相交).
It works when I click on the object (although the resulting array contains the object twice, I assume because the ray intersects it when entering it and when exiting it).
但是当我点击对象周围的区域时，raycaster.intersectObjects 会返回该对象，尽管它应该返回一个空数组.
But when I click in an area just surrounding the object raycaster.intersectObjects returns the object although it should return an empty array.
我做错了什么?为什么当我点击它旁边而不是在它上面时对象也会相交?并且由于光线进入和离开它，一个对象是否总是包含在相交数组中?
What am I doing wrong? Why is the object also intersected when I click next to it and not on it? And is an object always included twice in the intersect array because of the ray entering and exiting it?
代码的工作示例如下:
https://codepen.io/ettir_deul/pen/PoGLNZx
(点击屏幕后打开控制台查看相交数组)
(open the console to see the intersect array after you clicked on the screen)
代码如下:
<!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
在材料中.您可以使用 THREE.FrontSide
in the material. You can use THREE.FrontSide
鼠标靠近时拾取对象的原因是画布和窗口尺寸不相等.如果添加:
The reason for picking the object when the mouse is close is the canvas and window dimensions not being equal. If you add :
body{
padding: 0;
margin: 0;
}
在 CSS 中它是固定的.
in the CSS it is fixed.
这是一个有效的 codepen.
这篇关于Threejs中鼠标相机光线投射的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
