news 2026/6/25 14:50:34

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/6/25 2:39:25

ATX自动化测试终极指南:从零开始快速上手

ATX自动化测试终极指南:从零开始快速上手 【免费下载链接】ATX Smart phone automation tool. Support iOS, Android, WebApp and game. 项目地址: https://gitcode.com/gh_mirrors/at/ATX ATX(AutomatorX)是一款由网易游戏团队开发的…

作者头像 李华
网站建设 2026/6/25 1:49:14

跨国企业合规痛点:多地区法规差异下的许可统一管理

跨国企业合规痛点:多地区法规差异下的许可统一管理在全球化加速发展的今天,越来越多的企业选择拓展国际市场,走向海外。跨国经营并非一条坦途,在许可合规管理方面,企业常常面临多地区法规差异带来的复杂问题。一个企业…

作者头像 李华
网站建设 2026/6/23 16:37:20

面向AI系统的数据隐私保护测试框架设计与实践

随着《个人信息保护法》和《数据安全法》的深入实施,AI系统数据隐私保护已成为测试工作的核心议题。2025年,全球数据泄露事件同比激增67%,其中AI模型训练与推理环节占比达41%。本文提出覆盖全生命周期的测试方案,帮助测试团队构建…

作者头像 李华
网站建设 2026/6/25 10:16:37

移动端自动化测试:工具选择与实战技巧深度解析

一、移动端自动化测试现状与挑战随着智能设备渗透率持续攀升,移动应用功能复杂度呈指数级增长。截至2025年,全球移动用户日均使用时长突破4小时,这对测试工作提出更高要求。传统手工测试面临三大瓶颈:设备碎片化(需覆盖…

作者头像 李华
网站建设 2026/6/24 21:47:23

升级竞价思维:从被动跟随到主动布局的策略进化

在亚马逊广告投放的竞技场中,“系统建议出价”曾像海妖的歌声一般,诱惑着无数卖家踏入高成本低回报的迷雾,直到越来越多的人发现,这一“友好”的工具背后,潜藏着一套精密的算法逻辑——它并非以卖家的利润最大化为目的…

作者头像 李华
网站建设 2026/6/25 1:38:00

汽车行业最严重漏洞:20家知名车企API暴露车主个人信息

汽车行业最严重漏洞:20家知名车企API暴露车主个人信息 近日安全研究人员Sam Curry披露了近20家知名汽车制造商在线服务中的API安全漏洞,这些漏洞可能允许黑客执行恶意活动,包括从解锁、启动、跟踪汽车到窃取客户个人信息。这可能是汽车行业迄…

作者头像 李华