在3js中为多维数据集添加点击事件监听器

Question

在我的代码中，我有两个多维数据集，我想向它们添加click事件监听器。例如，警告用户单击了哪个多维数据集。当我将click事件侦听器添加到文档中时，它工作得很好，但是当我将相同的click事件侦听器添加到多维数据集时，它没有显示任何内容。这是我的代码部分。

<script type = "text/javascript" src = "three.min.js"></script>
<script type="text/javascript">
var camera = new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,0.1,1000);
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
camera.position.z=30;

var geometry = new THREE.CubeGeometry(10,10,10);
var material = new THREE.MeshBasicMaterial({color:0x778899});
var cube = new THREE.Mesh(geometry,material);
cube.addEventListener("mousedown", onDocumentMouseDown, false);
cube.position.x = -10;
scene.add(cube);

var cube1 = new THREE.Mesh(geometry,material);
cube.addEventListener("mousedown", onDocumentMouseDown, false);
cube1.position.x=10;
scene.add(cube1);

var render = function(){
    var timer = Date.now()*-0.0002;
    requestAnimationFrame(render);
    camera.position.x = 30* Math.cos(timer);
    camera.position.z = 30* Math.sin(timer);

    camera.lookAt(scene.position);
    renderer.render(scene,camera);
};

render();

function onDocumentMouseDown(event){
    alert('hi');
}
</script>

Answer 1

addEventListener只能用于DOM元素。看到 EventTarget.addEventListener（）

如果要在Three.js场景中选择对象，则应查看Three.js Raycaster

光线投射器基本上将光线从相机发送到场景中，并返回与光线相交的对象数组。要使用Raycaster，您需要附加addEventListener到窗口对象或Three.js画布。

例如： window.addEventListener( 'mousemove', onMouseMove, false );

在Three.js示例页面上有很多使用Raycaster的示例。