Interactive Web Development with Three.js and A-Frame: Create Captivating Visualizations and Projects in Immersive Creative Technology for 3D, WebAR, and WebVR Using Three.js and A-Frame

Cover Page....2 Title Page....3 Copyright Page....4 Dedication Page....5 About the Author....6 About the Technical Reviewer....7 Acknowledgements....8 Preface....10 Errata....12 Table of Contents....16 1. Getting Started with Three.js....22 Introduction....22 Structure....22 Introduction to WebGL....22 Three.js History....23 Three.js Alternatives....25 Extending Three.js....28 Tools and Requisites to Start Developing....29 Downloading and Installing Three.js....31 Using this book....32 Project Structure....34 Conclusion....36 Points to Remember....36 Multiple Choice Questions....36 Answers....37 Questions....38 Key Terms....38 2. Our First Scene....40 Introduction....40 Structure....40 Basic Scene Setup....41 Creating the Renderer....41 Creating the Camera....42 Creating Our First 3D Mesh....43 Rendering Our Scene....44 3D Primitives....46 Materials....49 Texture Maps....53 Special Textures....54 Cube Maps....54 RGBE....56 Canvas Texture....59 Video Texture....60 Lights and Shadows....61 Casting Shadows....64 Three-Point Lighting Concept....65 Cameras....67 Animation Loop....70 Animating a Texture....72 Conclusion....74 Points to Remember....75 Multiple Choice Questions....76 Answers....77 Questions....77 Key Terms....78 Additional Information....80 Material Parameters....80 Texture Parameters....85 3. Interacting with Our Scene....86 Introduction....86 Structure....86 Introducing Scene Interaction....86 Keyboard Interaction....87 Adding Some Inertia....89 Mouse/Touch Interaction....91 Adding Inertia to the Pointer Movement....93 Raycasting....94 Mobile Phone Interaction....99 Camera Controls....110 OrbitControls....110 PointerLockControls....111 FlyControls....114 TransformControls....115 Basic Game Concept....117 A Step Further....124 Conclusion....125 Points to Remember....125 Multiple Choice Questions....126 Answers....127 Questions....128 Key Terms....128 4. Adding Some Realism....130 Introduction....130 Structure....130 Reasons to Use Blender....130 3D Export from Blender....131 3D Asset Optimization....141 PBR Materials....145 Texture baking....156 Loading 3D Objects Externally....164 Interacting with children objects....167 Playing animations....168 Integrating a Physics Library....172 Conclusion....178 Points to Remember....179 Multiple Choice Questions....180 Answers....181 Questions....182 Key Terms....182 5. Post Processing....184 Introduction....184 Structure....184 Post Processing Concept....184 Types of Filters and Effects....185 Post Processing Stack....186 Post Processing Caveats....186 Halftone Pass....190 LUT Pass....192 SAOPass....194 SSAOPass....196 UnrealBloomPass....196 Depth of Field / BokehPass....198 DotScreenPass....199 FilmPass....200 GlitchPass....202 RenderPixelatedPass....203 OutlinePass....204 AfterimagePass....205 ShaderPass....206 TexturePass....208 SMAAPass/SSAARenderPass/TAARenderPass....210 SSRPass....212 MaskPass/ClearMaskPass/ClearPass....214 PMNDRS Post Processing library....217 Conclusion....218 Points to Remember....218 Multiple Choice Questions....219 Answers....220 Questions....221 Key Terms....221 6. Introduction to WebAR and WebVR....223 Introduction....223 Structure....223 Understanding Virtual Reality....223 Understanding Augmented Reality....228 Importance of the Web for AR and VR....234 Introduction to A-Frame....236 A-Frame Installation and Setup....237 A-Frame Basics....238 Scene Structure....238 Primitives....239 Materials....241 Asset Manager....241 Importing 3D files....242 Lights and shadows....243 Cameras and Controls....244 Navmesh....245 Animation....247 Animation Mixer....249 Adding/Removing Components via JavaScript....250 A-Frame + Three.js....251 Building your Components....253 A-Frame Inspector....256 Conclusion....259 Points to Remember....259 Multiple Choice Questions....260 Answers....261 Questions....261 Key Terms....262 7. Creating Your First WebAR Experience....263 Introduction....263 Structure....263 Basic webAR Scene Setup....263 Project Concept....266 HTML Code Overview....266 Project Components....275 Main Code....276 Using Image Tracking....285 Converting an Image into an Image Target....286 Running the AR Image Tracker....288 MindAR Image Tracker Caveats....292 Using Face Tracking....292 Adding a 3D Occluder....297 Face Tracking Listeners....299 Third-Party AR Libraries....299 8th Wall....300 Blippar....300 Zappar....300 Other Options....301 Conclusion....301 8. Creating Your First WebVR Experience....302 Introduction....302 Structure....302 Basic webVR Scene Setup....302 Art Exhibition Project Concept....309 JSON File Structure....313 HTML File Structure....314 Main JS file....322 Scene Components....324 Conclusion....329 9. Useful Boilerplates to Start Your Projects....331 Introduction....331 Structure....331 Best Practices....331 General....332 Development....333 Three.js and A-Frame....334 Useful Boilerplates for Your Projects....335 T-Shirt Configurator App....336 3D Platform Game....336 VR Travel App....337 AR Product Showcase....338 Animated Portfolio....339 Home Design App....340 Infographic....341 Conclusion....342 Index....343