当Gemini 2.5遇见Three.js，彻底解决教学演示动画制作

Three.js 就是一个让网页能显示“立体”图像的工具。你可以把它想象成：

• 它提供了一套工具，让开发者可以在网页上画出各种 3D 的形状，比如立方体、球体等等。
• 它还能让这些 3D 形状动起来，实现各种动画效果。
• 它能控制光线、阴影、材质等等，让 3D 场景看起来更真实。

用更通俗的话来说：

以前网页只能显示平面的东西，但有了 Three.js，网页就能显示立体的、可以旋转、可以动的 3D 图像了。这让网页变得更生动、更有趣。

我们使用大模型生成各类型代码，而直接生成 Three.js 代码效果会如何？Gemini 2.5 给出了答案。

以下是海外大神给出的示例：

制作这类3D效果难度如何？

动画展示的物理特性是否准确？

准确。

不懂代码能否做到类似的效果？

能，但是无法做到很精美。

使用Gemini 2.5是否是免费的？

在 Gemini（使用简单） 每日有限制。Google AI Studio（使用难） 中免费使用，但无法直接预览演示效果。

一起制作一个包含物理特性3D演示动画

前提条件

1.首先你要可以正常访问https://gemini.google.com/，并正常登录的账号。

2.记住这个关键词“Three.js”。

3.选择“Gemini 2.5 Pro”模型，并选中对话框中“Canvas”。

假装是“物理老师”，要给学生讲解关于引力的概念。要做的第一步，自然是快速让AI给出讲解方案。

提示词：

作为中学物理老师，给学生在课堂中讲解“引力”概念，这是一趟入门课程，学生刚刚学习此内容。我希望通过3D动画演示的方式让学生通过视觉轻松理解其原理，请用文字描述这个动画演示应该包含什么效果可以让学生更好的理解并产生兴趣，你要想象出动画演示的效果，并对其进行准确且符合逻辑的详细描述。

这是一个3D演示动画，仅允许有一个动画效果，动画效果要确保足够简单，但描述要详细。下面仅用文字描述出该3D演示动画的效果，开始描述：

好，下面我得到了一些灵感，让我们直接使用把：

3D演示动画：苹果落地的引力展示

动画场景：
动画背景为一片宁静的绿色草地，上方有一棵结满红色苹果的大树。阳光柔和洒落，天空蔚蓝，营造出一种自然和谐的氛围。

动画效果：
画面中央，一个鲜红的苹果挂在树枝上，轻微晃动。随着时间流逝，苹果的果柄逐渐变细，最终断裂，苹果开始下落。

当苹果离开树枝的瞬间，屏幕中央浮现出“引力”两个字（透明、轻微发光），随后慢慢消失。苹果以均加速运动向下掉落，在靠近地面时，运动轨迹被短暂放慢，以便学生观察苹果落地前的加速过程。

落地瞬间：
当苹果接触草地时，轻微弹起一点点，然后安静地停在草地上。与此同时，一条简洁的白色箭头出现在苹果上方，指向地面，表示重力方向，并伴随短暂的文字提示：“重力始终指向地面”。

动画总结：
苹果静静地躺在草地上，画面缓缓拉远，结束动画。整个过程中，动画保持流畅、简洁，聚焦于展示重力如何作用于物体，使学生直观理解“重力让物体加速下落，并指向地面”。

在上述提示词前，加入一句话：

使用 Three.js 生成关于“引力”概念的3D动画。注意动画不要超出边界，确保物理特性准确，使用OrbitControls查看动画不同视角。

得到以下动画：