• Y AnimationPlayground
研究工作台
  • 实验总览
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

Three.js 示例

2 个示例

在稳定的分类入口内逐个验证 Three.js 与 ThreeUI 示例;新增 Demo 继续追加 Tab。

返回 Three.js 实验
Sylva / Living Greensandbox iframe本地资源
Step into the living world
官方完整页面示例:苔藓根系、花朵、蕨类、漂浮花粉、蝴蝶和液态金属控件共同运行在隔离的 WebGL 页面中。
查看官方页面独立窗口查看
Sylva / Living Green 场景正在加载
组件入口
@designcodeio/threeui/components/SylvaHero
运行边界
sandbox iframe + 完整 HTML 页面
本地静态文件
5 个运行文件 · 1.39 MiB
网络依赖
场景运行时无外部请求
框架兼容性
peer dependency 全部满足;真正需要管理的是运行边界和静态资源,而不是 React 版本冲突。
层当前项目ThreeUI 要求结论
React19.2.4>= 18 < 20兼容
Three.js0.185.1>= 0.149 < 1兼容
Node.js>= 22>= 20(Pro CLI)兼容
浏览器现代桌面与移动浏览器WebGL / WebGL2兼容(已实测)
适合放进 Playground 的原因
  • 完整保留原作 DOM、CSS、WebGL、滚动和指针交互。
  • 资源全部落在本地 public 目录,预览不依赖第三方 CDN。
  • iframe 卸载时会连同内部 WebGL 上下文一起离开当前路由。
  • 原页面已经处理 DPR 上限、hover/pointer 条件和 reduced motion。
不能忽略的代价
  • iframe 内部无法直接消费本项目主题 token 或共享 React 状态。
  • 完整页面携带自己的 Three.js 运行时,与现有实验的 0.185.1 不复用。
  • 不能直接读取 renderer.info,也不适合拆成业务级 React 组件。
  • npm 安装包含整个 Community 目录及两个兼容 Three.js 版本,本地依赖约增加 104 MiB。