Learning Three.js – the JavaScript 3D Library for WebGL - Second Edition电子书

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

Table of Contents

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

Credits

About the Author

Acknowledgments

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers, and more

Why subscribe?

Free access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Creating Your First 3D Scene with Three.js

Requirements to use Three.js

Getting the source code

Using Git to clone the repository

Downloading and extracting the archive

Testing the examples

Python-based web servers should work on most Unix/Mac systems

Npm-based web server if you've worked with Node.js

Portable version Mongoose for Mac and/or Windows

Disabling security exceptions in Firefox and Chrome

Creating the HTML skeleton

Rendering and viewing a 3D object

Adding materials, lights, and shadows

Expanding your first scene with animations

Introducing requestAnimationFrame

Animating the cube

Bouncing the ball

Using dat.GUI to make experimenting easier

Automatically resize the output when browser size changes

Summary

2. Basic Components That Make Up a Three.js Scene

Creating a scene

Basic functionality of a scene

Adding fog to the scene

Using the overrideMaterial property

Geometries and meshes

The properties and functions of a geometry

Functions and attributes for meshes

Different cameras for different uses

Orthographic camera versus perspective camera

Looking at specific points

Summary

3. Working with the Different Light Sources Available in Three.js

Different kinds of lighting provided by Three.js

Basic lights

THREE.AmbientLight

Using the THREE.Color object

THREE.PointLight

THREE.SpotLight

THREE.DirectionalLight

Special lights

THREE.HemisphereLight

THREE.AreaLight

LensFlare

Summary

4. Working with Three.js Materials

Understanding common material properties

Basic properties

Blending properties

Advanced properties

Starting with a simple mesh

THREE.MeshBasicMaterial

THREE.MeshDepthMaterial

Combining materials

THREE.MeshNormalMaterial

THREE.MeshFaceMaterial

Advanced materials

THREE.MeshLambertMaterial

THREE.MeshPhongMaterial

Creating your own shaders with THREE.ShaderMaterial

Materials you can use for a line geometry

THREE.LineBasicMaterial

THREE.LineDashedMaterial

Summary

5. Learning to Work with Geometries

The basic geometries provided by Three.js

Two-dimensional geometries

THREE.PlaneGeometry

THREE.CircleGeometry

THREE.RingGeometry

THREE.ShapeGeometry

Three-dimensional geometries

THREE.BoxGeometry

THREE.SphereGeometry

THREE.CylinderGeometry

THREE.TorusGeometry

THREE.TorusKnotGeometry

THREE.PolyhedronGeometry

THREE.IcosahedronGeometry

THREE.TetrahedronGeometry

THREE.Octahedron Geometry

THREE.DodecahedronGeometry

Summary

6. Advanced Geometries and Binary Operations

THREE.ConvexGeometry

THREE.LatheGeometry

Creating a geometry by extruding

THREE.ExtrudeGeometry

THREE.TubeGeometry

Extrude from SVG

THREE.ParametricGeometry

Creating 3D text

Rendering text

Adding custom fonts

Using binary operations to combine meshes

The subtract function

The intersect function

The union function

Summary

7. Particles, Sprites, and the Point Cloud

Understanding particles

Particles, THREE.PointCloud, and THREE.PointCloudMaterial

Styling particles with the HTML5 canvas

Using HTML5 canvas with THREE.CanvasRenderer

Using HTML5 canvas with WebGLRenderer

Using textures to style particles

Working with sprite maps

Creating THREE.PointCloud from an advanced geometry

Summary

8. Creating and Loading Advanced Meshes and Geometries

Geometry grouping and merging

Grouping objects together

Merging multiple meshes into a single mesh

Loading geometries from external resources

Saving and loading in Three.js JSON format

Saving and loading THREE.Mesh

Saving and loading a scene

Working with Blender

Installing the Three.js exporter in Blender

Loading and exporting a model from Blender

Importing from 3D file formats

The OBJ and MTL formats

Loading a Collada model

Loading the STL, CTM, VTK, AWD, Assimp, VRML, and Babylon models

Show proteins from Protein Data Bank

Creating a particle system from a PLY model

Summary

9. Animations and Moving the Camera

Basic animations

Simple animations

Selecting objects

Animating with Tween.js

Working with the camera

TrackballControls

FlyControls

RollControls

FirstPersonControls

OrbitControl

Morphing and skeletal animation

Animation with morph targets

Animation with MorphAnimMesh

Creating an animation by setting the morphTargetInfluence property

Animation using bones and skinning

Creating animations using external models

Creating a bones animation using Blender

Loading an animation from a Collada model

Animation loaded from a Quake model

Summary

10. Loading and Working with Textures

Using textures in materials

Loading a texture and applying it to a mesh

Using a bump map to create wrinkles

Achieving more detailed bumps and wrinkles with a normal map

Creating fake shadows using a light map

Creating fake reflections using an environment map

Specular map

Advanced usage of textures

Custom UV mapping

Repeat wrapping

Rendering to canvas and using it as a texture

Using the canvas as a texture

Using the canvas as a bump map

Using the output from a video as a texture

Summary

11. Custom Shaders and Render Postprocessing

Setting up Three.js for postprocessing

Creating THREE.EffectComposer

Configuring THREE.EffectComposer for postprocessing

Updating the render loop

Postprocessing passes

Simple postprocessing passes

Using THREE.FilmPass to create a TV-like effect

Adding a bloom effect to the scene with THREE.BloomPass

Output the scene as a set of dots

Showing the output of multiple renderers on the same screen

Advanced EffectComposer flows using masks

Using THREE.ShaderPass for custom effects

Simple shaders

Blurring shaders

Advanced shaders

Creating custom postprocessing shaders

Custom grayscale shader

Creating a custom bit shader

Summary

12. 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

Using PointConstraint to limit movement between two points

Creating door-like constraints with HingeConstraint

Limiting movement to a single axis with SliderConstraint

Creating a ball-and-socket-joint-like constraint with ConeTwistConstraint

Creating detailed control with DOFConstraint

Add sound sources to your scene

Summary

Index