Title Page
Copyright and Credits
Learn Three.jsThird Edition
PacktPub.com
Why subscribe?
PacktPub.com
Contributors
About the author
About the reviewer
Packt is searching for authors like you
Preface
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Reviews
Creating Your First 3D Scene with Three.js
Requirements for using 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/macOS systems
Npm-based web server if you've worked with Node.js
Portable version Mongoose for macOS and/or Windows
Running from the filesystem by 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 the browser size changes
Summary
The Basic Components that Make Up a Three.js Application
Creating a scene
The 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
Working with Light Sources in Three.js
The different kinds of lighting provided by Three.js
Basic lights
THREE.AmbientLight
Using the THREE.Color object
THREE.SpotLight
THREE.PointLight
THREE.DirectionalLight
Special lights
THREE.HemisphereLight
THREE.AreaLight
Lens flare
Summary
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
Multiple materials for a single mesh
Advanced materials
THREE.MeshLambertMaterial
THREE.MeshPhongMaterial
THREE.MeshStandardMaterial
THREE.MeshPhysicalMaterial
Creating your own shaders with THREE.ShaderMaterial
Materials you can use for a line geometry
THREE.LineBasicMaterial
THREE.LineDashedMaterial
Summary
Learning to Work with Geometries
The basic geometries provided by Three.js
2D geometries
THREE.PlaneGeometry
THREE.CircleGeometry
THREE.RingGeometry
THREE.ShapeGeometry
3D geometries
THREE.BoxGeometry
THREE.SphereGeometry
THREE.CylinderGeometry
THREE.ConeGeometry
THREE.TorusGeometry
THREE.TorusKnotGeometry
THREE.PolyhedronGeometry
THREE.IcosahedronGeometry
THREE.TetrahedronGeometry
THREE.OctahedronGeometry
THREE.DodecahedronGeometry
Summary
Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating a geometry by extruding
THREE.ExtrudeGeometry
THREE.TubeGeometry
Extruding 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
Points and Sprites
Understanding points
THREE.Points and THREE.PointsMaterial
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.Points from an advanced geometry
Summary
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 models from other supported formats
Show proteins from PDB
Creating a particle system from a PLY model
Summary
Animations and Moving the Camera
Basic animations
Simple animations
Selecting objects
Animating with Tween.js
Working with the camera
TrackballControls
FlyControls
FirstPersonControls
OrbitControl
Morphing and skeletal animation
Animation with morph targets
Animation with a mixer and morph targets
Using multiple THREE.AnimationClip objects
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
Using the gltfLoader
Visualize motions captured models using the fbxLoader
Loading legacy DirectX models through the xLoader
Visualizing a skeleton with the BVHLoader
Reusing models from the SEA3D project
Summary
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
Using a displacement map to alter the position of vertices
Adding subtle shadows with an ambient occlusion map
Creating fake shadows using a lightmap
Metalness and roughness maps
Alpha map
Emissive map
Specular map
Creating fake reflections using an environment map
Advanced usage of textures
Custom UV mapping
Repeat wrapping
Rendering to a 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
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
Additional simple passes
Advanced EffectComposer flows using masks
Advanced pass - Bokeh
Advance pass - ambient occlusion
Using THREE.ShaderPass for custom effects
Simple shaders
Blurring shaders
Creating custom postprocessing shaders
Custom grayscale shader
Creating a custom bit shader
Summary
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
Using PointConstraint to limit movement between two points
Hinge constraints
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
Other Books You May Enjoy
Leave a review - let other readers know what you think