Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Three.js Cookbook

By : Jos Dirksen

4 (8)

Three.js Cookbook

4 (8)

By: Jos Dirksen

Overview of this book

This book is ideal for anyone who already knows JavaScript and would like to get a broad understanding of Three.js quickly, or for those of you who have a basic grasp of using Three.js but want to really make an impact with your 3D visualizations by learning its advanced features. To apply the recipes in this book you don’t need to know anything about WebGL; all you need is some general knowledge about JavaScript and HTML.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Free Chapter

1. Getting Started

1. Getting Started

Introduction

Getting started with the WebGL renderer

Getting started with the Canvas renderer

Getting started with the CSS 3D renderer

Detecting WebGL support

Setting up an animation loop

Determining the frame rate for your scene

Controlling the variables used in the scene

Setting up a local web server with Python

Setting up a local web server with Node.js

Setting up a local web server using Mongoose

Solving cross-origin-domain error messages in Chrome

Solving cross-origin-domain error messages in Firefox

Adding keyboard controls

Loading textures asynchronously

Loading models asynchronously

Loading models asynchronously with progress

Loading other resources asynchronously with progress

Waiting until resources are loaded

Dragging a file from the desktop to the scene

2. Geometries and Meshes

2. Geometries and Meshes

Introduction

Rotating an object around its own axis

Rotating an object around a point in space

Informing Three.js about updates

Working with a large number of objects

Creating geometries from height maps

Pointing an object to another object

Writing text in 3D

Rendering 3D formulas as 3D geometries

Extending Three.js with a custom geometry object

Creating a spline curve between two points

Creating and exporting a model from Blender

Using OBJMTLLoader with multiple materials

Applying matrix transformations

3. Working with the Camera

3. Working with the Camera

Introduction

Making the camera follow an object

Zooming the camera to an object

Using a perspective camera

Using an orthographic camera

Creating a 2D overlay

Rotating the camera around a scene

Matching the rendered view to a resized browser

Converting world coordinates to screen coordinates

Selecting an object in the scene

4. Materials and Textures

4. Materials and Textures

Introduction

Adding depth to a mesh with a bump map

Adding depth to a mesh with a normal map

Using HTML canvas as a texture

Using HTML video as a texture

Creating a mesh with multiple materials

Using separate materials for faces

Setting up repeating textures

Making part of an object transparent

Using a cubemap to create reflective materials

Using a dynamic cubemap to create reflective materials

Using Blender to create custom UV mapping

Configuring blend modes

Using a shadow map for fixed shadows

5. Lights and Custom Shaders

5. Lights and Custom Shaders

Introduction

Creating shadows with THREE.SpotLight

Creating shadows with THREE.DirectionalLight

Softening lights by adding ambient lighting

Using THREE.HemisphereLight for natural lighting

Adding a moving all-directional light

Moving a light source along a path

Making a light source follow an object

Creating a custom vertex shader

Creating a custom fragment shader

6. Point Clouds and Postprocessing

6. Point Clouds and Postprocessing

Introduction

Creating a point cloud based on a geometry

Creating a point cloud from scratch

Coloring the individual points in a point cloud

Styling individual points

Moving individual points of a point cloud

Exploding a point cloud

Setting up the basic postprocessing pipeline

Creating custom postprocessing steps

Saving WebGL output to disk

7. Animation and Physics

7. Animation and Physics

Introduction

Creating animations with Tween.js

Animating using morph targets

Animating with skeletons

Using morph animations created in Blender

Using skeleton animations created in Blender

Adding a simple collision detection

Saving a movie of an animation in Chrome

Dragging and dropping objects around a scene

Adding a physics engine

Index

Index

Setting up a local web server with Node.js

If you would like to test your Three.js applications, then as described in the How to set up a local web server with Python recipe, you can run it in three different ways. This recipe will focus on the Node.js approach.

Getting ready

To run a local web server with Node.js (https://nodejs.org), we first have to check whether we've got npm (the node package manager, which is installed together with Node.js) installed. You can check this by running the npm command from the command line:

> npm

If the output is similar to the following code snippet, you've got npm installed and you are ready to begin the recipe:

Usage: npm <command>
where ...

How to do it...

You can use it to run a simple web server using:
```
Usage: npm <command>...
```
Now, you are ready to install a web server by running:
```
> npm install -g http-server
```

Finally, you are ready to start the web server by running http-server from the command line:

> http-server
Starting up http-server, serving ./ on port: 8080
Hit CTRL-C to stop the server

A final recipe for running your own web server is presented in the next section. In that recipe you don't need Python or Node.js installed, but we will show you how to download a portable web server that you can run without requiring any installation.

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Three.js Cookbook

Search

Your notes and bookmarks