UD5工具箱
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
3D 模型
立方体
球体
圆柱体
圆锥体
平面
圆环
环形结
十二面体
灯光
环境光
点光源
方向光
聚光灯
半球光
🖱️ 左键旋转 | 滚轮缩放 | 右键平移 | 点击选中 | 拖拽资源到此处
点击场景中的对象
查看和编辑属性
场景中暂无对象
常见问题与知识点
如何添加3D模型到场景中？
从左侧资源面板拖拽任意模型（如立方体、球体）到中央画布区域释放即可。也可以直接点击资源项快速添加到场景中。
如何调整模型的位置和旋转？
首先点击场景中的对象选中它，然后在右侧属性面板中修改位置、旋转、缩放数值。也可以使用TransformControls直接在场景中拖拽移动。
灯光类型有什么区别？
环境光均匀照亮整个场景；点光源从一点向四周发光；方向光平行光线适合模拟太阳；聚光灯锥形光束；半球光模拟天空和地面的渐变光照。
支持哪些3D几何体？
支持立方体、球体、圆柱体、圆锥体、平面、圆环、环形结、正十二面体等基础几何体，覆盖了Three.js中最常用的几何形状。
如何导出我的场景？
点击工具栏的截图按钮可以将当前3D视图保存为PNG图片。场景数据可以通过浏览器开发者工具获取完整的Three.js场景对象。
移动端可以使用吗？
完全支持。在手机和平板上，侧边面板会自动变为浮层，您可以通过按钮切换显示。触屏手势支持旋转、缩放和平移场景。
3D多层阴影生成器 - 拟物化立体感
通过堆叠多层text-shadow或box-shadow创造浮雕或厚重立体文字效果，复制代码。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
内存分页替换模拟 - FIFO/LRU/OPT动画
设定物理页框数，输入页引用串，动画展示不同页面置换算法的缺页率。
图层混合模式演示 - 叠加/柔光等在线比较
上传两张图片，实时切换并预览正片叠底、滤色、叠加等多种混合模式效果。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
视差背景生成器 - 纯 CSS 多层效果
上传图片并设置层位置和滚动速度，生成纯 CSS 的多层视差滚动背景代码。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
视差层构建器 - 多层滚动的HTML模板
配置多个背景层或前景层，设定各层滚动速度因子，生成完整视差页面代码。
现代平滑阴影生成器 - 多层阴影叠加
通过叠加多个阴影创建柔和且真实的UI投影，导出CSS。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
Flexbox 高级演练场 - 所有属性可视化控制
通过滑块和开关调整 Flex 容器和子项的所有 CSS 属性，实时观察布局变化，理解弹性盒子。
CSS混合模式实演 - background-blend-mode
选择多张图片或纯色叠加，切换所有CSS混合模式并实时预览图层效果。
CSS 3D 立体文字生成器 - 多层阴影叠加
通过多层 text-shadow 叠加生成具有厚度和光照感的 3D 文字效果。
HTML转JSX工具 - React组件代码转换
将普通HTML标记转换为符合JSX语法的代码，自动处理class→className、行内样式对象化等。
Catmull-Clark 细分曲面演示 - 控制网格迭代
载入简单控制网格，执行 Catmull-Clark 细分一次，观察光滑效果。
洛伦兹吸引子绘制 - 三维蝴蝶曲线投影
用Canvas绘制经典的洛伦兹吸引子轨迹，可拖拽旋转视角展示蝴蝶形奇怪吸引子。
Web App Manifest 图标预览 - 模拟主屏图标效果
上传图标文件并设置背景色，模拟在 Android/iOS 主屏幕上的添加效果，检查视觉适配。
预设动画库 - 常用CSS关键帧
浏览并一键复制常见CSS动画（跳动、淡入、滑动等）的@keyframes代码。
多层阴影生成器增强版 - 可添加多个光源
叠加多重box-shadow，模拟不同光源方向，直观生成逼真阴影CSS代码。
图片幻灯生成器 - 序列帧转视频WebM
上传一组图片，设定每张展示秒数和转场，生成WebM视频幻灯。
CSS Contain 属性演示 - 观察布局/样式/尺寸限制效果
应用 contain 的各种值（layout, paint, size），直观对比开启前后渲染和布局的变化。
Dialog 元素生成器 - 原生模态框样式定制
可视化配置<dialog>元素外观与行为，生成现代化、无障碍友好的模态框代码。
多层阴影层设计器 - 拟物化/纸雕效果
添加多个阴影层，独立调节每层的偏移、模糊、扩展和颜色，创造复杂立体效果。
CSS 自定义属性演练场 - 动态修改 var() 看效果
定义多个 CSS 自定义属性，通过滑块或颜色选择器实时修改并查看页面整体风格变化。
Cypress 测试场景构建器 - 点选生成测试代码
可视化选择操作（访问、点击、断言等），自动生成 Cypress 测试代码。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
CSS 光标样式预览工具 - 所有内置光标效果展示
列出所有标准 CSS 光标值（pointer, grab, zoom-in 等），鼠标悬停实时查看对应光标样式并复制代码。