threejs Object的点击(鼠标)事件(获取点击事件的object)
objects=[]; raycaster = new THREE.Raycaster(); mouse = new THREE.Vector2(); //监听全局点击事件,通过ray检测选中哪一个object document.addEventListener("mousedown", (event) => { event.preventDefault(); this.mouse.x = (event.clientX / this.renderer.domElement.clientWidth) * 2 - 1; this.mouse.y = - (event.clientY / this.renderer.domElement.clientHeight) * 2 + 1; this.raycaster.setFromCamera(this.mouse, this.camera); this.scene.children.forEach(child => { if (child instanceof THREE.Mesh) {//根据需求判断哪些加入objects,也可以在生成object的时候push进objects this.objects.push(child) } }) var intersects = this.raycaster.intersectObjects(this.objects); if (intersects.length > 0) { console.log(intersects[0].object) } }, false)
官方demo:https://threejs.org/examples/canvas_interactive_cubes.html