【免费下载链接】editonnyLocal video editing through conversation. Created by Matheus Gomes.项目地址https://gitcode.com/gh_mirrors/ed/editonny点击查看免费下载editonny 是一个本地运行的对话式视频剪辑工具开源、免费你只需用自然语言描述剪辑意图它就能自动完成剪辑、字幕与动效合成。本文聚焦它的 3D 场景运行时动效画面基于 Three.js 构建核心能力是任意时间寻址——把场景拖到时间轴上任意一秒画面都能精确重放到那一刻。一、什么是任意时间寻址普通网页动画通常靠每帧累加推进这一帧旋转 1°下一帧再转 1°。这种写法在预览时没问题但一旦剪辑工具需要跳转到时间轴任意位置重渲染逐帧抽帧、seek 预览、渲染导出累加状态就会算错——跳过去的那段时间被欠账了。editonny 的 3D 场景反其道而行场景构建时返回一个纯函数draw(time)输入时间 → 输出该时刻的完整画面官方场景模板明确要求Never accumulate frame-to-frame state: seeking to the same time must produce the same frame禁止跨帧累积状态seek 到同一时间必须得到同一帧。这条规则写在场景开发文档 scenes/README.md 中是 editonny 3D 场景的宪法。它带来一个直接的好处预览画面与最终导出帧逐帧一致所见即所得。二、场景骨架three-scene.js 门面与 engine 模块3D 场景的统一入口是 three-scene.jsfacade 门面文件它把整个运行时 API 一次性导出类别主要 API作用渲染核心initialize初始化 WebGL 渲染器、相机、环境光照返回draw时间函数clamp/mix/smooth/interval/word/moment时间区间、缓动、口语词锚点相机函数orbit/mixPose/frameCamera/fittingDistance轨道相机与自动取景几何/材质plate/box/cylinder/volumeText/loadModel/mediaTexture实体、体积文字、GLTF 模型、贴图底层 Three.js 使用本地固定版本的资源three.module.min.js、GLTFLoader.js、RoomEnvironment.js放在 assets/three/ 目录保证离线渲染和版本一致性。三、draw(time)让重放成为可能的核心 API打开 stage.mjs 可以看到initialize的收尾逻辑核心片段const draw (t) { const tt clamp(Number(t) || 0, 0, DUR); // 时间被钳制在 [0, 时长] 内 update(tt); // 场景状态完全由 tt 推导 for (const tx of textures) tx.update(); // 同步贴图 renderer.render(scene, camera); // 渲染该时刻画面 };要点只有两个一切状态都是时间的函数——物体旋转角、阴影位置、标签透明度全部由传入的t计算得出而不是上一帧残留时间做钳制seek 超出范围也不会渲染异常帧。场景构建阶段还会做一次预演体检以 30fps 采样遍历整个时长检查相机路径是否会穿模进入物体内部命中就写入警告camera enters ... at xx s而不是等到导出时才发现。口语词锚点动画跟着人话走time.mjs里的word和moment工具支持用口播词而非绝对秒数定义动画时机例如内置场景 volume.html 中turn: { word: just, standard: 0.8 }, // 主角说到 just 时开始旋转若转写中找不到该词回退到standard的秒数。这让 3D 动效天然对齐语音节奏——正是对话式剪辑最需要的能力。四、相机取景orbit 与 fittingDistancecamera.mjs 把构图变成了数学问题orbit(camera, pose)用目标点 距离 方位角 仰角球坐标姿态确定相机mixPose可在两个姿态间平滑插值fittingDistance给定物体包围盒用二分搜索求出物体恰好完整落在安全区的相机距离自动取景不再靠手调frameCamera把视口对齐到画面安全区safeArea适配 9:16、4:5 等竖版格式。五、场景如何接入时间轴每个场景 HTML 把一个暂停的 GSAP 时间线注册到window.__timelines[id]并用一个代理时钟驱动 3D 渲染见 volume.htmlconst tl gsap.timeline({ paused: true }); tl.fromTo(clock, { t: 0 }, { t: DUR, duration: DUR, ease: none, onUpdate: () draw draw(clock.t) }, 0); window.addEventListener(hf-seek, () { if (draw) draw(clock.t); });播放/seek 由 HyperFrames 运行时驱动它跳到哪一秒就把时间线推到哪一秒draw(clock.t)立即重渲染——任意时间寻址就此闭环。自定义场景只需在 project.json 中注册文件与起止时间{scenes: [{file: compositions/scenes/xxx.html, start: 2, end: 7}]}即可。六、质量如何保障构建期python3 build.py hf lint/hf check校验组合结构见 project-template/README.md诊断面板window.__scene3d[id]暴露 ready 状态、警告列表、Three.js 版本与构建耗时自动化测试tests/three-engine.test.mjs 校验门面 API 完整性与时间函数边界值scripts/smoke_three.mjs 在真实浏览器里跑通实体、体积文字、贴图与标签的完整渲染冒烟测试。官方参考文档 references/3d.md 还强调只有真实几何、光照、相机与遮挡才算 3D平铺层 视差只能算 2.5D。七、小结editonny 的 3D 场景运行时可以概括为一句话用draw(time)纯函数取代逐帧累加用口语词锚点取代绝对时间用本地固定的 Three.js 保证确定性渲染。这套设计让对话式剪辑里的 3D 动效既能被任意 seek、又能被逐帧精确导出是本地、可复现、所见即所得理念的典型落地。想动手实践可参考 project-template 构建文档 与 3D 参考指南从内置场景 volume / exploded / path / screen 出发逐步替换成自己的几何体与台词锚点。赞分享【免费下载链接】editonnyLocal video editing through conversation. Created by Matheus Gomes.项目地址https://gitcode.com/gh_mirrors/ed/editonny点击查看免费下载相关推荐TexLab性能优化终极指南如何配置大型LaTeX项目获得最佳响应速度TexLab性能优化终极指南如何配置大型LaTeX项目获得最佳响应速度 TexLab是一款专为LaTeX设计的语言服务器协议实现能够显著提升大型LaTeX项three.js PropertyBinding 完全指南场景图属性绑定与动画 Track 寻址机制three.js PropertyBinding 完全指南场景图属性绑定与动画 Track 寻址机制 PropertyBinding 是 three.js 动3D渲染图形学前端Leva与Three.js集成在3D场景中实现实时参数调整的终极指南 Leva 是一个React优先的组件GUI库专门用于创建直观的参数控制面板。当它与强大的3D图形库Three.js结合时你可以轻松实现3D场景中参数的UI组件前端开发工具上一篇远程工作者的职业发展路径在中国科技公司的27个成长机会下一篇终极指南如何构建ElasticJob跨集群调度联邦架构创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考