Learn Three. js Program 3D Animations and Visualizations for the Web with JavaScript and WebGL
Three.js has become the industry standard for creating stunning 3D WebGL content. In this edition, you'll learn about all the features of Three.js and understand how to integrate it with the newest physics engines. You'll also develop a strong grip on creating and animating immersive 3D sc...
| Autor principal: | |
|---|---|
| Formato: | Libro electrónico |
| Idioma: | Inglés |
| Publicado: |
Birmingham :
Packt Publishing, Limited
2023.
|
| Edición: | 4th ed |
| Materias: | |
| Ver en Biblioteca Universitat Ramon Llull: | https://discovery.url.edu/permalink/34CSUC_URL/1im36ta/alma991009720738406719 |
Tabla de Contenidos:
- Cover
- Title Page
- Copyright and Credits
- Contributors
- Table of Contents
- Preface
- Part 1: Getting Up and Running
- Chapter 1: Creating Your First 3D Scene with Three.js
- Technical requirements
- Getting the source code
- Testing and experimenting with the examples
- Exploring the HTML structure for Three.js applications
- Rendering and viewing a 3D object
- Setting up the scene
- Adding lights
- Adding the meshes
- Adding an animation loop
- Using lil-gui to control properties and make experimenting easier
- Helper objects and util functions
- Summary
- Chapter 2: The Basic Components that Make up a Three.js Application
- Creating a scene
- The basic functionality of a scene
- How geometries and meshes are related
- The properties and functions of a geometry
- Functions and attributes for meshes
- Using different cameras for different scenes
- An orthographic camera versus a perspective camera
- Looking at specific points
- Debugging what a camera looks at
- Summary
- Chapter 3: Working with Light Sources in Three.js
- What lighting types are provided in Three.js?
- Working with basic lights
- THREE.AmbientLight
- THREE.SpotLight
- THREE.PointLight
- THREE.DirectionalLight
- Using the THREE.Color object
- Working with special lights
- THREE.HemisphereLight
- THREE.RectAreaLight
- THREE.LightProbe
- THREE.LensFlare
- Summary
- Part 2: Working with the Three.js Core Components
- Chapter 4: Working with Three.js Materials
- Understanding common material properties
- Basic properties
- Blending properties
- Advanced properties
- Starting with simple materials
- THREE.MeshBasicMaterial
- THREE.MeshDepthMaterial
- Combining materials
- THREE.MeshNormalMaterial
- Multiple materials for a single mesh
- Advanced materials
- THREE.MeshLambertMaterial
- THREE.MeshPhongMaterial.
- THREE.MeshToonMaterial
- THREE.MeshStandardMaterial
- THREE.MeshPhysicalMaterial
- THREE.ShadowMaterial
- Using your own shaders with THREE.ShaderMaterial
- Customizing existing shaders with CustomShaderMaterial
- Materials you can use for a line geometry
- THREE.LineBasicMaterial
- THREE.LineDashedMaterial
- Summary
- Chapter 5: Learning to Work with Geometries
- 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
- Chapter 6: Exploring Advanced Geometries
- Learning advanced geometries
- THREE.ConvexGeometry
- THREE.LatheGeometry
- BoxLineGeometry
- THREE.RoundedBoxGeometry
- TeapotGeometry
- Creating a geometry by extruding a 2D shape
- THREE.ExtrudeGeometry
- THREE.TubeGeometry
- Extruding 3D shapes from an SVG element
- THREE.ParametricGeometry
- Geometries you can use for debugging
- THREE.EdgesGeometry
- THREE.WireFrameGeometry
- Creating a 3D text mesh
- Rendering text
- Adding custom fonts
- Creating text using the Troika library
- Summary
- Chapter 7: Points and Sprites
- Understanding points and sprites
- Styling particles using textures
- Drawing an image on the canvas
- Using textures to style particles
- Working with sprite maps
- Creating THREE.Points from existing geometry
- Summary
- Part 3: Particle Clouds, Loading and Animating Models
- Chapter 8: Creating and Loading Advanced Meshes and Geometries
- Geometry grouping and merging
- Grouping objects together
- Merging geometries
- Loading geometries from external resources.
- Saving and loading in Three.js JSON format
- Importing from 3D file formats
- The OBJ and MTL formats
- Loading a gLTF model
- Showing complete LEGO models
- Loading voxel-based models
- Showing proteins from PDB
- Loading a point cloud from a PLY model
- Other loaders
- Summary
- Chapter 9: Animation and Moving the Camera
- Basic animations
- Simple animations
- Selecting and moving objects
- Animating with Tween.js
- Working with the camera
- ArcballControls
- TrackBallControls
- FlyControls
- FirstPersonControls
- OrbitControls
- Morphing and skeleton animation
- Animation with morph targets
- Animation with a mixer and morph targets
- Animation using bones and skinning
- Creating animations using external models
- Using gltfLoader
- Visualizing motions captured models using fbxLoader
- Loading an animation from a Quake model
- Loading an animation from a COLLADA model
- Visualizing a skeleton with BVHLoader
- Summary
- Chapter 10: Loading and Working with Textures
- Using textures in materials
- Loading a texture and applying it to a mesh
- Using a bump map to provide extra details to a mesh
- 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 lighting using a lightmap
- Metalness and roughness maps
- Using an alpha map to create transparent models
- Using an emissive map for models that glow
- Using a specular map to determine shininess
- Creating fake reflections using an environment map
- Repeat wrapping
- Rendering to a canvas and using it as a texture
- Using the canvas as a color map
- Using the canvas as a bump map
- Using the output from a video as a texture
- Summary
- Part 4: Post-Processing, Physics, and Sounds.
- Chapter 11: 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
- 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
- Chapter 12: Adding Physics and Sounds to Your Scene
- Creating a basic Three.js scene with Rapier
- Setting up the world and creating the descriptions
- Rendering the scene and simulating the world
- Simulating dominos in Rapier
- Working with restitution and friction
- Rapier-supported shapes
- Using joints to limit the movement of objects
- Connecting two objects with a fixed joint
- Connecting objects with a spherical joint
- Limiting rotation with a revolute joint
- Limiting movement to a single axis with a prismatic joint
- Adding sound sources to your scene
- Summary
- Chapter 13: Working with Blender and Three.js
- Exporting from Three.js and importing into Blender
- Exporting a static scene from Blender and importing it into Three.js
- Exporting an animation from Blender and importing it into Three.js
- Baking lightmaps and ambient occlusion maps in Blender
- Setting up a scene in Blender
- Adding lighting to the scene
- Baking the light textures
- Exporting the scene and importing it into Blender
- Baking an ambient occlusion map in Blender
- Custom UV modeling in Blender
- Summary
- Chapter 14: Three.js Together with React, TypeScript, and Web-XR
- Using Three.js with TypeScript.
- Using Three.js and React with TypeScript
- Using Three.js and React with React Three Fiber
- Three.js and VR
- Three.js and AR
- Summary
- Index
- Other Books You May Enjoy.
