课程
深度探讨
第 01 节 入学指导和准备
课程中的 Coloso Choi
课程中的 Coloso Choi
01. 方向
– 导师介绍
– 课程介绍
02. 安装必备 3D 程序和开发工具
– 安装 Maxon C4D 和 Redshift，并申请试用许可证
– 申请 Maxon 学生许可证的信息
– VSCode 和 Node.js 安装的信息
第 02 节 3D 图形和建模简介：C4D
课程中的 Coloso Choi
课程中的 Coloso Choi
03.关于C4D基础界面
– 探索C4D的基本操作和界面
04. 设置你的工作环境
– 3D 理解基本形状
05. 理解基本形状
– 查看 C4D 的基本形状，如立方体、球体和圆环
– 处理和转换基本形状
06. 转换模型
– 对基本形状应用效果
– 通过放大特定部分来强调
– 制作皱褶
– 呈现气球状效果
07. 使用矢量图形进行建模
– 如何将 Illustrator 中的 2D 矢量图形转换为 C4D 中的 3D
– 创建闪电形图标、邮箱、地图标记和消息图标
– 创建 3D 文本
08.用有机线条建模
– 使用各种线条进行建模
– 创建扬声器、铃声通知、火箭和过滤器图标
09.非典型建模
– 如何用 3D 形状创建各种模型
– 制作三种类型的垫子按钮、可爱的云朵、视频、设置图标和邮箱
10. 材料基础
– 使用 C4D 的标准材质对 3D 模型进行着色和纹理处理
11.基本动画
– 为本节中创建的一些模型添加关键帧动画
12. 导出至网页
– 学习如何以可在网络上阅读的格式导出
第 03 节 创意编码：JavaScript
课程中的 Coloso Choi
13. Webpack 环境搭建及基本讲解
– 分析示例源代码文件
– 学习基本的 Web 开发环境元素
14. JavaScript 基础：数据类型
– JavaScript 语言基础
– JavaScript 的第一步：探索变量的类型
15. JavaScript 基础：循环和条件
– 了解 JavaScript 语法中最有用的循环和条件
16. JavaScript 基础：创建具有功能的函数
– 通过直接交互实现简单的功能
17. JavaScript 基础：类
– 学习类语法
– 制作自己的可以在其他地方使用的代码集合并命名
18. JavaScript 基础：基于模块的 JavaScript 概念
– 学习模块结构，以便于使用其他 JavaScript 文件
– 使用常用的 JavaScript 库和定制的 JavaScript 文件
第 04 节 创意编码：Three.js
课程中的 Coloso Choi
课程中的 Coloso Choi
19. 加载并准备使用 Three.js 库
– 安装和设置 JavaScript 库 Three.js
20. Three.js 基础：相机设置
– 研究摄像机角度和运动
– 通过连接 OrbitControl 设置基本的摄像机运动
21. Three.js 基础：实时照明设置
– 研究全局照明源和定向照明源
– 为未来的工作环境设置照明
22. Three.js 基础：加载模型
– 将之前的建模工作加载到 Three.js 中
第 05 节 创意编码：Three.js 练习
课程中的 Coloso Choi
课程中的 Coloso Choi
23. 练习一：漂浮在太空中
– 设置各种可以移动屏幕的控制器
24. 练习2：点击交互
– 创建点击屏幕时播放动画的交互
25.练习3：实时同步
– 创建根据实时变化的交互
26. 练习 4：滚动交互
– 创建根据滚动改变屏幕的交互
27. 练习 5：创建粒子
– 学习如何通过生成粒子来装饰屏幕
28. 练习 6：创建流动文本
– 制作文本沿模型表面流动的动画
第 06 节 高级 3D 图形和建模：Redshift
课程中的 Coloso Choi
课程中的 Coloso Choi
29.设置 Redshift
– 检查 Redshift 设置方法和基本界面
30. 先进材料 1
– 学习 Redshift 节点接口
– 研究以节点表达的材料特性
31. 先进材料 2
– 使用噪声图创建各种纹理
– 使用图案形状创建纹理
– 学习如何通过导入其他图像文件来创建逼真的纹理
32. 了解紫外线
– 了解图像纹理应用于材质如何影响建模
– 简单学习正确的映射方法
33. 通过烘焙将逼真的纹理带到网络上
– 学习如何从 Cinema 4D 导入难以在 Three.js 的实时渲染中表达的丰富纹理
34. 导入 3D 动画
– 学习如何将 Cinema 4D 中创建的动画导入 Three.js
35.理解和应用后期处理
– 了解后期处理
– 应用光散射效果和相机镜头模糊效果
第 07 节 3D 交互式网站：设计
课程中的 Coloso Choi
课程中的 Coloso Choi
36. 应用练习 1：创建图标屏幕
（第 1 部分）
– 屏幕构图和动画工作
– 通过最终烘焙过程使其可在网络上使用
37. 应用练习 1：创建图标屏幕
（第 2 部分）
– 将从 C4D 导出的 3D 文件导入 Three.js
– 播放具有简单交互的动画
38. 应用练习 2：构建我自己的工作空间
（第 1 部分）
– 考虑交互来划分模型层
– 通过最终的烘焙过程使其可以在网络上使用
39. 应用练习 2：构建我自己的工作空间
（第 2 部分）
– 在模型文件中添加交互
– 实现火箭的颜色变化和工作背景转换
– 添加允许火箭发射的交互
40. 应用练习3：创造宇宙空间
（上）
– 空间创造、屏幕构图和动画工作
– 通过最终烘焙过程使其可在网络上使用
41.应用练习3：创造宇宙空间
（第2部分）
– 通过重复动画播放配置丰富的空间动画
第 08 节 3D 交互式网站：实施
课程中的 Coloso Choi
课程中的 Coloso Choi
42. 在 Cinema 4D 中创建整体场景结构
– 设计主页的外观
– 配置环境和编辑工作
43. 优化大型 3D 场景，实现轻量级 Web 体验
– 研究优化技术，实现流畅运行，不中断场景
44. 控制 Web 上的摄像头移动
– 使用 Three.js 编写函数，允许不间断地查看三个应用练习
45. Web UI 基础：理解 HTML 基本结构
– 了解网站骨架 HTML 的结构，并学习常用标签
46. Web UI 基础：理解 CSS 基本结构
– 查看与网站设计相对应的 CSS 结构
– 更改先前配置的标签的设计
47. Web UI 应用：创建基本 UI
– 寻找在屏幕上放置必要信息（例如屏幕转换按钮和文本）的方法
48. Web UI 应用：创建加载屏幕
– 创建模型加载时显示的加载屏幕
49. 将您的网站公开
– 通过 GitHub 页面公开发布完成的网页，以便其他人可以访问
第 09 节 结论：未来的方向
课程中的 Coloso Choi
50. 发展商及设计师的进修前景
– 查看 Three.js 的参考资料
– 探索高级交互式网页设计和开发路线图
