Three.js Cookbook电子书

Three.js Cookbook

Table of Contents

Three.js Cookbook

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

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

1. Getting Started

Introduction

Getting started with the WebGL renderer

Getting ready

How to do it...

See also

Getting started with the Canvas renderer

Getting ready

How to do it...

How it works...

See also

Getting started with the CSS 3D renderer

Getting ready

How to do it...

How it works...

See also

Detecting WebGL support

Getting ready

How to do it...

Setting up an animation loop

Getting ready

How to do it...

See also

Determining the frame rate for your scene

Getting ready

How to do it...

How it works...

Controlling the variables used in the scene

Getting ready

How to do it...

There's more...

Setting up a local web server with Python

Getting ready

How to do it...

Setting up a local web server with Node.js

Getting ready

How to do it...

Setting up a local web server using Mongoose

Getting ready

How to do it...

See also

Solving cross-origin-domain error messages in Chrome

How to do it...

Solving cross-origin-domain error messages in Firefox

How to do it...

How it works...

See also

Adding keyboard controls

Getting ready

How to do it...

How it works...

There's more...

See also

Loading textures asynchronously

Getting ready

How to do it...

How it works...

See also

Loading models asynchronously

Getting ready

How to do it...

There is more...

Loading models asynchronously with progress

Getting started

How to do it...

Loading other resources asynchronously with progress

Getting ready

How to do it...

Waiting until resources are loaded

Getting ready

How to do it...

How it works...

There is more...

See also

Dragging a file from the desktop to the scene

Getting ready

How to do it...

How it works...

2. Geometries and Meshes

Introduction

Rotating an object around its own axis

Getting ready

How to do it...

How it works...

See also

Rotating an object around a point in space

Getting ready

How to do it...

How it works...

See also

Informing Three.js about updates

Getting ready

How to do it...

How it works...

See also

Working with a large number of objects

Getting ready

How to do it...

How it works...

See also

Creating geometries from height maps

Getting ready

How to do it...

How it works...

There's more…

See also

Pointing an object to another object

Getting ready

How to do it...

How it works...

There's more…

See also

Writing text in 3D

Getting ready

How to do it...

How it works...

There's more…

Rendering 3D formulas as 3D geometries

Getting ready

How to do it...

How it works...

There's more…

Extending Three.js with a custom geometry object

Getting ready

How to do it...

How it works...

There's more...

Creating a spline curve between two points

Getting ready

How to do it...

How it works...

There's more…

Creating and exporting a model from Blender

Getting ready

How to do it...

See also

Using OBJMTLLoader with multiple materials

Getting ready

How to do it...

How it works...

There's more…

See also

Applying matrix transformations

Getting ready

How to do it...

How it works

There's more…

See also

3. Working with the Camera

Introduction

Making the camera follow an object

Getting ready

How to do it...

How it works...

There's more…

See also

Zooming the camera to an object

Getting ready

How to do it...

How it works...

There's more…

Using a perspective camera

Getting ready

How to do it...

How it works...

There's more…

See also

Using an orthographic camera

Getting ready

How to do it...

How it works...

There's more…

See also

Creating a 2D overlay

Getting ready

How to do it...

How it works...

See also

Rotating the camera around a scene

Getting ready

How to do it...

How it works...

There's more…

See also

Matching the rendered view to a resized browser

Getting ready

How to do it...

How it works...

Converting world coordinates to screen coordinates

Getting ready

How to do it...

How it works...

See also

Selecting an object in the scene

Getting ready

How to do it...

How it works...

There's more

See also

4. Materials and Textures

Introduction

Adding depth to a mesh with a bump map

Getting ready

How to do it...

How it works...

There's more…

See also

Adding depth to a mesh with a normal map

Getting ready

How to do it...

How it works...

There's more…

See also

Using HTML canvas as a texture

Getting ready

How to do it...

How it works...

See also

Using HTML video as a texture

Getting ready

How to do it...

How it works...

There's more…

See also

Creating a mesh with multiple materials

Getting ready

How to do it...

How it works...

See also

Using separate materials for faces

Getting ready

How to do it...

How it works...

There's more…

See also

Setting up repeating textures

Getting ready

How to do it...

How it works...

See also

Making part of an object transparent

Getting ready

How to do it...

There's more…

See also

Using a cubemap to create reflective materials

Getting ready

How to do it...

How it works...

There's more...

See also

Using a dynamic cubemap to create reflective materials

Getting ready

How to do it...

How it works...

There's more…

See also

Using Blender to create custom UV mapping

Getting ready

How to do it...

There's more…

See also

Configuring blend modes

Getting ready

How to do it...

How it works...

There's more…

Using a shadow map for fixed shadows

Getting ready

How to do it...

See also

5. Lights and Custom Shaders

Introduction

Creating shadows with THREE.SpotLight

Getting ready

How to do it...

How it works...

See also

Creating shadows with THREE.DirectionalLight

Getting ready

How to do it...

How it works...

See also

Softening lights by adding ambient lighting

Getting ready

How to do it...

How it works...

See also

Using THREE.HemisphereLight for natural lighting

Getting ready

How to do it...

How it works...

There's more…

See also

Adding a moving all-directional light

Getting ready

How to do it...

How it works...

See also

Moving a light source along a path

Getting ready

How to do it...

How it works...

There's more…

Making a light source follow an object

Getting ready

How to do it...

There's more…

See also

Creating a custom vertex shader

Getting ready

How to do it...

How it works...

There's more…

See also

Creating a custom fragment shader

Getting ready

How to do it...

How it works...

There's more…

See also

6. Point Clouds and Postprocessing

Introduction

Creating a point cloud based on a geometry

Getting ready

How to do it...

How it works...

There's more...

See also

Creating a point cloud from scratch

Getting ready

How to do it...

How it works...

There's more…

See also

Coloring the individual points in a point cloud

Getting ready

How to do it...

How it works...

See also

Styling individual points

Getting ready

How to do it…

How it works...

There's more…

See also

Moving individual points of a point cloud

Getting ready

How to do it...

How it works...

See also

Exploding a point cloud

Getting ready

How to do it…

There's more

See also

Setting up the basic postprocessing pipeline

Getting ready

How to do it...

How it works...

There's more

See also

Creating custom postprocessing steps

Getting ready

How to do it…

How it works...

There's more…

See also

Saving WebGL output to disk

Getting ready

How to do it...

How it works...

There's more

7. Animation and Physics

Introduction

Creating animations with Tween.js

Getting ready

How to do it…

How it works…

There's more…

See also

Animating using morph targets

Getting ready

How to do it…

How it works…

There's more…

See also

Animating with skeletons

Getting ready

How to do it…

How it works…

There's more…

See also

Using morph animations created in Blender

Getting ready

How to do it…

There's more…

See also

Using skeleton animations created in Blender

Getting ready

How to do it…

How it works…

There's more…

See also

Adding a simple collision detection

Getting ready

How to do it…

How it works…

There's more…

See also

Saving a movie of an animation in Chrome

Getting ready

How to do it…

There's more…

See also

Dragging and dropping objects around a scene

Getting ready

How to do it…

There's more…

See also

Adding a physics engine

Getting ready

How to do it…

How it works…

There's more…

See also

Index