Three.js and TypeScript Three.js 和 TypeScript
学习 Threejs、TypeScript 和 NodeJS 以在 Web 上创建交互式 3D 内容
教程演示🔗
更多网页开发教程
What you’ll learn 学习内容
-
Learn the Basics of Threejs with many demonstrations and example code
通过许多演示和示例代码学习Threejs的基础知识 -
Setup a Development Environment using VSCode, Git and NodeJS
使用 VSCode、Git 和 NodeJS 设置开发环境 -
Install TypeScript 安装 TypeScript
-
Create a Threejs project using NPM and package json
使用 NPM 和包 json 创建 Threejs 项目 -
Learn about Webpack, NodeJS, Express and serving ES6 modules to the browser clients.
了解 Webpack、NodeJS、Express 以及向浏览器客户端提供 ES6 模块。 -
Create (or optionally Install) a Threejs TypeScript Boilerplate for use throughout the course
创建（或选择性地安装）一个Threejs TypeScript样板，用于整个课程 -
Learn about the Threejs Scene, Camera and Renderer
了解 Threejs 场景、摄像机和渲染器 -
Learn about the Animation loop
了解动画循环 -
Learn about the Stats and Dat GUI panels
了解 Stats 和 Dat GUI 面板 -
Learn about Object3D base class, and the Rotation, Position, Scale, Visibility and Matrix properties
了解 Object3D 基类以及 Rotation、Position、Scale、Visibility 和 Matrix 属性 -
Learn about Geometries such as Box, Sphere, Icosahedron, Plane, TorusKnot and more
了解 Box、Sphere、Icosahedron、Plane、TorusKnot 等几何图形 -
Learn about the Basic, Normal, Lambert, Phong, Standard, Physical, Matcap and other materials
了解 Basic、Normal、Lambert、Phong、Standard、Physical、Matcap 和其他材质 -
Learn about the highlighting options with the SpecularMap, RoughnessMap and MetalnessMap
了解 SpecularMap、RoughnessMap 和 MetalnessMap 的加亮选项 -
Learn about the Bumpmap and Displacement Maps
了解凹凸贴图和置换贴图 -
Learn about modifying the texture and displacement map UVs using the material options.
了解如何使用材质选项修改纹理和置换贴图 UV。 -
Learn about lighting using the Ambient, Directional, Hemisphere, Point and Spot lights.
了解如何使用环境光、定向光、半球光、点光和聚光灯进行照明。 -
Mipmaps, Custom Mipmaps and Anistropic Filtering
Mipmap、自定义 Mipmap 和各向异性过滤 -
Learn about shadows using both the Perspective and Orthographic shadow cameras.
使用透视和正交阴影相机了解阴影。 -
Learn about the Orbit, Trackball and Pointerlock mouse and touch interaction controls
了解 Orbit、Trackball 和 Pointerlock 鼠标和触摸交互控件 -
Learn about the model loaders such as the OBJ, MTL, GLTF, DRACO and more
了解 OBJ、MTL、GLTF、DRACO 等模型加载器 -
Import third party FBX and glTF/glB animations
导入第三方 FBX 和 glTF/glB 动画 -
Create Custom Animations and Export From Blender As glTF/glB
创建自定义动画并从 Blender 导出为 glTF/glB -
Use Raycaster and how to use it for mouse picking 3D objects in the scene,
使用 Raycaster 以及如何使用它来拾取场景中的 3D 对象， -
Physics with Cannonjs 使用 Cannonjs 进行物理处理
-
The Cannonjs Debug Renderer
Cannonjs 调试渲染器 -
Understanding ConvexPolyhedrons versus Compound Shapes for Collision Detection
了解用于碰撞检测的凸多面体与复合形状 -
Provision, Deploy and Start our Threejs Projects to a Production server
将我们的Threejs项目配置、部署和启动到生产服务器 -
Install Nginx Proxy, Point a Domain Name and Install SSL
安装Nginx代理，点一个域名，安装SSL -
Using Module Specifiers with Webpack Versus Relative Import References
将模块说明符与 Webpack 与相对导入引用一起使用 -
And many more very useful examples of Threejs
还有更多非常有用的 Threejs 示例
Requirements 要求
-
A Computer that you can install VSCode, Git and NodeJS
可以安装 VSCode、Git 和 NodeJS 的计算机 -
A desire to code 3D web applications in Threejs and TypeScript
希望用 Threejs 和 TypeScript 编写 3D Web 应用程序
Description 描述
Welcome to my course on Three.js and Typescript.
欢迎来到我的Three.js和Typescript课程。
In this course we will learn all about Three.js, write it in TypeScript, and also write a HTML client and server component using Webpack and NodeJS.
在本课程中，我们将学习有关Three.js的所有知识，用TypeScript编写它，并使用Webpack和NodeJS编写HTML客户端和服务器组件。
The course is in 5 main sections,
该课程分为 5 个主要部分，
-
Setting up the development environment and installing TypeScript
设置开发环境并安装 TypeScript -
Create a Three.js boilerplate project. This section is optional, you can install a pre-built boilerplate in part 3 instead, but building it manually from the ground up will give you a very good understanding of the aspects involved in creating a new Three.js project from scratch.
创建一个 Three.js 样板项目。本节是可选的，您可以在第 3 部分中安装预构建的样板，但从头开始手动构建它将使您很好地理解从头开始创建新的 Three.js 项目所涉及的各个方面。 -
Install the Threejs Course Boilerplate, in case you didn’t manually create it in part 2.
安装 Threejs Course Boilerplate，以防您没有在第 2 部分中手动创建它。 -
Learn all about the many aspects of Three.js from the core up to using it in more advanced examples and involving other third party libraries.
了解 Three.js 的许多方面，从核心到在更高级的示例中使用它并涉及其他第三方库。 -
Deploying to Production. We will look at several different options that you have for hosting your Threejs projects publicly on the internet.
部署到生产环境。我们将介绍几种不同的选项，用于在互联网上公开托管Threejs项目。
All code is provided in the accompanying documentation so that you can easily copy and paste, in case you don’t want to pause the video and copy from the screen. Links to the documentation are in the resources along side each video.
所有代码都在随附的文档中提供，以便您可以轻松地复制和粘贴，以防您不想暂停视频并从屏幕上复制。文档的链接位于每个视频旁边的资源中。
TypeScript introduces type safety in our code which makes it much more robust and gives the IDE extra tools such as intellisence that we can use to help us find and understand the available Threejs properties and methods and code more accurately and much faster.
TypeScript 在我们的代码中引入了类型安全，使其更加健壮，并为 IDE 提供了额外的工具，例如智能，我们可以用来帮助我们更准确、更快速地查找和理解可用的 Threejs 属性和方法以及代码。
Thanks for taking part in my course, and I will see you there.
感谢您参加我的课程，我会在那里见到你。
Sean 肖恩
Who this course is for:
本课程适用于谁：
- People interested in learning Threejs
有兴趣学习Threejs的人 - People interested in learning TypeScript
有兴趣学习 TypeScript 的人 - People interested in creating interactive 3D applications, games or visualisations on the web
有兴趣在 Web 上创建交互式 3D 应用程序、游戏或可视化的人 - People who want to learn enough about Threejs, TypeScript and NodeJS for it to be useful
想要充分了解 Threejs、TypeScript 和 NodeJS 以使其有用的人
更多网页开发教程
