2026/4/18 14:41:23
网站建设
项目流程
网站收录率,淮安市建设局网站,wordpress excel插件,建设外贸网站注意什么绑定与移除事件#xff0c;只需记住 add/removemapvthree 复用了 Three.js 的 addEventListener / removeEventListener#xff0c;所以任何继承自 Object3D 的对象都能直接绑定事件。引擎内部的调度器会帮我们处理拾取、命中检测等复杂逻辑#xff0c;我们只需要专注于“监…绑定与移除事件只需记住 add/removemapvthree 复用了 Three.js 的 addEventListener / removeEventListener所以任何继承自 Object3D 的对象都能直接绑定事件。引擎内部的调度器会帮我们处理拾取、命中检测等复杂逻辑我们只需要专注于“监听哪一个对象”和“响应什么事件”。const box engine.add(new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10),new THREE.MeshBasicMaterial({color: 0xaa0000}),));const handleClick (e) {console.log(盒子被点击地理坐标, e.point);box.removeEventListener(click, handleClick); // 一次性事件};box.addEventListener(click, handleClick);常见事件click、dblclick、mousemove、mouseenter、mouseleave、pointerdown、pointerup 等一定记得在物体移除或销毁前调用 removeEventListener避免内存泄漏EventParam 里的信息足够丰富每次事件触发回调都会收到统一的 EventParam其中最常用的字段如下属性 说明target / currentTarget 触发事件的对象、绑定事件的对象position 鼠标在世界坐标中的位置Array[3]point 鼠标在地理坐标中的位置经纬度index / entity 当事件来自支持 dataSource 的图层时可获取对应的数据索引和实体event 原始浏览器事件对象box.addEventListener(mousemove, (e) {if (e.position) {helper.position.fromArray(e.position); // 在 3D 空间显示鼠标所在点}});注意当事件绑定在 engine.map 这类场景根对象上时只能拿到 position 和 point其它字段不存在。事件不仅限于几何体根对象也能监听可以在可视化图层、地图根节点甚至 engine.map 上绑定事件从而实现不同层级的交互。例如engine.map.addEventListener(pointerdown, () {engine.clock.currentTime new Date(2025-05-15 18:00:00);});engine.map.addEventListener(pointerup, () {engine.clock.currentTime new Date(2025-05-15 14:00:00);});这段代码演示了如何在地图级别监听按下/抬起事件并根据交互切换天空时间。事件冒泡必要时调用 stopPropagation事件从子节点向父节点冒泡沿着场景树一直传递到根对象。我们可以利用冒泡做统一处理也可以在需要时阻止冒泡。ear.addEventListener(click, (e) {alert(点击到了耳朵);e.stopPropagation(); // 阻止继续触发头部或整个人的点击事件});head.addEventListener(click, () alert(点击到了头像));human.addEventListener(click, () alert(点击到了整个人));当需要在某个层级拦截事件时记得调用 stopPropagation()。使用建议善用一次性事件如果某个事件只需要触发一次回调里立即调用 removeEventListener。场景根对象的事件仅能获取位置坐标适合做“全局点击”或“拖拽地图切换模式”之类的功能。粒度控制能在具体对象上监听就不要放在根节点粒度越精细代码越容易维护。性能提示事件调度器会在帧末集中处理并做异步、去重等优化正常使用不必担心性能问题。学习笔记就到这里事件系统本身并不复杂关键是熟悉 addEventListener、EventParam 和冒泡这几个核心概念。掌握它们之后构建交互式地图就顺手多了。希望这份笔记也能帮到你