Threejs及TypeScript教程

Threejs及TypeScript教程

学习 Threejs、TypeScript 和 NodeJS 在网络上创建交互式 3D 内容

课程英文名：Three.js and TypeScrip

此视频教程共6.0小时，中英双语字幕，画质清晰无水印，源码附件全

下载地址

百度网盘地址：https://pan.baidu.com/s/11fq7xpyK2GWhU4P3M1FryQ?pwd=5f0c

课程内容

你将会学到的

• 通过许多演示和示例代码学习 Threejs 的基础知识

• 使用 VSCode、Git 和 NodeJS 设置开发环境

• 安装 TypeScript

• 使用 NPM 和 package json 创建 Threejs 项目

• 了解 Webpack、NodeJS、Express 以及为浏览器客户端提供 ES6 模块。

• 创建（或可选地安装）Threejs TypeScript 样板以在整个课程中使用

• 了解 Threejs 场景、相机和渲染器

• 了解动画循环

• 了解 Stats 和 Dat GUI 面板

• 了解 Object3D 基类，以及 Rotation、Position、Scale、Visibility 和 Matrix 属性

• 了解几何形状，例如 Box、Sphere、Icosahedron、Plane、TorusKnot 等

• 了解 Basic、Normal、Lambert、Phong、Standard、Physical、Matcap 和其他材料

• 了解 SpecularMap、RoughnessMap 和 MetalnessMap 的突出显示选项

• 了解凹凸贴图和置换贴图

• 了解如何使用材质选项修改纹理和置换贴图 UV。

• 了解使用环境光、定向光、半球光、点光源和聚光灯的照明。

• Mipmap、自定义 Mipmap 和各向异性过滤

• 了解使用 Perspective 和 Orthographic 阴影相机的阴影。

• 了解 Orbit、Trackball 和 Pointerlock 鼠标和触摸交互控件

• 了解模型加载器，例如 OBJ、MTL、GLTF、DRACO 等

• 导入第三方 FBX 和 glTF/glB 动画

• 创建自定义动画并从 Blender 导出为 glTF/glB

• 使用 Raycaster 以及如何使用它在场景中拾取 3D 对象，

• Cannonjs 物理

• Cannonjs 调试渲染器

• 了解用于碰撞检测的凸多面体与复合形状

• 配置、部署和启动我们的 Threejs 项目到生产服务器

• 安装 Nginx 代理，指向一个域名并安装 SSL

• 将模块说明符与 Webpack 与相对导入引用一起使用

• 还有更多非常有用的 Threejs 示例

课程内容

1 个章节 - 78 个讲座 - 总时长 9 小时 22 分钟

介绍78 个讲座 - 9 小时 23 分钟

要求

• 一台可以安装 VSCode、Git 和 NodeJS 的计算机

• 渴望在 Threejs 和 TypeScript 中编写 3D Web 应用程序

说明

欢迎来到我的 Three.js 和 Typescript 课程。

在本课程中，我们将学习有关 Three.js 的所有知识，用 TypeScript 编写它，并使用 Webpack 和 NodeJS 编写 HTML 客户端和服务器组件。

该课程分为5个主要部分，

1. 设置开发环境并安装 TypeScript

2. 创建 Three.js 样板项目。这部分是可选的，你可以在第 3 部分中安装一个预先构建的样板，但是从头开始手动构建它将使你对从头开始创建一个新的 Three.js 项目所涉及的方面有一个很好的理解。

3. 安装 Threejs Course Boilerplate，以防你在第 2 部分中没有手动创建它。

4. 了解 Three.js 的所有方面，从核心到在更高级的示例中使用它并涉及其他第三方库。

5. 部署到生产。我们将研究你在 Internet 上公开托管 Threejs 项目的几种不同选择。

随附文档中提供了所有代码，以便你可以轻松复制和粘贴，以防你不想暂停视频并从屏幕复制。文档链接位于每个视频旁边的资源中。

TypeScript 在我们的代码中引入了类型安全，使其更加健壮，并为 IDE 提供了额外的工具，例如智能，我们可以使用这些工具来帮助我们更准确、更快地找到和理解可用的 Threejs 属性和方法以及代码。

感谢你参加我的课程，我们会在那里见到你。

肖恩

此课程面向哪些人：

• 有兴趣学习 Threejs 的人

• 有兴趣学习 TypeScript 的人

• 有兴趣在网络上创建交互式 3D 应用程序、游戏或可视化的用户

• 想要充分了解 Threejs、TypeScript 和 NodeJS 以使其有用的人