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
Canvas Cookbook
Bhushan Purushottam Joshi | Eric Rowell
May, 2019 | 254 pages
Small book image
Real-Time 3D Graphics with WebGL 2
Diego Cantor | Farhad Ghayour
Oct, 2018 | 500 pages
Small book image
Expert Data Visualization
Jos Dirksen
Apr, 2017 | 394 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

Using the output from a video as a texture

If you read the preceding section on rendering to a canvas, you may have thought about rendering video to canvas and using that as input for a texture. That's one way to do it, but Three.js already has direct support to use the HTML5 video element (through WebGL). Check out 24-video-texture.html. Refer to the following screenshot for a still image of this example:

Using video as input for a texture is easily, just like using the canvas element. First we need a video element to play the video:

    <video 
        id="video" 
        style="display: none; position: absolute; left: 15px; top: 75px;"
        src="../../../assets/movies/Big_Buck_Bunny_small.ogv" 
        controls="true" 
        autoplay="true">
    </video>

This is just a basic HTML5...

Previous Section
End of Section 5
Next Section