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/dist3D 场景不是静态图片用户需要与模型、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; } };通过EVENTCALLthree.js 编辑器把射线检测、对象层级与业务响应彻底解耦。你只需关心“用户点中了我的组件后该发生什么”剩下的交给编辑器事件系统即可。