news 2026/3/13 2:29:06

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/3/2 10:18:10

PAT 1140 Look-and-say Sequence

这一题是先给出一个数,然后进行N-1次循环,每一次循环生成一个新的字符串,每一个字符串是由上一轮循环统计每一个连续相同子串的出现次数和这个子串的对应的字符组成,比如 D 那么就是 D1(表示D出现一次) 我们…

作者头像 李华
网站建设 2026/3/11 11:03:33

Hazelcast与Kafka集成实战:构建企业级实时数据处理平台

Hazelcast与Kafka集成实战:构建企业级实时数据处理平台 【免费下载链接】hazelcast hazelcast - 这是一个分布式数据存储和计算平台,用于构建高性能、可扩展的应用程序。适用于实时数据处理、缓存、分布式计算等场景。特点包括高性能、可扩展 项目地址…

作者头像 李华
网站建设 2026/3/9 2:02:51

ZK暗战终局:STARK用哈希匕首撕碎「信任神殿」的数学圣战

一、STARK的三大技术突破 比特鹰解析STARK核心优势:透明化信任机制 无需预先生成可信参数(如Zcash的复杂仪式),所有参数通过公开哈希算法生成实测对比:参数生成效率比SNARK提升1000倍核心价值:彻底消除可信…

作者头像 李华
网站建设 2026/3/4 15:07:14

【CTF Web】从脚本小子到漏洞高手,落地路径直接抄!

一、入门阶段(1-2 个月):打好基础,搞定入门题 阶段目标:理解 Web 架构逻辑,独立破解 CTF Web 入门题(SQL 注入、XSS、弱口令),能使用基础工具抓包改包。 核心知识点&am…

作者头像 李华
网站建设 2026/3/3 8:13:55

终极毫秒转换指南:快速掌握时间格式转换技巧

终极毫秒转换指南:快速掌握时间格式转换技巧 【免费下载链接】ms 项目地址: https://gitcode.com/gh_mirrors/msj/ms.js 在JavaScript开发中,时间格式转换是一个常见但容易出错的任务。ms.js作为一款轻量级的毫秒转换工具库,能够让你…

作者头像 李华