Book Image

Learn Three.js - Third Edition

By : Jos Dirksen
1 (1)
Book Image

Learn Three.js - Third Edition

1 (1)
By: Jos Dirksen

Overview of this book

WebGL makes it possible to create 3D graphics in the browser without having to use plugins such as Flash and Java. Programming WebGL, however, is difficult and complex. With Three.js, it is possible to create stunning 3D graphics in an intuitive manner using JavaScript, without having to learn WebGL. With this book, you’ll learn how to create and animate beautiful looking 3D scenes directly in your browser-utilizing the full potential of WebGL and modern browsers. It starts with the basic concepts and building blocks used in Three.js. From there on, it will expand on these subjects using extensive examples and code samples. You will learn to create, or load, from externally created models, realistic looking 3D objects using materials and textures. You’ll find out how to easily control the camera using the Three.js built-in in camera controls, which will enable you to fly or walk around the 3D scene you created. You will then use the HTML5 video and canvas elements as a material for your 3D objects and to animate your models. Finally, you will learn to use morph and skeleton-based animation, and even how to add physics, such as gravity and collision detection, to your scene. After reading this book, you’ll know everything that is required to create 3D animated graphics using Three.js.

Related Content you might be interested in

Current Title:

Small book image
Learn Three.js - Third Edition
Jos Dirksen
Aug, 2018 | 528 pages
Small book image
Business Intelligence Career Master Plan
Danny Moncada | Eduardo Chavez
Aug, 2023 | 284 pages
Small book image
Mastering NLP from Foundations to LLMs
Meysam Ghaffari | Lior Gazit
Apr, 2024 | 340 pages
Small book image
Principles of Data Science
Sinan Ozdemir
Jan, 2024 | 326 pages
Table of Contents (14 chapters)
Preface
Preface
Who this book is for
What this book covers
To get the most out of this book
Get in touch
Free Chapter
1
Creating Your First 3D Scene with Three.js
Creating Your First 3D Scene with Three.js
Requirements for using Three.js
Getting the source code
Creating the HTML skeleton
Rendering and viewing a 3D object
Adding materials, lights, and shadows
Expanding your first scene with animations
Using dat.GUI to make experimenting easier
Automatically resize the output when the browser size changes
Summary
2
The Basic Components that Make Up a Three.js Application
The Basic Components that Make Up a Three.js Application
Creating a scene
Geometries and meshes
Different cameras for different uses
Summary
3
Working with Light Sources in Three.js
Working with Light Sources in Three.js
The different kinds of lighting provided by Three.js
Basic lights
Special lights
Summary
4
Working with Three.js Materials
Working with Three.js Materials
Understanding common material properties
Starting with a simple mesh
Advanced materials
Materials you can use for a line geometry
Summary
5
Learning to Work with Geometries
Learning to Work with Geometries
The basic geometries provided by Three.js
Summary
6
Advanced Geometries and Binary Operations
Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating a geometry by extruding
THREE.ParametricGeometry
Creating 3D text
Using binary operations to combine meshes
Summary
7
Points and Sprites
Points and Sprites
Understanding points
THREE.Points and THREE.PointsMaterial
Working with sprite maps
Creating THREE.Points from an advanced geometry
Summary
8
Creating and Loading Advanced Meshes and Geometries
Creating and Loading Advanced Meshes and Geometries
Geometry grouping and merging
Loading geometries from external resources
Importing from 3D file formats
Summary
9
Animations and Moving the Camera
Animations and Moving the Camera
Basic animations
Working with the camera
Morphing and skeletal animation
Creating animations using external models
Summary
10
Loading and Working with Textures
Loading and Working with Textures
Using textures in materials
Advanced usage of textures
Rendering to a canvas and using it as a texture
Using the output from a video as a texture
Summary
11
Render Postprocessing
Render Postprocessing
Setting up Three.js for postprocessing
Postprocessing passes
Using THREE.ShaderPass for custom effects
Creating custom postprocessing shaders
Summary
12
Adding Physics and Sounds to Your Scene
Adding Physics and Sounds to Your Scene
Creating a basic Three.js scene with physics
Physi.js material properties
Physi.js supported shapes
Using constraints to limit the movement of objects
Add sound sources to your scene
Summary
13
Other Books You May Enjoy
Other Books You May Enjoy
Leave a review - let other readers know what you think

Summary

We will now end this chapter on textures. As you've seen, there are a lot of different kinds of textures available in Three.js, each with a different use. You can use any image in the PNG, JPG, GIF, TGA, DDS, PVR, TGA, KTX, EXR, or RGBE format as a texture. Loading these images is done asynchronously, so remember to either use a rendering loop or add a callback when you load a texture. With the different types of textures available, you can create great-looking objects from low-poly models.

With Three.js, it is also easy to create dynamic textures, using either the HTML5 canvas element or the video element. Just define a texture with these elements as the input, and set the needsUpdate property to true whenever you want the texture to be updated.

With this chapter out of the way, we've pretty much covered all of the...

Previous Section
End of Chapter 10
Next Chapter