JSAPIThree 事件系统学习笔记：处理交互的基础

作为刚接触 mapvthree 的新手，今天我专门学习了事件系统。这里汇总最实用的内容，帮助和我一样的初学者快速掌握交互的核心用法。

绑定与移除事件，只需记住 add/remove

mapvthree 复用了 Three.js 的 addEventListener / removeEventListener，所以任何继承自 Object3D 的对象都能直接绑定事件。引擎内部的调度器会帮我们处理拾取、命中检测等复杂逻辑，我们只需要专注于“监听哪一个对象”和“响应什么事件”。

1. const box = engine.add(new THREE.Mesh(
2.     new THREE.BoxGeometry(10, 10, 10),
3.     new THREE.MeshBasicMaterial({color: 0xaa0000}),
4. ));
6. const handleClick = (e) => {
7.     console.log('盒子被点击，地理坐标：', e.point);
8.     box.removeEventListener('click', handleClick); // 一次性事件
9. };
11. box.addEventListener('click', handleClick);

复制代码

• 常见事件：click、dblclick、mousemove、mouseenter、mouseleave、pointerdown、pointerup 等
  
• 一定记得在物体移除或销毁前调用 removeEventListener，避免内存泄漏
  

EventParam 里的信息足够丰富

每次事件触发，回调都会收到统一的 EventParam，其中最常用的字段如下：
属性说明target / currentTarget触发事件的对象、绑定事件的对象position鼠标在世界坐标中的位置（Array[3]）point鼠标在地理坐标中的位置（经纬度）index / entity当事件来自支持 dataSource 的图层时，可获取对应的数据索引和实体event原始浏览器事件对象

1. box.addEventListener('mousemove', (e) => {
2.     if (e.position) {
3.         helper.position.fromArray(e.position); // 在 3D 空间显示鼠标所在点
4.     }
5. });

复制代码

注意：当事件绑定在 engine.map 这类场景根对象上时，只能拿到 position 和 point，其它字段不存在。

事件不仅限于几何体，根对象也能监听

可以在可视化图层、地图根节点甚至 engine.map 上绑定事件，从而实现不同层级的交互。例如：

1. engine.map.addEventListener('pointerdown', () => {
2.     engine.clock.currentTime = new Date('2025-05-15 18:00:00');
3. });
4. engine.map.addEventListener('pointerup', () => {
5.     engine.clock.currentTime = new Date('2025-05-15 14:00:00');
6. });

复制代码

这段代码演示了如何在地图级别监听按下/抬起事件，并根据交互切换天空时间。
事件冒泡：必要时调用 stopPropagation

事件从子节点向父节点冒泡，沿着场景树一直传递到根对象。我们可以利用冒泡做统一处理，也可以在需要时阻止冒泡。

1. ear.addEventListener('click', (e) => {
2.     alert('点击到了耳朵');
3.     e.stopPropagation(); // 阻止继续触发头部或整个人的点击事件
4. });
5. head.addEventListener('click', () => alert('点击到了头像'));
6. human.addEventListener('click', () => alert('点击到了整个人'));

复制代码

当需要在某个层级拦截事件时，记得调用 stopPropagation()。
使用建议

• 善用一次性事件：如果某个事件只需要触发一次，回调里立即调用 removeEventListener。
  
• 场景根对象的事件：仅能获取位置坐标，适合做“全局点击”或“拖拽地图切换模式”之类的功能。
  
• 粒度控制：能在具体对象上监听就不要放在根节点，粒度越精细，代码越容易维护。
  
• 性能提示：事件调度器会在帧末集中处理，并做异步、去重等优化，正常使用不必担心性能问题。
  

学习笔记就到这里！事件系统本身并不复杂，关键是熟悉 addEventListener、EventParam 和冒泡这几个核心概念。掌握它们之后，构建交互式地图就顺手多了。希望这份笔记也能帮到你！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！