Learn Three.js by Dirksen, Jos -- Read -- Imperial Library of Trantor

THREE.MeshLambertMaterial THREE.MeshPhongMaterial THREE.MeshStandardMaterial THREE.MeshPhysicalMaterial Creating your own shaders with THREE.ShaderMaterial

Materials you can use for a line geometry

THREE.LineBasicMaterial THREE.LineDashedMaterial

Summary

Learning to Work with Geometries

The basic geometries provided by Three.js

2D geometries

THREE.PlaneGeometry THREE.CircleGeometry

THREE.RingGeometry

THREE.ShapeGeometry

3D geometries

THREE.BoxGeometry THREE.SphereGeometry THREE.CylinderGeometry THREE.ConeGeometry THREE.TorusGeometry THREE.TorusKnotGeometry THREE.PolyhedronGeometry

THREE.IcosahedronGeometry THREE.TetrahedronGeometry THREE.OctahedronGeometry THREE.DodecahedronGeometry

Summary

Advanced Geometries and Binary Operations

THREE.ConvexGeometry THREE.LatheGeometry Creating a geometry by extruding

THREE.ExtrudeGeometry THREE.TubeGeometry Extruding 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

Points and Sprites

Understanding points THREE.Points and THREE.PointsMaterial

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.Points from an advanced geometry Summary

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 models from other supported formats Show proteins from PDB Creating a particle system from a PLY model

Summary

Animations and Moving the Camera

Basic animations

Simple animations Selecting objects Animating with Tween.js

Working with the camera

TrackballControls FlyControls FirstPersonControls OrbitControl

Morphing and skeletal animation

Animation with morph targets Animation with a mixer and morph targets Using multiple THREE.AnimationClip objects 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 Using the gltfLoader Visualize motions captured models using the fbxLoader Loading legacy DirectX models through the xLoader Visualizing a skeleton with the BVHLoader Reusing models from the SEA3D project

Summary

Loading and Working with Textures

Using textures in materials

Loading a texture and applying it to a mesh Using a bump map to create wrinkles Achieving more detailed bumps and wrinkles with a normal map Using a displacement map to alter the position of vertices Adding subtle shadows with an ambient occlusion map Creating fake shadows using a lightmap Metalness and roughness maps Alpha map Emissive map Specular map Creating fake reflections using an environment map

Advanced usage of textures

Custom UV mapping Repeat wrapping

Rendering to a canvas and using it as a texture

Using the canvas as a texture Using the canvas as a bump map

Using the output from a video as a texture Summary

Render Postprocessing

Setting up Three.js for postprocessing

Creating THREE.EffectComposer Configuring THREE.EffectComposer for postprocessing Updating the render loop

Postprocessing passes

Simple postprocessing passes

Using THREE.FilmPass to create a TV-like effect Adding a bloom effect to the scene with THREE.BloomPass Output the scene as a set of dots Showing the output of multiple renderers on the same screen Additional simple passes

Advanced EffectComposer flows using masks Advanced pass - Bokeh Advance pass - ambient occlusion

Using THREE.ShaderPass for custom effects

Simple shaders Blurring shaders

Creating custom postprocessing shaders

Custom grayscale shader Creating a custom bit shader

Summary

Adding Physics and Sounds to Your Scene

Creating a basic Three.js scene with physics Physi.js material properties Physi.js supported shapes Using constraints to limit the movement of objects

Using PointConstraint to limit movement between two points Hinge constraints Limiting movement to a single axis with SliderConstraint Creating a ball-and-socket-joint-like constraint with ConeTwistConstraint Creating detailed control with DOFConstraint

Add sound sources to your scene Summary

Other Books You May Enjoy

Leave a review - let other readers know what you think

← Prev
Back
Next →

← Prev
Back
Next →