news 2026/4/12 21:18:39

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进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/10 9:14:40

日一面】HTTP 和 HTTPS 的区别

基础问答问:HTTP 和 HTTPS 有什么区别?答:1. HTTPS 是 HTTP SSL/TLS 协议的一个组合,使用 SSL/TLS 加密,相对更安全。2. 端口使用不同,HTTP 使用 80 端口,HTTPS 使用 443 端口。3. HTTPS 由于加…

作者头像 李华
网站建设 2026/4/1 16:33:04

《余行论》第五篇:伦理篇

第五篇:伦理篇——伤彼即伤此,爱彼即爱己引言:伦理的根基危机与重构伦理,作为人类共同生活的准则,自轴心时代以来便深植于各大文明的核心。然而,现代社会正经历着深刻的伦理根基危机:宗教诫律的…

作者头像 李华
网站建设 2026/4/8 23:55:12

突破传统图表限制:Charticulator如何重塑你的数据可视化体验

突破传统图表限制:Charticulator如何重塑你的数据可视化体验 【免费下载链接】charticulator Interactive Layout-Aware Construction of Bespoke Charts 项目地址: https://gitcode.com/gh_mirrors/ch/charticulator 还在为标准化图表模板无法满足创意需求而…

作者头像 李华
网站建设 2026/4/11 3:59:09

123云盘脚本重构:全新体验配置手册

123云盘脚本重构:全新体验配置手册 【免费下载链接】123pan_unlock 基于油猴的123云盘解锁脚本,支持解锁123云盘下载功能 项目地址: https://gitcode.com/gh_mirrors/12/123pan_unlock 还在为123云盘的下载限制而困扰吗?想要享受VIP般…

作者头像 李华
网站建设 2026/4/12 14:31:43

VibeVoice语音合成框架:从技术原理到实际应用的全方位解析

VibeVoice语音合成框架:从技术原理到实际应用的全方位解析 【免费下载链接】VibeVoice-1.5B 项目地址: https://ai.gitcode.com/hf_mirrors/microsoft/VibeVoice-1.5B 微软开源的VibeVoice框架正在重新定义文本转语音技术的边界。这款创新性的语音合成系统不…

作者头像 李华