book

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

Name: Learning Three.js: The JavaScript 3D Library for WebGL - Second Edition
Author: Jos Dirksen
ISBN: 9781784392215

by Jos Dirksen

March 2015

Beginner to intermediate

422 pages

9h 9m

English

Packt Publishing

Read now

Unlock full access

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 moreWhy 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 codeDownloading the color images of this bookErrataPiracyQuestions
1. Creating Your First 3D Scene with Three.js
Requirements to use Three.js
Getting the source code
Using Git to clone the repositoryDownloading and extracting the archiveTesting the examplesPython-based web servers should work on most Unix/Mac systemsNpm-based web server if you've worked with Node.jsPortable version Mongoose for Mac and/or WindowsDisabling 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 requestAnimationFrameAnimating the cubeBouncing 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 sceneBasic functionality of a sceneAdding fog to the sceneUsing the overrideMaterial property
Geometries and meshes
The properties and functions of a geometryFunctions and attributes for meshes
Different cameras for different uses
Orthographic camera versus perspective cameraLooking 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.AmbientLightUsing the THREE.Color objectTHREE.PointLightTHREE.SpotLightTHREE.DirectionalLight
Special lights
THREE.HemisphereLightTHREE.AreaLightLensFlare
Summary
4. Working with Three.js Materials
Understanding common material propertiesBasic propertiesBlending propertiesAdvanced properties
Starting with a simple mesh
THREE.MeshBasicMaterialTHREE.MeshDepthMaterialCombining materialsTHREE.MeshNormalMaterialTHREE.MeshFaceMaterial
Advanced materials
THREE.MeshLambertMaterialTHREE.MeshPhongMaterialCreating your own shaders with THREE.ShaderMaterial
Materials you can use for a line geometry
THREE.LineBasicMaterialTHREE.LineDashedMaterial
Summary
5. Learning to Work with Geometries
The basic geometries provided by Three.jsTwo-dimensional geometriesTHREE.PlaneGeometryTHREE.CircleGeometryTHREE.RingGeometryTHREE.ShapeGeometryThree-dimensional geometriesTHREE.BoxGeometryTHREE.SphereGeometryTHREE.CylinderGeometryTHREE.TorusGeometryTHREE.TorusKnotGeometryTHREE.PolyhedronGeometryTHREE.IcosahedronGeometryTHREE.TetrahedronGeometryTHREE.Octahedron GeometryTHREE.DodecahedronGeometry
Summary
6. Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating a geometry by extrudingTHREE.ExtrudeGeometryTHREE.TubeGeometryExtrude from SVGTHREE.ParametricGeometry
Creating 3D text
Rendering textAdding custom fonts
Using binary operations to combine meshes
The subtract functionThe intersect functionThe 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.CanvasRendererUsing 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 mergingGrouping objects togetherMerging multiple meshes into a single meshLoading geometries from external resourcesSaving and loading in Three.js JSON formatSaving and loading THREE.MeshSaving and loading a sceneWorking with BlenderInstalling the Three.js exporter in BlenderLoading and exporting a model from BlenderImporting from 3D file formatsThe OBJ and MTL formatsLoading a Collada modelLoading the STL, CTM, VTK, AWD, Assimp, VRML, and Babylon modelsShow proteins from Protein Data BankCreating a particle system from a PLY model
Summary
9. Animations and Moving the Camera
Basic animationsSimple animationsSelecting objectsAnimating with Tween.js
Working with the camera
TrackballControlsFlyControlsRollControlsFirstPersonControlsOrbitControl
Morphing and skeletal animation
Animation with morph targetsAnimation with MorphAnimMeshCreating an animation by setting the morphTargetInfluence propertyAnimation using bones and skinning
Creating animations using external models
Creating a bones animation using BlenderLoading an animation from a Collada modelAnimation loaded from a Quake model
Summary
10. Loading and Working with Textures
Using textures in materialsLoading a texture and applying it to a meshUsing a bump map to create wrinklesAchieving more detailed bumps and wrinkles with a normal mapCreating fake shadows using a light mapCreating fake reflections using an environment mapSpecular map
Advanced usage of textures
Custom UV mappingRepeat wrappingRendering to canvas and using it as a textureUsing the canvas as a textureUsing the canvas as a bump mapUsing the output from a video as a texture
Summary
11. Custom Shaders and Render Postprocessing
Setting up Three.js for postprocessingCreating THREE.EffectComposerConfiguring THREE.EffectComposer for postprocessingUpdating the render loop
Postprocessing passes
Simple postprocessing passesUsing THREE.FilmPass to create a TV-like effectAdding a bloom effect to the scene with THREE.BloomPassOutput the scene as a set of dotsShowing the output of multiple renderers on the same screenAdvanced EffectComposer flows using masksUsing THREE.ShaderPass for custom effectsSimple shadersBlurring shadersAdvanced shaders
Creating custom postprocessing shaders
Custom grayscale shaderCreating a custom bit shader
Summary
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
Using PointConstraint to limit movement between two pointsCreating door-like constraints with HingeConstraintLimiting movement to a single axis with SliderConstraintCreating a ball-and-socket-joint-like constraint with ConeTwistConstraintCreating detailed control with DOFConstraintAdd sound sources to your scene
Summary
Index

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

Creating custom postprocessing shaders

In this section, you'll learn how to create a custom shader that you can use in postprocessing. We'll create two different shaders. The first one will convert the current image into a grayscale image, and the second one will convert the image into an 8-bit image by reducing the number of colors that are available. Note that creating vertex and fragment shaders is a very broad subject. In this section, we only touch the surface of what can be done by these shaders and how they work. For more in-depth information, you can find the WebGL specification at http://www.khronos.org/webgl/. An additional good resource full of examples is Shadertoy at https://www.shadertoy.com/.

Custom grayscale shader

To create a

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Programming 3D Applications in HTML5 and WebGL

Publisher Resources

ISBN: 9781784392215

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

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

by Jos Dirksen

Creating custom postprocessing shaders

Custom grayscale shader

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.