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

Jos Dirksen

• Publisher: Packt Publishing
• Year: 2015
• eBook ISBN: 9781784391027
• Topic: Ciencia de la computación
• Subtopic: Gráficos computacionales

About This Book

• Enhance your 3D graphics with light sources, shadows, advanced materials, and textures
• Load models from external sources, and visualize and animate them directly from JavaScript
• Each subject is explained using extensive examples that you can use directly and adapt for your own purposes

Who This Book Is For

If you know JavaScript and want to start creating 3D graphics that run in any browser, this book is a great choice for you. You don't need to know anything about math or WebGL; all that you need is general knowledge of JavaScript and HTML.

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

Table of contents

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