Learning Three.js - the JavaScript 3D Library for WebGL

Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By : Jos Dirksen

Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

Learning Three.js – the JavaScript 3D Library for WebGL Second Edition

Learning Three.js – the JavaScript 3D Library for WebGL Second Edition

Credits

About the Author

About the Author

Acknowledgments

Acknowledgments

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Free Chapter

Creating Your First 3D Scene with Three.js

Creating Your First 3D Scene with Three.js

Requirements to use 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 browser size changes

Basic Components That Make Up a Three.js Scene

Basic Components That Make Up a Three.js Scene

Creating a scene

Geometries and meshes

Different cameras for different uses

Working with the Different Light Sources Available in Three.js

Working with the Different Light Sources Available in Three.js

Different kinds of lighting provided by Three.js

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

Learning to Work with Geometries

Learning to Work with Geometries

The basic geometries provided by Three.js

Advanced Geometries and Binary Operations

Advanced Geometries and Binary Operations

THREE.ConvexGeometry

THREE.LatheGeometry

Creating 3D text

Using binary operations to combine meshes

Particles, Sprites, and the Point Cloud

Particles, Sprites, and the Point Cloud

Understanding particles

Particles, THREE.PointCloud, and THREE.PointCloudMaterial

Styling particles with the HTML5 canvas

Using textures to style particles

Working with sprite maps

Creating THREE.PointCloud from an advanced geometry

Creating and Loading Advanced Meshes and Geometries

Creating and Loading Advanced Meshes and Geometries

Geometry grouping and merging

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

Loading and Working with Textures

Loading and Working with Textures

Using textures in materials

Advanced usage of textures

Custom Shaders and Render Postprocessing

Custom Shaders and Render Postprocessing

Setting up Three.js for postprocessing

Postprocessing passes

Creating custom postprocessing shaders

Adding Physics and Sounds to Your Scene

Adding Physics and Sounds to Your Scene

Creating a basic Three.js scene

Material properties

Basic supported shapes

Using constraints to limit movement of objects

Index

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Basic supported shapes

Physijs provides a number of shapes you can use to wrap your geometries. In this section, we'll walk you through all the available Physijs meshes and demonstrate these meshes through an example. Remember that all you have to do to use these meshes is replace the THREE.Mesh constructor with one of these meshes.

The following table provides an overview of the meshes that are available in Physijs:

Name	Description
`Physijs.PlaneMesh`	This mesh can be used to create a zero-thickness plane. You could also use `BoxMesh` for this together with `THREE.BoxGeometry` with low height.
`Physijs.BoxMesh`	If you have geometries that look like cubes, use this mesh. For instance, this is a good match for `THREE.BoxGeometry`.
`Physijs.SphereMesh`	For sphere shapes, use this geometry. This geometry is a good match for `THREE.SphereGeometry`.
`Physijs.CylinderMesh`	With `THREE.Cylinder`, you can create various cylinder-like shapes. Physijs provides multiple meshes depending on the shape...