Conquering JavaScript: Three.js

Cover
Half Title
Series Page
Title Page
Copyright Page
Dedication
Contents
About the Editor
Acknowledgments
Zeba Academy – Conquering JavaScript
CHAPTER 1: Introduction
CRASH COURSE WITH Three.js
WHAT IS Three.js?
FLASHBACK ABOUT Three.js
WHY DO WE EMPLOY Three.js?
HOW DO YOU INCORPORATE Three.js
WHAT IS REQUIRED TO RUN A Three.js APPLICATION?
A Computer
Three.js Developer
An Editor for Text
Web Browser
Web Server
The Developer Console for the Browser
WebGL-Supported Device
Three.js USERS – THREE EXAMPLES
Advantages
Disadvantages
CORE CONCEPT
ADAPTIVE DESIGN
HANDLING HIGH-RESOLUTION DISPLAYS
Prerequisites
Modules es6
UNDERSTAND HOW CLOSURES WORK
LEARN HOW THIS FUNCTIONS
ES5/ES6/ES7 Stuff
Use for(elem of Collection)
WHEREVER POSSIBLE, UTILIZE FOR EACH, MAP, AND FILTER
Employ Destructuring
Function Arguments Can Also Be Destructed
Use the Spread Operator and the Rest Parameter
Or Clone an Array
Or Combining Objects
Employ Class
Recognize Getters and Setters
When Possible, Use Arrow Functions
Use Literals from Templates
Learn How to Code in JavaScript
Visual Studio Code Is a Good Option
Setup
Stop or Quit Servez to Stop Serving
Installation
Install Using npm
CDN Installation or Static Hosting
CommonJS Imports Are Compatible
Node.js
Check for WebGL Compatibility
How to Manage Local Operations
External Files Are Used to Load Content
A Remote Server
Servez
A Five-Server Node.js
Http-Server in Node.js
Server in Python
Ruby Server
Lighttpd
IIS
FUNDAMENTALS
Primitives
Box Geometry
Flat Circle
Solid Cone
Cylinder
dodecahedron
Two Dimension (2D)
2D Disc with the Hole in Center
Text Geometry
Edge Geometry
WireframeGeometry
Scene Graph
MATERIALS
TEXTURES
Hello Texture
Texture Loading Made Simple
A Texture Is Being Loaded
Textures from Other Sources Are Being Loaded
MEMORY UTILIZATION
PNG versus JPG
TEXTURE REPETITION, OFFSET, ROTATION, AND WRAPPING
Lights
AmbientLight
HemisphereLight
DirectionalLight
PointLight
SpotLights
RectAreaLight
CAMERAS
Shadows
BufferGeometry Custom
KEY FEATURES OF Three.js
Effects
Scenes
Animation
Mesh Creation
Scaling
Render
Within Three.js, You Can Track Rendering Performance
Materials
Properties of Common Objects
RECAP OF BASICS
SUMMARY
NOTES
CHAPTER 2: Application Development I
BUILDING APPS WITH Three.js
DESIGNING GAME WITH Three.js
CODE TUTORIALS
Creating a Feeling of Motion
WITHIN BOUNDED CONSTRAINTS, INFINITE MOVEMENT
CONFIGURE THE GAME PROJECT
ADDITION OF WEBPACK FILES
TYPESCRIPT ENVIRONMENT CONFIGURATION
SETTING THE TONE FOR THE GAME
Setting the Stage
IMAGINING THE SKY
FINAL SCENE PLANNING
INCLUDING GAMEPLAY LOGIC
INPUT THROUGH KEYBOARD
INPUT VIA TOUCHSCREEN
OBJECTS IN OUR SCENE THAT ARE MOVING
detectCollisions
addBackgroundBit
addChallengeRow
THE FINAL TOUCHES TO OUR RENDER LOOP
UI DESIGN FOR THE GAME
SUMMARY
NOTES
CHAPTER 3: Application Development II
BUILDING APPS WITH Three.js
Installing and Downloading
Code Tutorial
Initial HTML Configuration
Our 3D World Is Being Built
SETTING UP A DEVELOPMENT SERVER ON THE LOCAL MACHINE
For Windows Users
For Mac
DRAWING GEOMETRY AND RESIZING THE VIEWPORT
RESIZING THE VIEWPORT UPDATE
IMPORTING THE BUSINESS PLAN
THE STARTER PROJECT LAYOUT
SELECTING 3D MODELS
3D MODELS LOADING
IMPORTANT 3D DEVELOPMENT ADVICE
SUMMARY
NOTES
CHAPTER 4: Application Development III
BUILDING APPLICATION WITH Three.js
CODE TUTORIAL
Base
Let Us Add Our Environment!
Skies
Animation
Reconfigure
Background
THE PATHWAY TO THE GARDEN’S GATE
Algorithm
Sharing
Cropping
Symbol Picking
Meta Security
SPOTIFY IS ELEVATING THE LEVELS OF SEROTONIN OF GIRL IN RED FANS
Algorithm
Image Generation
Loader
USING SPOTIFY’S TOP RECENT STREAMED TRACKS TO DETECT AND ENCOURAGE A FAN’S AFFINITY
Get a User’S Favorite Songs
Algorithm
Leaderboard
Design and Development of Components
Loader of Faith
Progress in Faith
SUMMARY
CHAPTER 5: Code Optimization
WRITING OPTIMIZED AND EFFICIENT CODE
BEFORE YOU BEGIN MEASURING RESULTS
Selecting a Web Browser
The Amount of Polygons in the Scene Is Being Reduced
Anti-Aliasing Is Disabled
LIMITING THE RESOLUTION OF 3D RENDERING
Three.js OPTIMIZES A LARGE NUMBER OF OBJECTS
OPTIMIZE A LARGE NUMBER OF ANIMATED OBJECTS
HARDENING AND SECURITY
XSS Reflection
XSS Cache
Protect Your Code
Encoding the Output
Web Page Contexts for Output Encoding
Beginner Friendly Advice or Assistance Why Am I Unable to See Anything?#
GENERAL TIPS
WORK IN SI UNITS
SI Units
Accurate Colors
JavaScript
Use linter# and a Style Guide
MODELS, MESHES, AND VISIBLE OBJECTS
Camera
Renderer
Lights
Switch on the Renderer
Shadows
Materials
CUSTOM MATERIALS
Geometry
Textures
Anti-Aliasing
Postprocessing
ARE YOU GETTING RID OF SOMETHING FROM YOUR SCENE?
Set Object in Performance
Advanced Tips
SUMMARY
NOTES
CHAPTER 6: Summary
CAREER PROSPECTS USING Three.js
USING Three.js WITH OTHER FRAMEWORKS AND LIBRARIES
WHAT IS TYPESCRIPT?
AN INTRODUCTION TO REACT AND Three.js
GETTING STARTED WITH REACT-THREE-FIBER
DEVELOPING A REACT 3D LUDO DICE PROTOTYPE WITH ANIMATIONS
COMPONENT FOR BOX CONSTRUCTION
RENDERING 3D LUDO DICE BOX
Ambient Light
Spot Light
pointLight
ANGULAR SCENE USING Three.js
Three.js SCENE PROGRAMING
Why Are We Moving the Camera Around?
What Is the Definition of Geometry?
MATERIAL MANAGEMENT
Positioning a Mesh (Cube in Our Case)
With Vue.js and Three.js, You Can Create Stunning Sceneries
Features
Creating a Declarative Scene
Organize Your Resources
Models
Developing Unique Content
SUMMARY
NOTES
REFERENCES
BIBLIOGRAPHY
INDEX