news 2026/5/1 9:51:47

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/5/1 6:04:32

TruffleHog实战指南:构建企业级凭证安全防护体系

在数字化时代,代码中意外泄露的API密钥已成为企业安全的最大隐患。根据最新安全分析报告,超过80%的数据泄露事件源于硬编码凭证,而平均检测周期长达数月之久。本文将带你构建一套完整的凭证安全防护体系,通过TruffleHog生态工具实…

作者头像 李华
网站建设 2026/5/1 5:05:22

React Native图像识别技术突破:构建高性能移动视觉应用

React Native图像识别技术突破:构建高性能移动视觉应用 【免费下载链接】react-native-vision-camera 📸 A powerful, high-performance React Native Camera library. 项目地址: https://gitcode.com/GitHub_Trending/re/react-native-vision-camera …

作者头像 李华
网站建设 2026/5/1 5:02:43

Miniforge离线部署终极指南:无网环境快速构建Python数据科学平台

Miniforge离线部署终极指南:无网环境快速构建Python数据科学平台 【免费下载链接】miniforge A conda-forge distribution. 项目地址: https://gitcode.com/gh_mirrors/mi/miniforge 在科研实验室、企业内网、野外作业等特殊场景中,网络连接往往成…

作者头像 李华
网站建设 2026/4/30 13:58:04

DeepSeek-Prover-V2终极指南:671B参数定理证明AI的完整教程

DeepSeek-Prover-V2终极指南:671B参数定理证明AI的完整教程 【免费下载链接】DeepSeek-Prover-V2-671B 项目地址: https://ai.gitcode.com/hf_mirrors/deepseek-ai/DeepSeek-Prover-V2-671B 在人工智能与数学定理证明的交叉领域,DeepSeek-Prover…

作者头像 李华