Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

By : Jos Dirksen

4.4 (14)

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

4.4 (14)

By: Jos Dirksen

Overview of this book

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.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

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

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

Requirements to use Three.js

Getting the source code

Creating the HTML skeleton

Rendering and viewing a 3D object

Adding materials, lights, and shadows

Expanding your first scene with animations

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

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

Creating a scene

Geometries and meshes

Different cameras for different uses

Summary

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

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

Different kinds of lighting provided by Three.js

Basic lights

Special lights

Summary

4. Working with Three.js Materials

4. Working with Three.js Materials

Understanding common material properties

Starting with a simple mesh

Advanced materials

Materials you can use for a line geometry

Summary

5. Learning to Work with Geometries

5. Learning to Work with Geometries

The basic geometries provided by Three.js

Summary

6. Advanced Geometries and Binary Operations

6. Advanced Geometries and Binary Operations

THREE.ConvexGeometry

THREE.LatheGeometry

Creating 3D text

Using binary operations to combine meshes

Summary

7. Particles, Sprites, and the Point Cloud

7. Particles, Sprites, and the Point Cloud

Understanding particles

Particles, THREE.PointCloud, and THREE.PointCloudMaterial

Styling particles with the HTML5 canvas

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

8. Creating and Loading Advanced Meshes and Geometries

Geometry grouping and merging

Summary

9. Animations and Moving the Camera

9. Animations and Moving the Camera

Basic animations

Working with the camera

Morphing and skeletal animation

Creating animations using external models

Summary

10. Loading and Working with Textures

10. Loading and Working with Textures

Using textures in materials

Advanced usage of textures

Summary

11. Custom Shaders and Render Postprocessing

11. Custom Shaders and Render Postprocessing

Setting up Three.js for postprocessing

Postprocessing passes

Creating custom postprocessing shaders

Summary

12. Adding Physics and Sounds to Your Scene

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

Summary

Index

Index

Summary

We discussed a lot of items in this second introduction chapter. We showed all the functions and properties of THREE.Scene and explained how you can use these properties to configure your main scene. We also showed you how you can create geometries. You can either create them from scratch using a THREE.Geometry object or use any of the built-in geometries Three.js provides. Finally, we showed you how you can configure the two cameras Three.js provides. THREE.PerspectiveCamera renders a scene using a real-world perspective, and THREE.OrthographicCamera provides a fake 3D effect also often seen in games. We've also introduced how geometries work in Three.js. You can now easily create your own geometries.

In the next chapter, we'll look at the various light sources that are available in Three.js. You'll learn how the various light sources behave, how to create and configure them, and how they affect specific materials.

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.

Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition

Search

Your notes and bookmarks