Conquering JavaScript: Three.js

About the Editor, xvi  
Acknowledgments, xvii  
Zeba Academy – Conquering JavaScript, xviii  
Chapter 1 ◾ Introduction 1  
CRASH COURSE WITH Three.js 2  
WHAT IS Three.js? 2  
FLASHBACK ABOUT Three.js 4  
WHY DO WE EMPLOY Three.js? 4  
HOW DO YOU INCORPORATE Three.js 5  
WHAT IS REQUIRED TO RUN A Three.js APPLICATION? 7  
A Computer 7  
Three.js Developer 7  
An Editor for Text 7  
Web Browser 8  
Web Server 8  
The Developer Console for the Browser 8  
WebGL-Supported Device 9  
Three.js USERS – THREE EXAMPLES 9  
Advantages 10  
Disadvantages 10  
CORE CONCEPT 11  
ADAPTIVE DESIGN 12  
HANDLING HIGH-RESOLUTION DISPLAYS 16  
Prerequisites 18  
Modules es6 18  
UNDERSTAND HOW CLOSURES WORK 19  
LEARN HOW THIS FUNCTIONS 19  
ES5/ES6/ES7 Stuff 20  
Use for(elem of Collection) 20  
WHEREVER POSSIBLE, UTILIZE FOR EACH, MAP, AND FILTER 20  
Employ Destructuring 21  
Function Arguments Can Also Be Destructed 21  
Use the Spread Operator and the Rest Parameter 22  
Or Clone an Array 22  
Or Combining Objects 23  
Employ Class 23  
Recognize Getters and Setters 23  
When Possible, Use Arrow Functions 23  
Use Literals from Templates 23  
Learn How to Code in JavaScript 24  
Visual Studio Code Is a Good Option 24  
Setup 25  
Stop or Quit Servez to Stop Serving 25  
Installation 25  
Install Using npm 26  
CDN Installation or Static Hosting 26  
CommonJS Imports Are Compatible 27  
Node.js 27  
Check for WebGL Compatibility 27  
How to Manage Local Operations 28  
External Files Are Used to Load Content 28  
A Remote Server 28  
Servez 29  
A Five-Server Node.js 29  
Http-Server in Node.js 29  
Server in Python 29  
Ruby Server 30  
Lighttpd 30  
IIS 30  
FUNDAMENTALS 31  
Primitives 31  
Box Geometry 31  
Flat Circle 31  
Solid Cone 32  
Cylinder 32  
dodecahedron 33  
Two Dimension (2D) 33  
2D Disc with the Hole in Center 34  
Text Geometry 34  
Edge Geometry 34  
WireframeGeometry 35  
Scene Graph 36  
MATERIALS 43  
TEXTURES 45  
Hello Texture 45  
Texture Loading Made Simple 45  
A Texture Is Being Loaded 45  
Textures from Other Sources Are Being Loaded 46  
MEMORY UTILIZATION 46  
PNG versus JPG 46  
TEXTURE REPETITION, OFFSET, ROTATION, AND WRAPPING 47  
Lights 48  
AmbientLight 49  
HemisphereLight 50  
DirectionalLight 50  
PointLight 51  
SpotLights 51  
RectAreaLight 51  
CAMERAS 51  
Shadows 52  
BufferGeometry Custom 52  
KEY FEATURES OF Three.js 52  
Effects 53  
Scenes 53  
Animation 53  
Mesh Creation 53  
Scaling 53  
Render 53  
Within Three.js, You Can Track Rendering Performance 54  
Materials 54  
Properties of Common Objects 54  
RECAP OF BASICS 54  
SUMMARY 55  
NOTES 56  
Chapter 2 ◾ Application Development I 57  
BUILDING APPS WITH Three.js 58  
DESIGNING GAME WITH Three.js 58  
CODE TUTORIALS 59  
Creating a Feeling of Motion 59  
WITHIN BOUNDED CONSTRAINTS, INFINITE MOVEMENT 59  
CONFIGURE THE GAME PROJECT 60  
ADDITION OF WEBPACK FILES 61  
TYPESCRIPT ENVIRONMENT CONFIGURATION 64  
SETTING THE TONE FOR THE GAME 65  
Setting the Stage 65  
IMAGINING THE SKY 69  
FINAL SCENE PLANNING 70  
INCLUDING GAMEPLAY LOGIC 74  
INPUT THROUGH KEYBOARD 74  
INPUT VIA TOUCHSCREEN 75  
OBJECTS IN OUR SCENE THAT ARE MOVING 76  
detectCollisions 78  
addBackgroundBit 84  
addChallengeRow 84  
THE FINAL TOUCHES TO OUR RENDER LOOP 86  
UI DESIGN FOR THE GAME 87  
SUMMARY 89  
NOTES 89  
Chapter 3 ◾ Application Development II 91  
BUILDING APPS WITH Three.js 93  
Installing and Downloading 93  
Code Tutorial 93  
Initial HTML Configuration 93  
Our 3D World Is Being Built 94  
SETTING UP A DEVELOPMENT SERVER ON THE LOCAL MACHINE 96  
For Windows Users 96  
For Mac 96  
DRAWING GEOMETRY AND RESIZING THE VIEWPORT 96  
RESIZING THE VIEWPORT UPDATE 99  
IMPORTING THE BUSINESS PLAN 100  
THE STARTER PROJECT LAYOUT 100  
SELECTING 3D MODELS 100  
3D MODELS LOADING 101  
IMPORTANT 3D DEVELOPMENT ADVICE 101  
SUMMARY 102  
NOTES 102  
Chapter 4 ◾ Application Development III 103  
BUILDING APPLICATION WITH Three.js 104  
CODE TUTORIAL 104  
Base 105  
Let Us Add Our Environment! 105  
Skies 106  
Animation 107  
Reconfigure 107  
Background 108  
THE PATHWAY TO THE GARDEN’S GATE 108  
Algorithm 108  
Sharing 109  
Cropping 109  
Symbol Picking 110  
Meta Security 115  
SPOTIFY IS ELEVATING THE LEVELS OF SEROTONIN OF GIRL IN RED FANS 115  
Algorithm 116  
Image Generation 116  
Loader 117  
USING SPOTIFY’S TOP RECENT STREAMED TRACKS TO DETECT AND ENCOURAGE A FAN’S AFFINITY 119  
Get a User’S Favorite Songs 119  
Algorithm 119  
Leaderboard 120  
Design and Development of Components 120  
Loader of Faith 121  
Progress in Faith 123  
SUMMARY 125  
Chapter 5 ◾ Code Optimization 127  
WRITING OPTIMIZED AND EFFICIENT CODE 127  
BEFORE YOU BEGIN MEASURING RESULTS 127  
Selecting a Web Browser 128  
The Amount of Polygons in the Scene Is Being Reduced 128  
Anti-Aliasing Is Disabled 128  
LIMITING THE RESOLUTION OF 3D RENDERING 129  
Three.js OPTIMIZES A LARGE NUMBER OF OBJECTS 130  
OPTIMIZE A LARGE NUMBER OF ANIMATED OBJECTS 139  
HARDENING AND SECURITY 156  
XSS Reflection 156  
XSS Cache 157  
Protect Your Code 158  
Encoding the Output 158  
Web Page Contexts for Output Encoding 159  
Beginner Friendly Advice or Assistance Why Am I Unable to See Anything? 160  
GENERAL TIPS 161  
WORK IN SI UNITS 162  
SI Units 162  
Accurate Colors 162  
JavaScript 163  
Use linter and a Style Guide 163  
MODELS, MESHES, AND VISIBLE OBJECTS 163  
Camera 164  
Renderer 164  
Lights 164  
Switch on the Renderer 165  
Shadows 165  
Materials 165  
CUSTOM MATERIALS 165  
Geometry 165  
Textures 166  
Anti-Aliasing 166  
Postprocessing 166  
ARE YOU GETTING RID OF SOMETHING FROM YOUR SCENE? 166  
Set Object in Performance 167  
Advanced Tips 168  
SUMMARY 168  
NOTES 168  
Chapter 6 ◾ Summary 169  
CAREER PROSPECTS USING Three.js 169  
USING Three.js WITH OTHER FRAMEWORKS AND LIBRARIES 170  
WHAT IS TYPESCRIPT? 171  
AN INTRODUCTION TO REACT AND Three.js 171  
GETTING STARTED WITH REACT-THREE-FIBER 171  
DEVELOPING A REACT 3D LUDO DICE PROTOTYPE WITH ANIMATIONS 172  
COMPONENT FOR BOX CONSTRUCTION 172  
RENDERING 3D LUDO DICE BOX 175  
Ambient Light 175  
Spot Light 176  
pointLight 176  
ANGULAR SCENE USING Three.js 177  
Three.js SCENE PROGRAMING 178  
Why Are We Moving the Camera Around? 179  
What Is the Definition of Geometry? 179  
MATERIAL MANAGEMENT 179  
Positioning a Mesh (Cube in Our Case) 180  
With Vue.js and Three.js, You Can Create Stunning Sceneries 180  
Features 180  
Creating a Declarative Scene 181  
Organize Your Resources 182  
Models 182  
Developing Unique Content 183  
SUMMARY 183  
NOTES 184  
REFERENCES 184  
BIBLIOGRAPHY 185  
INDEX 187  

Have you ever considered how these visuals and games are shown in a web browser? What technology is at the heart of it? Of course, employing HTML and CSS alone will not be sufficient. Three.js is a free JavaScript toolkit for displaying images, 3D, and 2D objects in web browsers that enables you to render graphics and 3D objects on a canvas in the web browser using your GPU (Graphics Processing Unit).

Conquering JavaScript: Three.js helps the reader master the Three.js framework for faster and robust development. The book is a detailed guide that will help developers and coders do more with Three.js. It covers the basics in brief, and then moves on to more advanced and detailed exercises to help readers quickly gain the required knowledge.

Key Features:

• Examines JavaScript specific content, with emphasis on graphics libraries.

• Discusses using Three.js for animated graphic creation.

• Provides code optimization tips and solutions.

This book is a valuable reference for Three.js developers as well as those involved in game development, mobile apps, progressive applications, and now even desktop apps.