news 2025/12/25 11:48:57

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
JSAPIThree 事件系统学习笔记:处理交互的基础

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

mapvthree 复用了 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 和冒泡这几个核心概念。掌握它们之后,构建交互式地图就顺手多了。希望这份笔记也能帮到你!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2025/12/23 23:57:52

6-4 WPS JS宏 不重复随机取值应用

1.示例:function 不重复随机取值(){var snew Set();if(10-1>8){while(true){var numWorksheetFunction.RandBetween(1,10);//RandBetween(1,10)为随机函数s.add(num);if(s.size8){break};//size为集合的个数}}var arr[...s]Console.log(${arr})}function 不重复随…

作者头像 李华
网站建设 2025/12/20 13:19:56

《余行论》第七篇:历史篇

第七篇:历史篇——文明如长河,兴衰皆余行引言:历史是宇宙的备忘录,还是人类的独白?历史是什么?是帝王将相的谱系,是战争与和平的循环,是生产力进步的阶梯,还是偶然事件的…

作者头像 李华
网站建设 2025/12/24 23:22:43

《余行论》第九篇:证验篇

第九篇:证验篇——理可玄思,亦可实证引言:从哲学构想到科学纲领前八篇构建的“余行论”,以其宏大的视野与内在的融贯性,描绘了一幅从宇宙本源到人类文明的统一图景。然而,一个深邃的哲学思辨若想真正成为推…

作者头像 李华
网站建设 2025/12/21 19:29:23

构建动态响应式动画架构:lottie-ios与现代数据流技术融合实践

构建动态响应式动画架构:lottie-ios与现代数据流技术融合实践 【免费下载链接】lottie-ios airbnb/lottie-ios: Lottie-ios 是一个用于 iOS 平台的动画库,可以将 Adobe After Effects 动画导出成 iOS 应用程序,具有高性能,易用性和…

作者头像 李华
网站建设 2025/12/16 21:09:58

小程序商城搭建 自带拼团砍价功能 快速引爆销量

小程序商城搭建的核心技术框架微信小程序开发基础:WXML/WXSS/JavaScript后端技术选型:Node.js/Python(Django/Flask)或PHP(ThinkPHP/Laravel)数据库设计:MySQL/MongoDB存储用户、订单、拼团数据…

作者头像 李华