3D编程学习路径

CreatiCode

介绍

CreatiCode.com提供了一套专为 3D 项目设计的强大且直观的代码块。这些代码块基于 Babylon.js 构建，Babylon.js 是由微软开发的尖端 3D 引擎，使学生可以更轻松地创建和试验 3D 环境。

alt text

尽管 CreatiCode 简化了 3D 编程的过程，但由于以下几个因素，它仍然比 2D 编程复杂：

广阔的场景: 与 2D 中物体被限制在平面上不同，3D 项目在广阔的三维空间中运行。这意味着需要管理更多元素，并且理解如何在这个空间中导航和定位物体至关重要。
高级渲染: CreatiCode 中使用的 3D 渲染引擎非常强大，但要掌握它需要更深入地了解光照、纹理和摄像机角度等概念。
复杂的碰撞处理: 在 3D 中管理物体之间的碰撞要复杂得多，因为它涉及考虑所有三个轴 (x, y, z) 并处理更复杂的形状和运动。
附加功能: 物理引擎和粒子发射器等工具可以通过逼真的运动和效果增强项目。但是，有效地使用它们需要额外的技能和学习。

对于 3D 编程新手，我们建议探索一系列旨在引导您了解基础知识的教程和项目。这些资源将帮助您逐步构建基础技能，从而更容易地应对 3D 环境的复杂性。

教师还可以使用这些教程来开发入门课程，让学生获得 3D 编程的实践经验并建立他们对自身能力的信心。

主题 1 - 初始化 3D 场景

教程链接: 初始化 3D 场景
概述: 每个 3D 项目都从一个 3D 场景开始，这是一个所有物体所在的虚拟世界。有许多预制的 3D 场景可以使用，例如城市或草原。

alt text

主题 2 - 使用轨道摄像机查看场景

教程链接

概述: 每个 3D 场景都是无限大的，因此我们只能使用摄像机查看其中的一部分，就像我们观看足球比赛的电视转播一样。您需要学习如何使用摄像机手动或通过代码查看场景的任何部分，以及如何配置摄像机的参数。“轨道摄像机”是一种非常简单的摄像机，就像一颗围绕物体运行的卫星。

alt text

项目创意 - 环游地球 (难度: 1)

教程链接: 环游地球 (难度: 1)
概述: 控制摄像机绕地球轨道运行

alt text

主题 3 - 创建您自己的 3D 虚拟形象

教程链接:
- 使用 ReadyPlayer Me 创建您自己的虚拟形象
- 将虚拟形象加载到场景中

概述: 大多数 3D 游戏或故事都需要 3D 虚拟形象来代表 3D 世界中的玩家。您可以使用免费工具创建自己的虚拟形象并自定义其外观 (可选)。之后，您可以将自己的虚拟形象或 CreatiCode 库中的任何虚拟形象加载到 3D 场景中。

alt text

主题 4 - 让虚拟形象播放动画

教程链接: 虚拟形象动画
概述: 将虚拟形象添加到 3D 场景后，您可以“教”它新的动画，例如“奔跑”或“飞行”，然后它可以播放这些动画。

alt text

主题 5 - 3D 轴和 3D 盒子

教程链接:
- 3D 轴
- 添加 3D 盒子

概述: 除了虚拟形象之外，您还可以在 3D 场景中添加各种 3D 形状，最简单的形状是 3D 盒子。您还将学习使用 3D 轴来确定 X/Y/Z 维度。请注意，在 3D 场景中，Z 轴指向上方。

alt text

项目创意 - 创建金字塔 (难度: 2)

概述: 使用一个大的旗帜盒子作为沙地，然后在重复循环中添加 20 层盒子。盒子的下半部分将隐藏在沙地下方。

alt text

主题 6 - 3D 位置

教程链接: 3D 坐标和位置

概述: 要将 3D 物体放置在 3D 场景中的任何位置，您需要知道它的 3D 位置，该位置指定为其 (X, Y, Z) 坐标。

alt text

项目创意 - 魔方 (难度: 2)

教程链接: 魔方 (难度: 2)
概述: 使用盒子创建一个 5x5x5 的魔方

alt text

项目创意 - 随机盒子的 3D 艺术 (难度: 2)

教程链接: 随机盒子的 3D 艺术 (难度: 2)
概述: 创建一个由许多具有随机位置、大小和颜色的盒子组成的彩色场景。

alt text

项目创意 - 建造一张简单的桌子 (难度: 2)

教程链接: 建造一张简单的桌子 (难度: 2)
概述: 使用 5 个盒子组成一张简单的桌子，包括桌面和 4 条桌腿。我们需要准确地调整每个盒子的大小和位置。

alt text

主题 7 - 3D 旋转

教程链接: 3D 旋转
概述: 您可以通过绕 X/Y/Z 轴旋转 3D 物体，使其面向 3D 场景中的任何方向。

alt text

项目创意 - 建造一个小房子 (难度: 3)

概述: 用几个盒子组成一个简单的房子。屋顶由 2 个倾斜的盒子组成，为了填补屋顶下的空间，您还需要一个旋转的盒子。

alt text

主题 8 - 3D 球体

教程链接: 使用球体
概述: 与盒子类似，球体形状对于构建简单场景非常有用。此外，3D 球体不必是完整的，这允许您使用球体的一部分创建有趣的形状

alt text

项目创意 - 精灵球 (难度: 1)

教程链接: 精灵球 (难度:1)
概述: 使用几个球体组成一个精灵球。

alt text

项目创意 - 创建航天器 (难度: 3)

概述: 使用几个不同形状的球体组成一个航天器，并巧妙地使用“弧度”参数。

alt text

主题 9 - 3D 模型

教程链接: 添加模型
概述: 对于更复杂的物体，很难使用简单的形状来表示它们。相反，您可以使用看起来更逼真的 3D 模型。CreatiCode 库中有数千个模型供您选择，例如飞机、汽车、球等。

alt text

项目创意 - 用家具装饰简单的房子 (难度: 3)

概述: 将各种家具模型添加到简单的房子中，并移动/旋转它们以使其很好地融入房间。

alt text

项目创意 - 海底世界 (难度: 3)

概述: 将各种海洋动物模型添加到“水下”场景中。

alt text

主题 10 - 跟随摄像机

教程链接: 跟随摄像机
概述: 您之前使用的轨道摄像机非常适合查看静态物体/场景。但是，当我们有一个在 3D 场景中移动的虚拟形象或飞机时，我们需要使用“跟随摄像机”，它会跟随目标物体移动或转弯，以便我们获得场景的第一人称视角。

alt text

项目创意 - 飞行无人机 (难度: 1)

教程链接: 飞行无人机 (难度: 1)
概述: 控制无人机在城市场景中飞行，并使用跟随摄像机获得无人机的视角。

alt text

主题 11 - 移动或旋转物体

教程链接: 3D 物体的速度
概述: 要移动或旋转 3D 物体，一种简单且推荐的方法是设置其速度。有许多类型的速度，例如移动、旋转、加速度、重力等。正如后面所讨论的，当我们设置物体的速度而不是直接更改其位置时，物体会在遇到障碍物时自然停止。

alt text

项目创意 - 奔跑的虚拟形象 (难度: 3)

概述: 在场景中添加一个虚拟形象并控制它奔跑、转弯、飞行、滑翔等。

alt text

项目创意 - 飞行宇宙飞船 (难度: 3)

概述: 创建一个充满随机障碍物的宇宙，并控制一艘宇宙飞船在其中飞行。

alt text

主题 12 - 缩放物体

教程链接: 缩放物体
概述: 您可以在 X/Y/Z 维度上调整物体的大小。

alt text

项目创意 - 地毯 (难度: 2)

教程链接: 地毯 (难度: 2)
概述: 使用 3 个沿一个维度缩放的圆柱体组成一条地毯

alt text

主题 13 - 照亮场景

教程链接: 使用灯光
概述: 每个 3D 场景都必须有一个或多个光源，否则我们将无法通过摄像机看到任何东西。有 4 种类型的光源可供选择：环境光 (例如日光)、方向光 (例如阳光)、点光源 (例如灯泡) 和聚光灯 (例如汽车前灯)。

alt text

项目创意 - 警车的灯光 (难度: 2)

概述: 为警车模型添加地面、墙壁和一些光源。

alt text

主题 14 - 更新物体颜色

教程链接: 更新物体颜色
概述: 您可以使用不同的颜色设置使物体看起来像由不同类型的材料制成。此外，您可以更新形状或模型的颜色。

alt text

项目创意 - 不同粗糙度和亮度的球 (难度: 2)

概述: 使用 2 个重复循环添加球体并将它们设置为增加的粗糙度和亮度。

alt text

主题 15 - 更新物体纹理

教程链接: 更新物体纹理
概述: 要使一个简单的形状看起来像一个真实的物体，例如由盒子制成的墙壁，您需要设置物体的纹理。

alt text

项目创意 - 不明飞行物 (难度: 1)

教程链接: 不明飞行物 (难度: 1)
概述: 使用具有不同纹理的球体组成一个简单的不明飞行物

alt text

项目创意 - 创建一个 Minecraft 风格的岛屿 (难度: 2)

概述: 使用具有各种形状和纹理的盒子创建一个 Minecraft 风格的岛屿。

alt text

主题 16 - 物体名称和精灵对象

教程链接: 物体名称和精灵对象
概述: 很多时候，您需要从同一个精灵创建和管理多个 3D 物体，例如使用一个精灵的代码块创建多个虚拟形象。在这种情况下，如果您运行“移动”代码块，您需要一种方法来告诉系统您要移动哪个盒子。这是 2D 和 3D 编程之间的关键区别之一，因为在 2D Scratch 中，每个精灵对应于舞台上的一个单一对象。

为了解决这个问题，CreatiCode 发明了一个新的“精灵对象”概念，它指的是从当前“选定”的精灵创建的 3D 对象之一。要对 3D 对象应用任何操作，您需要先选择该对象，然后所有后续代码块都将应用于该对象，直到选择一个新对象作为“精灵对象”。

alt text

项目创意 - 创建移动人行道 (难度: 2)

概述: 使用 3 个盒子组成一条人行道，并重复选择最后一个盒子并将其移动到前面。

alt text

主题 17 - 其他简单形状

教程链接:
- 圆柱体和管子
- 矩形管
概述: 除了球体和盒子之外，还有一些其他的简单形状可以用来近似物体，例如圆柱体、管子和矩形管 (具有 4 个侧面的管子)。它们还支持丰富的参数集。

alt text

项目创意 - 框架中的一幅画 (难度: 2)

教程链接: 框架中的一幅画 (难度: 2)
概述: 创建一个程序，在框架中显示一幅著名的画作

alt text

项目创意 - 创建巧克力蛋糕 (难度: 3)

概述: 使用圆柱体和管子创建一个巧克力蛋糕。

alt text

项目创意 - 使用自定义代码块建造塔和城堡 (难度: 4)

教程链接: 使用自定义代码块建造塔和城堡 (难度: 4)
概述: 创建一个可以构建不同大小的塔的自定义代码块并重复使用它

alt text

主题 18 - 3D 文本

教程链接: 3D 文本
概述: 您可以使用 3D 文本在场景中显示信息。它们可以非常薄或具有一定的厚度，也可以具有不同的字体类型和弯曲样式。

alt text

项目创意 - 文字艺术 (难度: 2)

教程链接: 文字艺术 (难度: 2)
概述: 使用一些 3D 文本创建出色的视觉效果

alt text

项目创意 - 停车标志 (难度: 2)

教程链接: 停车标志 (难度: 2)
概述: 使用圆柱体和 3D 文本创建一个停车标志

alt text

项目创意 - 创建电影院 (难度: 4)

概述: 使用具有纹理的简单形状和 3D 文本创建一个电影院

alt text

主题 19 - 拉伸

教程链接: 拉伸
概述: 您可以通过增加厚度将任何 2D 图像“拉伸”成一个扁平的 3D 物体。巧妙地使用此技术可以产生许多有趣的用例，例如绘制地图然后将其拉伸成 3D 迷宫。

alt text

项目创意 - 创建迷宫 (难度: 2)

概述: 使用服装编辑器绘制迷宫，然后将其拉伸成 3D 迷宫。您需要旋转它、放大它并添加纹理。

alt text

主题 20 - 物体碰撞

教程链接：
- 使用距离检测物体碰撞
- 使用射线投射检测物体碰撞
概述：物体碰撞允许您在两个 3D 物体相互碰撞时触发事件，例如当虚拟形象撞到墙壁或收集到能量提升时。这是一种基本技术，允许玩家控制他们的虚拟形象并与 3D 世界中的物体进行交互。有两种检测物体碰撞的方法：使用两个物体之间的距离，或从一个物体投射射线（箭头）并查看它是否接触到另一个物体。

alt text

项目创意 - 迷宫游戏 (难度：3)

教程链接：迷宫游戏 (难度：3)
概述：控制虚拟形象穿过 3D 迷宫。

alt text

项目创意 - 防止虚拟形象穿墙 (难度：4)

教程链接：防止虚拟形象穿墙 (难度：4)
概述：当虚拟形象在预定义的场景（如城市街道）中奔跑时，它可能会穿过建筑物，因为启用虚拟形象与场景中每个物体之间的碰撞检测太慢了。相反，我们可以使用一个透明的盒子将虚拟形象挡在建筑物外。

alt text

项目创意 - 虚拟形象与物体交互 (难度：4)

教程链接：虚拟形象与物体交互 (难度：4)
概述：在许多游戏中，玩家控制虚拟形象与场景中的其他物体进行交互，例如与墙壁碰撞或捡起奖励物品。在本教程中，我们将介绍您可以在下一个游戏中应用的 3 种方法：射线投射、边界框和距离测量。

alt text

项目创意 - 跳跃游戏 (难度：5)

教程链接：跳跃游戏 (难度：5)
概述：创建一个游戏，玩家跳过平台到达目标区域，最后将显示最快玩家的排行榜。

alt text

项目创意 - 疯狂高速公路游戏 (难度：6)

教程链接：疯狂高速公路游戏 (难度：6)
概述：学习构建一个名为“疯狂高速公路”的令人兴奋的赛车游戏。玩家将驾驶一辆汽车在高速公路上快速行驶的汽车中穿梭，并尝试尽快到达终点线

alt text

主题 21 - 复制物体

教程链接：复制物体
概述：当您需要制作许多相同类型的物体时，复制单个物体通常更快、更有效。这些副本可以共享相同的模型和动画数据，但具有自己的运动或颜色。

alt text

项目创意 - 外星人舞会 (难度：1)

教程链接：外星人舞会 (难度：1)
概述：创建外星人虚拟形象的 3 个副本并让他们跳舞

alt text

主题 21 - 高亮和发光效果

教程链接：
- 高亮物体
- 使物体发光
概述：当您需要将玩家的注意力吸引到特定物体时，您可以“高亮”该物体，或者您可以使该物体发出某种颜色的光。

alt text

项目创意 - 旋转的地球 (难度：1)

教程链接：旋转的地球 (难度：1)
概述：使用纹理创建一个旋转的地球并在其周围添加高亮效果

alt text

项目创意 - 人体模型 (难度：3)

概述：加载人体模型，并使用下拉菜单允许用户选择一个器官，然后加载带有高亮显示的该器官。

alt text

项目创意 - 花园中的不明飞行物 (难度：3)

概述：在花园场景中加载一个不明飞行物模型，然后使其发光并更新其发光颜色。

alt text

主题 22 - 悬停事件

教程链接：悬停事件
概述：您可以通过将鼠标指针悬停在任何物体上来允许玩家与场景中的物体进行交互。这称为“悬停”事件。您将获得有关指针下哪个物体的信息，因此您可以使该物体对该事件做出反应。

alt text

项目创意 - 高亮药水 (难度：2)

概述：添加一些药水模型，将它们更新为不同的颜色，然后当用户将鼠标悬停在任何药水上时，将其高亮显示。

alt text

主题 23 - 拾取事件

教程链接：拾取事件
概述：您还可以允许玩家通过单击场景中的物体来拾取它。这称为“拾取”事件。您将获得有关指针单击哪个物体的信息，因此您可以使该物体对该事件做出反应。

alt text

项目创意 - 选择字母 (难度：2)

教程链接：选择字母 (难度：2)
概述：允许用户选择一个字母并显示一些反应

alt text

项目创意 - 用石头射击外星人 (难度：3)

概述：重复添加向我们跑来的外星人，当用户单击草原上的任何一点时，向该点扔一块石头，当它击中外星人时，移除外星人。

alt text

项目创意 - 钢琴 (难度：3)

概述：用白色和黑色盒子创建一个钢琴键盘，当用户选择任何琴键时，播放其音符。

alt text

项目创意 - 可玩的魔方 (难度：6)

教程链接：可玩的魔方 (难度：6)
概述：创建一个可玩的魔方，玩家可以使用滑动手势和按钮来控制立方体。

alt text

项目创意 - Minecraft 风格的世界 (难度：6)

概述：创建一个由不同类型的立方体组成的 Minecraft 风格的世界。用户可以在具有锁定指针的世界中奔跑或飞行，并单击以添加或移除立方体。
演示项目：play.creaticode.com/projects/660aa865b57a3da838c387bc

alt text

主题 24 - 拖动事件

教程链接：拖动物体
概述：您还可以允许玩家用指针拖动物体。这称为“拾取”事件。您还将获得有关正在拖动哪个物体的信息。

alt text

主题 25 - 直线、箭头和曲线

教程链接：
- 直线和箭头
- 曲线
概述：您可以在场景中添加直线、虚线、箭头和曲线，这对于创建插图非常有用。

alt text

项目创意 - 房屋测量 (难度：3)

概述：选择任何物体，如房子，然后添加一些直线/箭头和 3D 文本以显示一些测量数字。

alt text

项目创意 - 分子结构 (难度：3)

概述：使用直线、曲线、球体和 3D 文本为分子（如碳酸 (H2CO3)）创建“球棒”模型。

alt text

主题 26 - 父子关系

教程链接：父子关系
概述：“父子关系”是 3D 编程中的另一个独特概念。它意味着将一个对象设置为另一个对象的父对象，因此当父对象移动或转动时，子对象会相对于父对象移动或转动。这是使多个对象表现为一个复合对象的好方法，当您熟悉它时，它有许多有趣和巧妙的用例。

alt text

项目创意 - 太阳系 (难度：3)

概述：加载“太阳系”场景，然后使行星/卫星自转和公转。用户可以从下拉菜单中选择任何行星来仔细观察它。

alt text

主题 27 - 运动轨迹

教程链接：为网格添加轨迹
概述：您可以为运动物体添加漂亮的轨迹，以清晰地显示其运动方式。

alt text

项目创意 - 烟花 (难度：3)

概述：创建一些烟花，首先将一个小火球射向天空，然后它会爆炸成许多不同颜色和方向的彩色火球。提示：您可以使用“上升速度”、“前进速度”和“重力”来控制每个火球的运动。

alt text

项目创意 - 碳原子模型 (难度：4)

概述：使用几个球体作为中心的原子核来创建碳原子模型，然后添加围绕原子核运行的电子，并为它们附加运动轨迹。请注意，要使电子围绕多个轴旋转，您需要为其添加一个变换父对象，这样旋转父对象将使电子旋转。

alt text

主题 28 - 雕刻物体

教程链接：雕刻物体
概述：当两个物体重叠时，您可以使用一个物体从另一个物体上雕刻出一个孔。这允许您创建有趣的新形状。

alt text

项目创意 - 带窗户的空间站 (难度：3)

概述：使用简单的形状创建一个空间站，然后雕刻出一些孔作为窗户，并用透明玻璃覆盖它们。

alt text

项目创意 - 公共汽车 (难度：5)

概述：使用简单的形状创建一辆公共汽车，并雕刻出它的门/窗。添加轮子和座椅。

alt text

主题 29 - 社区模型

教程链接：
概述：虽然 CreatiCode 库提供了数千个 3D 模型，但有时您可能需要一个不在库中的特殊模型。在这种情况下，您可以在 CreatiCode 用户社区共享的模型库中进行搜索。如果您仍然在那里找不到任何合适的模型，您可以尝试从外部网站（如 Tinkercad、Sketchfab 或 CGTrader）中找到具有宽松许可的免费模型，并将该模型作为新的社区模型上传。

alt text

项目创意 - 使用您的不明飞行物作为模型 (难度：2)

教程链接：使用您的不明飞行物作为模型 (难度：2)
概述：使用父子关系将不明飞行物的 3 个球体链接为一个对象，并将其导出为 GLB 模型。

alt text

主题 30 - 批量复制

教程链接：
概述：如果您需要制作同一物体的许多副本，有 3 种方法可以一次创建多个副本，这比逐个创建副本更有效：
- 您可以制作在 3D 空间中形成“矩阵”的副本
- 您可以制作围绕给定轴旋转的副本
- 您可以制作位于原始物体镜像位置的副本。

alt text

项目创意 - 桥梁跑酷 (难度：4)

教程链接：桥梁跑酷 (难度：4)
概述：创建一个动画，其中一个虚拟形象在无限长的桥梁上奔跑和跳跃

alt text

项目创意 - 跑酷游戏 (难度：5)

教程链接：跑酷游戏 (难度：5)
概述：扩展上面的桥梁跑酷项目，添加虚拟形象可以沿途拾取的游戏物品

alt text

项目创意 - 火星车 (难度：6)

概述：使用简单的形状创建火星车；添加一个带轮子的腿，然后使用“镜像复制”来复制它。
演示项目：play.creaticode.com/projects/b3e25d457d8961e8da9b51c9

alt text

主题 31 - 距离传感器

教程链接：距离传感器
概述：您可以从一个物体向所有 6 个方向投射射线（箭头），这允许您检查它与这些箭头接触的其他物体的距离。

alt text

项目创意 - 带有距离传感器的自动驾驶汽车 (难度：3)

教程链接：带有距离传感器的自动驾驶汽车 (难度：3)
概述：使用距离传感器使汽车避开障碍物。

alt text

项目创意 - 带有距离传感器的灯光控制 (难度：2)

教程链接：带有距离传感器的灯光控制 (难度：2)
概述：使用距离传感器检测汽车是否靠近隧道的入口或出口，然后相应地打开或关闭隧道中的灯。

alt text

主题 32 - 附着到身体部位

教程链接：附着到身体部位
概述：您可以将一个物体（例如帽子）附着到另一个物体（虚拟形象或动物模型）的身体部位（例如头部），这样当该物体播放动画时，附着的物体将表现得好像它是该物体的一部分。

alt text

项目创意 - 带翅膀的长颈鹿 (难度：2)

概述：加载长颈鹿模型，并将“翅膀 12”模型附着到其“脊柱”身体部位。
演示项目：play.creaticode.com/projects/ab4f94592232a3706993b204

alt text

主题 33 - 第一人称视角摄像机

教程链接：
- 第一人称视角摄像机
- 从摄像机视角射击物体
概述：您可以将“跟随摄像机”移动到物体或虚拟形象的正前方，这样您就可以获得第一人称视角而无需显示该物体或虚拟形象。您还可以从摄像机的位置射出物体，这对于第一人称射击游戏很有用。

alt text

项目创意 - 射击盒子 (难度：4)

概述：在天空中添加一些随机移动的盒子，然后每当玩家单击时，射出一个球，如果该球与任何盒子碰撞，则删除该盒子。
演示项目：play.creaticode.com/projects/488f7d22f257913f41a8cf31

alt text

项目创意 - 扔球 (难度：5)

概述：在天空中添加一个环，然后当玩家单击任何点时，扔一个球（处理重力），看看该球是否可以飞过环。

alt text

主题 34 - 为简单形状启用 3D 物理引擎

教程链接：
概述：您可以使用 3D 物理引擎来帮助管理场景中的 3D 物体。例如，您无需编写代码来直接移动物体，只需告诉物理引擎“使该物体表现得像一个球”，然后引擎将完全控制该物体，包括它如何移动以及与其他物体碰撞。这是通过使用像盒子/球体/圆柱体这样的简单形状作为物体的“物理体”，并模拟该简单形状的行为方式来完成的。物理引擎允许您创建非常复杂和逼真的 3D 世界，而无需编写太多代码。

alt text