AI开发HTML实战系列第106期 | 如何用HTML设计几何图形嵌套嵌套几何体动画十层嵌套 · 六种图形Three.js把数学之美变成旋转的线框雕塑大家好，我是老狗。前期我给大家分享过一些展示数学和物理之美的HTML动画，可以说欣赏起来也很舒心。今天我再给大家演示一个如何用HTML展示立体图形嵌套的动画。想象一下：十个几何体从大到小层层包裹，相邻层旋转方向相反，内层转得飞快，外层缓慢优雅——就像一颗机械行星齿轮组，又像一朵三维的万花筒。你可以随意切换立方体、四面体、二十面体……每个图形都自带霓虹线框，悬浮在星空之中。话不多说，立即开搞。最终效果：Three.js场景 + 10层嵌套几何体（半径3.2→0.5）+ 下拉菜单切换六种图形（立方体/四面体/八面体/二十面体/十二面体/球体线框）+ 开始/停止旋转控制（内快外慢、相邻反向）+ 线框材质暖橙→蓝紫渐变 + 星空粒子背景 + 半透明网格地面 + 动态点光源 + 鼠标拖拽/缩放 + 逐层淡入动画。01 最大的坑：每层独立旋转，又不能打破嵌套位置乍一听很简单：创建10个网格，半径依次减小，放到场景中央，每帧分别绕Z轴旋转。但问题来了——如果每层都是独立的Mesh，且都绕世界坐标系的Z轴旋转，那么它们虽然半径不同，但旋转中心都是世界原点，看起来就像“大圈套小圈”各自转，实际上位置是对的。但更美观的设计是让它们看起来像“套娃”：所有几何体共享同一个中心点，各自绕自身的Z轴旋转（本质也是世界Z轴，因为物体中心都在原点）。这没问题。✅ 正确做法：独立mesh + 不同旋转速度和方向为每一层创建一个单独的Mesh，设置其scale（或直接使用不同半径的几何体）。旋转速度按层数线性插值：最外层速度最慢（例如 0.005 rad/frame），最内层最快（0.03 rad/frame）。相邻层方向相反，用符号 (-1)^i 控制。反向旋转会让视觉上更加缠绕、立体感强。⚠️ 另一个易错点：切换图形时重建所有层，淡入动画不能断下拉菜单切换几何体类型时，需要销毁旧的网格数组，然后按照新类型重新生成10层（每个层使用相同的几何体类型，只是半径不同）。并且为了平滑过渡，要求“淡入动画”——即新生成的网格初始透明度为0，然后逐渐增加到1。同时旋转速度和方向状态要保留，继续动画。这需要精细管理材质透明度（或整体opacity），并配合requestAnimationFrame做渐进渐变。02 视觉与运动设计：速度梯度 + 颜色渐变嵌套几何体动画的惊艳程度取决于两个要素：旋转的层次感与色彩的韵律。🎡 旋转策略（内快外慢，相邻反向）• 最外层（第0层）速度系数 0.2，最内层（第9层）速度系数 1.0，中间线性插值。• 方向：偶数层正向（+），奇数层反向（-）。这样相邻层总是相对转动，产生“差速扭动”的视觉效果。• 开始/停止按钮控制一个全局布尔变量，暂停时所有层的角度增量不再累加，恢复时继续。🌈 线框颜色：从暖橙渐变到蓝紫每个几何体使用 LineBasicMaterial 或 MeshBasicMaterial 的 wireframe 属性（注意：需要设置材质为线框模式，无填充）。颜色根据层数 i（0～9）进行 HSL 插值：起点色相 30°（橙色），终点色相 280°（蓝紫色）。也可以直接用十六进制插值。为了更炫酷，还可以给线框添加发光效果（使用 emissive 或后期，但基本版已足够）。03 提示词由于Three.js的API繁多且版本更新快，提示词必须明确几何体生成方式、旋转逻辑和切换动画细节。以下是完整提示词：完整提示词：请用Three.js实现一个嵌套几何体动画，具体要求如下： 嵌套层数：10层，从外到内尺寸逐渐缩小（半径从约3.2递减到0.5）。 可切换图形类型：提供下拉菜单，支持立方体、四面体、八面体、二十面体、十二面体、球体线框这六种几何体。切换时平滑替换所有嵌套层，并带有淡入动画。 旋转控制：添加一个“开始/停止”按钮，控制所有几何体绕Z轴的旋转。旋转速度内层快、外层慢，且相邻层旋转方向相反。 视觉风格：每个几何体使用线框材质（无填充），颜色从暖橙色渐变到蓝紫色，按层渐变。背景为深蓝色星空（粒子系统），添加半透明网格地面和动态点光源。 支持鼠标拖拽旋转/缩放视角（OrbitControls）。 动画效果：页面加载时，10层几何体依次淡入。旋转动画流畅，使用requestAnimationFrame。 技术栈：Three.js（ES modules），无需额外脚手架，直接生成一个完整的HTML文件，包含样式和内嵌脚本。提示词关键约束解析：• “内层快、外层慢，相邻层旋转方向相反”——这是核心视觉效果。提示词清晰地指定了速度梯度，避免AI生成所有层相同速度的平庸方案。• “切换时平滑替换所有嵌套层，并带有淡入动画”——要求不仅仅是换几何体，还要有透明度渐变动画，这需要管理材质opacity或整体group的透明度过渡。• “线框材质（无填充）”——必须使用 wireframe 属性，并且不添加实色材质，保持科技感。• “星空粒子系统 + 动态点光源”——丰富背景层次，粒子系统需要随机生成大量点并缓慢旋转，点光源位置做圆周运动或随机移动。04 开发过程展示 已关注 关注 重播 分享 赞 视频详情 05 效果展示 已关注 关注 重播 分享 赞 视频详情 06 嵌套几何动画，还能用在哪些地方？这个动画本质上是一个“多层独立运动物体”的展示框架，稍加改造就能变成各种创意作品。🏛️ 建筑设计：参数化结构展示把几何体替换成不同形状的楼层框架，半径递减形成螺旋塔楼，反向旋转展示建筑内部结构。适合建筑系学生作品集。🧬 数据可视化：层次化数据每层代表一个数据维度，颜色代表数值，旋转速度和方向表示变化趋势。配合文字标签，可以做动态的树状结构图。🎮 游戏氛围装饰科幻风格游戏的主菜单或加载界面，加入这种嵌套旋转几何体，配合粒子系统，瞬间提升科技感。07 总结：让几何之美旋转起来怎么样，是不是很酷？这个嵌套几何体动画完美展示了Three.js在艺术化视觉表现上的强大能力。你不需要是一个数学家，只要理清“层次半径”、“旋转速度梯度”和“颜色插值”，就能创造出令人惊叹的3D作品。💡 3D动画类提示词的复用思路这个提示词已经封装了完整的“多层嵌套+可切换几何体+反向旋转”模式。想创作其他类似动画，只需修改三点：1. 几何体数组：换成你自己定义的一组形状（环形、圆环结、柱体等）。2. 运动规律：改变速度曲线（比如正弦变化）或旋转轴（X/Y/Z同时转）。3. 视觉主题：替换颜色渐变、背景粒子、光照颜色。其他如淡入切换、OrbitControls、开始/停止控制等全部保留。把这个模板收藏好，以后做任何Three.js动效都能快速起手。📦 源文件获取方式关注公众号，后台回复“嵌套几何体”即可免费获取完整HTML源文件（含Three.js场景、图形切换）每一层，都是空间与节奏的诗歌当内层高速反向旋转，外层缓缓呼应看到的不仅是几何，更是秩序与动感的平衡
夜雨聆风
