three.js 编辑器的事件系统解析-港品优选

three.js 编辑器的事件系统解析

本文围绕three.js 编辑器（一款基于 Three.js 的 AI 驱动可视化低代码编辑器）展开。

- 🌐 在线预览： https://z2586300277.github.io/threejs-editor/

- 📦 GitHub 开源仓库： https://github.com/z2586300277/three-editor

- 📚 文档地址： https://z2586300277.github.io/three-editor/docs/dist

3D 场景不是静态图片，用户需要与模型、UI 标注、数据点进行交互。three.js 编辑器没有把这些交互硬编码进内核，而是提供了一套轻量却足够灵活的事件系统，让组件、模型和外部脚本都能以统一方式响应点击、双击、悬停等操作。

事件总线：从射线检测到组件回调

编辑器的事件入口是getSceneEvent。当用户在画布上双击时，底层会做一次 Raycaster 射线检测，命中信息经过整理后向上抛出。核心代码位于editor.vue的getEvent中：拿到命中对象后，会尝试调用该对象或其父级上挂载的EVENTCALL。这种设计让事件处理既可以写在单个 Mesh 上，也可以写在 Group 或组件根节点上，层级传播非常自然。

EVENTCALL接收一个 info 对象，里面包含object、rootObject、point、uv等常用信息。组件作者无需自己写射线检测，只需专注于“被点中了要做什么”。这降低了交互开发的心智负担，也让同一套事件语义在 AI 调用和人类编辑之间保持一致。

组件级事件映射

在“组件事件映射”示例组件中，three.js 编辑器展示了一种典型用法：一个 Group 里包含立方体、圆锥体和外部加载的猴头模型。Group 上挂载EVENTCALL，根据object.name分发行为——立方体变色、圆锥体随机缩放与透明度变化、猴头旋转。这种方式把事件处理与场景结构绑定，而不是分散在全局脚本里，维护了良好的代码局部性。

group.EVENTCALL = (info) => {let { object } = info; switch (object.name) { case '立方体': object.material.color.setHex(Math.random() * 0xffffff); break; case '圆锥体': object.material.opacity = Math.random(); gsap.to(object.scale, { x: Math.random()2, y: Math.random()2, z: Math.random() * 2 }); break; default: while (object && !object.isEvent) object = object.parent; gsap.to(object.rotation, { y: Math.random()Math.PI2 }); break; } };

事件与选择、变换的解耦

three.js 编辑器把“选择对象进行变换”和“触发对象事件”做了明确区分。顶部工具栏有“选中 / 平移 / 旋转 / 缩放 / 预览”五种模式，只有在非预览模式下，点击才会触发 TransformControls 的附加；而双击则固定走事件回调。这种解耦避免了拖拽对象时误触发事件，也让事件回调可以独立做动画、弹窗、数据请求等副作用。

事件系统的延伸能力

事件系统还与 CSS2D/CSS3D 标注、iframe3d、UI 表单等组件联动。例如热点信息组件会在被点击时显示详情卡片，音乐播放器组件会响应点击播放。由于事件回调运行在 Three.js 对象层面，理论上任何 DOM 操作、网络请求、状态变更都可以被注入，从而把 3D 场景变成真正的应用入口。

资源释放与事件清理

当组件被删除时，REMOVECALL钩子负责清理事件监听与引用。对于在create中手动绑定的 DOM 事件，组件作者应在REMOVECALL中移除；否则切换场景或删除对象时可能出现内存泄漏。three.js 编辑器通过统一的disposeObject3D配合组件自定义钩子，让事件系统既灵活又安全。

代码一瞥

下面是一段在自定义组件中声明双击事件的最小示例：

export default {name: 'clickableSign', label: '可点击标牌', create(storage, { scene }) { const group = new THREE.Group(); const board = new THREE.Mesh( new THREE.BoxGeometry(2, 1, 0.1), new THREE.MeshStandardMaterial({ color: 0x3b82f6 }) ); group.add(board);
group.EVENTCALL = (info) => { const { object } = info; gsap.to(object.scale, { x: 1.2, y: 1.2, z: 1.2, duration: 0.2, yoyo: true, repeat: 1 }); };
group.REMOVECALL = () => { board.geometry.dispose(); board.material.dispose(); };return group; } };

通过EVENTCALL，three.js 编辑器把射线检测、对象层级与业务响应彻底解耦。你只需关心“用户点中了我的组件后该发生什么”，剩下的交给编辑器事件系统即可。

企业官网建设流程全解析