Three.js 和 TypeScript

Three.js and TypeScript

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

您将学到什么

通过许多演示和示例代码学习 Threejs 的基础知识
使用 VSCode、Git 和 NodeJS 设置开发环境
安装 TypeScript参加
TypeScript 迷你课程，了解类型、接口、类并查看它在 NodeJS 和浏览器中的运行.
使用 NPM 创建 Threejs 项目并打包 json
将 Threejs 库导入我们的 TypeScript 代码并通过我们的 NodeJS 服务器提供服务
了解 NodeJS、Express 以及为浏览器客户端提供 ES6 模块。
设置 NodeJS 以在更改时自动重新编译并生成项目代码
创建（或可选地安装）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 的突出显示选项
了解 Bumpmap 和 Displacement Map
了解如何使用材质选项修改纹理和置换贴图 UV。
了解使用环境光、定向光、半球光、点光源和聚光灯的照明。
了解使用 Perspective 和 Orthographic 阴影相机的阴影。
了解 Orbit、Trackball 和 Pointerlock 鼠标和触摸交互控件
了解模型加载器，例如 OBJ、MTL、GLTF、DRACO 等
Raycaster 以及如何使用它在场景中拾取 3D 对象、
Mipmap、自定义 Mipmap和 Anistropoc Filtering
Physics with Cannonjs
Cannonjs 调试渲染器
理解 ConvexPolyhedrons 与 Compound Shapes 以进行碰撞检测
提供、部署和启动我们的 Threejs 项目到生产服务器
安装 Nginx 代理、指向域名并安装 SSL
以及更多 Threejs 非常有用的示例

要求

一台可以安装 VSCode、Git 和 NodeJS 的计算机
渴望用 Threejs 和 TypeScript 编写 3D Web 应用程序

描述

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

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

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

1.搭建开发环境并安装TypeScript

2. 适合初学者的 TypeScript 快速入门课程

3. 使用客户端 HTML 和 NodeJS 服务器创建 three.js 主项目模板

4.threejs的主要课程内容，附有演示和代码示例。

如果你有使用 TypeScript 的经验，那么你可以跳过第 2 部分。

在第 4 部分的开头，我还提供了在第 3 部分中创建的项目模板的预创建副本。因此，如果您想直接了解 Threejs 的详细信息，也可以绕过第 3 部分。

由于本课程是用 TypeScript 编写的，因此第 2 节和第 3 节包含非常有用的信息，可帮助您了解我在整个课程中使用的其他 TypeScript 语法和概念。

随附文档中提供了所有代码，以便您可以轻松复制和粘贴，以防您不想暂停视频并从屏幕复制。

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

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

肖恩

本课程面向的对象

对学习 Threejs
感兴趣的人 对学习 TypeScript
感兴趣的人 对在网络上创建交互式 3D 应用程序、游戏或可视化感兴趣的人