Three.js and TypeScript: Learn Three.js while using TypeScript to create interactive 3D content on the web

Length: 255 pages
Edition: 1
Language: English
Publication Date: 2021-09-22
ISBN-10: B09GYTKRCH
Sales Rank: #0 (See Top 100 Books)

*** Book also provides you FREE Access to Online Instructional Videos. See video codes in the book ***

Welcome to my book on learning Three.js and TypeScript.

All code examples provided in this book are available to copy from in the accompanying documentation website at https://sbcode.net/threejs so that you can more easily copy and paste and see the working examples.

Each chapter also contains video codes that will allow you to watch my official course videos for FREE as an addition to purchasing this book. When purchasing this book, it is not necessary to register at any of the online course platforms in order to view the videos.

The book is split into 5 major parts,

Set up the Development Environment and Install 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.
Install the Three.js Boilerplate, in case you didn’t manually create it in part 2.
Learn all about the many aspects of Three.js starting from the Scene, Camera, Renderer, Animation Loop, Geometries, Materials, Loaders and much more up to using it in more advanced examples and involving other third party libraries such as CSG, Socket.io and Physics with Cannon.
Deploying to Production. We will look at several different options that you have for hosting your Three.js projects publicly on the internet using GitHub, GitLab, Self Hosting using Node.js, Express, SSL, custom domain name and using an Nginx reverse proxy.

TypeScript introduces type safety in our code which makes it much more robust and gives your IDE extra tools such as IntelliSense code completion that we can use to help us find and understand the available Three.js properties and methods much faster.

So if you know that you like coding, like seeing it work for yourself, like to experiment and have millions of ideas that you want to achieve, then this book is for you.

Thanks for picking up my book and let’s get started.

Three.js and TypeScript
1. Introduction
2. Setup Development Environment
	2.1 Install VSCode IDE, Git and Node.js
3. Install TypeScript
	3.1 Troubleshooting
4. Begin Creating the Three.js Project
	4.1 Initialize a New Project
	4.2 Install Three.js
	4.3 Create Extra Project Files and Folders
5. Add the Initial Scripts
	5.1 ./src/client/client.ts
	5.2 ./src/client/tsconfig.json
6. Setting up the Webpack Dev Server
	6.1 ./src/client/webpack.common.js
	6.2 ./src/client/webpack.dev.js
	6.3 ./package.json
	6.4 Troubleshooting
		6.4.1 EADDRINUSE
		6.4.2 Unknown Property 'contentBase'
	6.5 Useful Links
7. Importing Three.js Modules
	7.1 ./src/client/client.ts
	7.2 Useful Links
8. Install the Three.js Typescript Boilerplate
	8.1 Cloning Into A Custom Folder
	8.2 Reverting A Git Repository Back To Head
	8.3 Extra Boilerplate Branches
		8.3.1 annotations branch
		8.3.2 csg branch (Constructive Solid Geometry)
		8.3.3 ballgame branch
		8.3.4 bsc5 branch
		8.3.5 And More
9. Scene, Camera and Renderer
	9.1 Scene
	9.2 Renderer
	9.3 Camera
	9.4 Start Script
		9.4.1 ./src/client/client.ts
	9.5 Final Code
		9.5.1 ./src/client/client.ts
		9.5.2 ./dist/client/index.html
	9.6 Useful Links
10. Animation Loop
	10.1 Start Scripts
		10.1.1 ./src/client/client.ts
		10.1.2 ./dist/client/index.html
	10.2 Final Script
		10.2.1 ./src/client/client.ts
	10.3 Useful Links
11. Stats.js Panel
	11.1 Lesson Script
		11.1.1 ./src/client/client.ts
	11.2 Boilerplate stats Branch
	11.3 Useful Links
12. Dat.GUI
	12.0.1 ./src/client/tsconfig.json
	12.1 Lesson Script
		12.1.1 ./src/client/client.ts
	12.2 Boilerplate statsgui Branch
	12.3 Useful Links
13. Object3D
	13.1 Lesson Script
		13.1.1 ./src/client/client.ts
	13.2 Useful Links
14. Object3D Hierarchy
	14.1 Lesson Scripts
		14.1.1 ./src/client/client.ts
		14.1.2 ./dist/client/index.html
15. Geometries
	15.1 Lesson Scripts
		15.1.1 ./src/client/client.ts
		15.1.2 ./dist/client/index.html
	15.2 Transformation Matrix
	15.3 Useful Links
16. Materials
	16.1 Lesson Scripts
		16.1.1 ./src/client/client.ts
		16.1.2 ./dist/client/index.html
17. MeshBasicMaterial
	17.1 Resources
	17.2 Lesson Script
		17.2.1 ./src/client/client.ts
	17.3 Useful Links
18. MeshNormalMaterial
	18.1 Lesson Script
		18.1.1 ./src/client/client.ts
	18.2 Useful Links
19. MeshLambertMaterial
	19.1 Lesson Script
		19.1.1 ./src/client/client.ts
	19.2 Useful Links
20. MeshPhongMaterial
	20.1 Lesson Script
		20.1.1 ./src/client/client.ts
	20.2 Useful Links
21. MeshStandardMaterial
	21.1 Lesson Script
		21.1.1 ./src/client/client.ts
	21.2 Useful Links
22. MeshPhysicalMaterial
	22.1 Lesson Script
		22.1.1 ./src/client/client.ts
	22.2 Useful Links
23. MeshMatcapMaterial
	23.1 Resources
	23.2 Lesson Script
		23.2.1 ./src/client/client.ts
	23.3 Useful Links
24. MeshToonMaterial
	24.1 Resources
	24.2 Lesson Script
		24.2.1 ./src/client/client.ts
	24.3 Useful Links
25. SpecularMap
	25.1 Resources
	25.2 Lesson Script
		25.2.1 ./src/client/client.ts
26. RoughnessMap and MetalnessMap
	26.1 Lesson Script
		26.1.1 ./src/client/client.ts
27. BumpMap
	27.1 Resources
	27.2 Lesson Script
		27.2.1 ./src/client/client.ts
28. NormalMap
	28.1 Lesson Script
		28.1.1 ./src/client/client.ts
29. DisplacementMap
	29.1 Resources
	29.2 Lesson Script
		29.2.1 ./src/client/client.ts
30. Material Repeat and Center
	30.1 Lesson Script
		30.1.1 ./src/client/client.ts
	30.2 UV Mapping
	30.3 Useful Links
31. Texture Mipmaps
	31.0.1 Magnification Filters
	31.0.2 Minification Filters
	31.1 Lesson Script
		31.1.1 ./src/client/client.ts
	31.2 Useful Links
32. Custom Mipmaps
33. Anistropic Filtering
	33.1 Lesson Script
		33.1.1 ./src/client/client.ts
	33.2 Useful Links
34. Lights
	34.1 Useful Links
35. Ambient Light
	35.1 Lesson Script
		35.1.1 ./src/client/client.ts
	35.2 Useful Links
36. Directional Light
	36.1 Lesson Script
		36.1.1 ./src/client/client.ts
	36.2 Useful Links
37. Hemisphere Light
	37.1 Lesson Script
		37.1.1 ./src/client/client.ts
	37.2 Useful Links
38. Point Light
	38.1 Lesson Script
		38.1.1 .src/client/client.ts
	38.2 Useful Links
39. Spot Light
	39.1 Lesson Script
		39.1.1 ./src/client/client.ts
	39.2 Useful Links
40. Spot Light Shadow
	40.1 Lesson Script
		40.1.1 ./src/client/client.ts
	40.2 Useful Links
41. Directional Light Shadow
	41.1 Lesson Script
		41.1.1 ./src/client/client.ts
42. Orbit Controls
	42.1 Lesson Script
		42.1.1 ./src/client/client.ts
	42.2 Useful Links
43. Trackball Controls
	43.1 Lesson Script
		43.1.1 ./src/client/client.ts
	43.2 Useful Links
44. PointerLockControls
	44.1 Lesson Scripts
		44.1.1 ./dist/client/index.html
		44.1.2 ./src/client/client.ts
	44.2 Useful Links
45. DragControls
	45.1 Lesson Scripts
		45.1.1 ./src/client/client.ts
		45.1.2 ./dist/client/index.html
	45.2 Useful Links
46. Transform Controls
	46.1 Lesson Script
		46.1.1 ./src/client/client.ts
	46.2 Useful Links
47. Multiple Controls Example
	47.1 OrbitControls with DragControls
		47.1.1 ./src/client/client.ts
	47.2 OrbitControls with TransformControls
		47.2.1 ./src/client/client.ts
48. OBJ Model Loader
	48.1 Resources
	48.2 Lesson Script
		48.2.1 ./src/client/client.ts
	48.3 Customizing the Material
	48.4 Useful Links
49. MTL Loader
	49.1 Resources
	49.2 Lesson Script
		49.2.1 ./src/client/client.ts
	49.3 Useful Links
50. GLTF Model Loader
	50.1 Resources
	50.2 Lesson Script
		50.2.1 ./src/client/client.ts
	50.3 Useful Links
51. DRACO Loader
	51.1 Resources
	51.2 Lesson Script
		51.2.1 ./src/client/client.ts
	51.3 Useful Links
52. Textured GLTF
53. FBX Model Loader
	53.1 Resources
	53.2 Lesson Script
		53.2.1 ./src/client/client.ts
	53.3 Useful Links
54. FBX Animations
	54.1 Resources
	54.2 Lesson Script
		54.2.1 ./src/client/client.ts
	54.3 Useful Links
55. GLTF Animations
	55.1 Lesson Script
		55.1.1 ./src/client/client.ts
	55.2 Useful Links
56. GLTF Custom Animations
57. Raycaster
	57.1 Lesson Script
		57.1.1 ./src/client/client.ts
	57.2 Useful Links
58. Using tweens.js
	58.1 Tween Easing Options
	58.2 Importing Tween.js
	58.3 Lesson Script
		58.3.1 ./src/client/client.ts
	58.4 Useful Links
59. Vector3 Lerp
	59.1 Useful Links
60. Physics with Cannon
	60.1 Basic Concepts
	60.2 Collision Detection
	60.3 Iterations
	60.4 Supported Cannon Shape Collisions
	60.5 Setup
	60.6 Lesson Script
		60.6.1 ./src/client/client.ts
	60.7 Useful Links
61. Converting JavaScript Three.js Examples to TypeScript Projects
62. Deploying to Production
63. Setup a Webpack Production Configuration
	63.1 ./src/client/webpack.prod.js
64. Host using GitHub Pages
65. Host using GitLab Pages
66. Host using an Nginx Server
	66.1 Install Nginx
	66.2 Copy the files to the server.
	66.3 Configure Nginx to serve your static files.
67. Point a Domain Name
	67.1 Purchasing A Domain
68. Add SSL
69. Advanced Production Deployments
70. Troubleshooting
	70.1 Problems Concerning TypeScript or Node.js
	70.2 Problems concerning JavaScript or Threejs peculiarities
	70.3 Summary