book

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

by Jos Dirksen

March 2015

Beginner to intermediate

422 pages

9h 9m

English

Packt Publishing

Read now

Unlock full access

Support files, eBooks, discount offers, and moreWhy subscribe?Free access for Packt account holders
What this book covers

Downloading the example codeDownloading the color images of this bookErrataPiracyQuestions
Requirements to use Three.js
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
Introducing requestAnimationFrameAnimating the cubeBouncing the ball
Creating a sceneBasic functionality of a sceneAdding fog to the sceneUsing the overrideMaterial property
The properties and functions of a geometryFunctions and attributes for meshes
Orthographic camera versus perspective cameraLooking at specific points
Different kinds of lighting provided by Three.js
THREE.AmbientLightUsing the THREE.Color objectTHREE.PointLightTHREE.SpotLightTHREE.DirectionalLight
THREE.HemisphereLightTHREE.AreaLightLensFlare
Understanding common material propertiesBasic propertiesBlending propertiesAdvanced properties
THREE.MeshBasicMaterialTHREE.MeshDepthMaterialCombining materialsTHREE.MeshNormalMaterialTHREE.MeshFaceMaterial
THREE.MeshLambertMaterialTHREE.MeshPhongMaterialCreating your own shaders with THREE.ShaderMaterial
THREE.LineBasicMaterialTHREE.LineDashedMaterial
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
THREE.ConvexGeometry
Creating a geometry by extrudingTHREE.ExtrudeGeometryTHREE.TubeGeometryExtrude from SVGTHREE.ParametricGeometry
Rendering textAdding custom fonts
The subtract functionThe intersect functionThe union function
Understanding particles
Using HTML5 canvas with THREE.CanvasRendererUsing HTML5 canvas with WebGLRenderer
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
Basic animationsSimple animationsSelecting objectsAnimating with Tween.js
TrackballControlsFlyControlsRollControlsFirstPersonControlsOrbitControl
Animation with morph targetsAnimation with MorphAnimMeshCreating an animation by setting the morphTargetInfluence propertyAnimation using bones and skinning
Creating a bones animation using BlenderLoading an animation from a Collada modelAnimation loaded from a Quake model
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
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
Setting up Three.js for postprocessingCreating THREE.EffectComposerConfiguring THREE.EffectComposer for postprocessingUpdating the render loop
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
Custom grayscale shaderCreating a custom bit shader
Creating a basic Three.js scene
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

Overview

Are you ready to bring your 3D design ideas to life in a web browser? Learning Three.js provides a comprehensive guide to creating 3D graphics with the Three.js JavaScript library. You'll develop the skills needed to design and render interactive 3D scenes, all while gaining practical experience in animation, lighting, and physics.

What this Book will help me do

Master the fundamentals of the Three.js library to create sophisticated 3D models for the web.
Impress visitors by creating realistic lighting, shadows, and materials in your 3D scenes.
Expand your creativity by importing and animating custom models using external formats.
Dive deep into advanced features like custom shaders for unique visual effects.
Learn to apply physics to your creations to make your scenes interactive and dynamic.

Author(s)

Jos Dirksen is an experienced 3D graphics programmer and a specialist in JavaScript and web technologies. His hands-on experience in developing interactive applications ensures you benefit from practical, real-world knowledge. Through his engaging writing, Jos makes complex topics accessible to readers of all levels.

Who is it for?

This book is ideal for JavaScript developers who are interested in creating 3D graphics or interactive experiences on the web. No prior experience with graphics programming or WebGL is necessary, making it beginner-friendly. Advanced users can also benefit from its in-depth exploration of features. It's perfect for developers who want to enhance their websites with advanced visual experiences.