Create 3D Website Using Three.js | Three.js and WebGL Course | Lesson 1

In this lesson we will create and set up the scene, canvas, renderer and create the 3D cube

My telegram channel👇
https://t.me/+qJKCWj1eiloyNmMy
00:00 - What is Three.js ?
01:01 - What is WebGL ?
01:44 - Three.js Examples
04:35 - Create three js project
07:45 - Create scene (Three.js)
08:12 - Add canvas
09:20 - Define sizes
10:16 - PerspectiveCamera config (set up)
12:00 - Three.js renderer
13:27 - Create geometry
14:22 - Create material
14:52 - Mesh
15:46 - Change cube position
19:36 - Scale and Vector3
22:00 — Set method
23:07 - How to rotate objects (rotation)
28:16 - Position length method
30:04 - DistanceTo method
31:30 - Normalize method
32:45 - Camera lookAt method

In this Three.js tutorial we will cover:

- Three.js - Understanding the powerful 3D JavaScript library and its capabilities
- WebGL fundamentals - Learn how Three.js simplifies WebGL for 3D web development
- Three.js examples showcase - Explore stunning 3D websites and applications built with Three.js
- Create Three.js project - Step-by-step setup for your first 3D JavaScript project
- Scene creation and management - Build and configure your 3D scene from scratch
- Canvas integration - Add and configure HTML5 canvas for 3D rendering
- Viewport and sizing - Define responsive dimensions for cross-device compatibility
- PerspectiveCamera configuration - Set up realistic 3D camera views and perspectives
- Three.js renderer setup - Initialize WebGL renderer for optimal 3D performance
- 3D geometry creation - Build cube geometry and understand 3D shapes
- Material systems - Apply realistic materials and textures to 3D objects
- Mesh construction - Combine geometry and materials into renderable 3D objects
- 3D transformations - Position, scale, and rotate objects in 3D space
- Vector3 mathematics - Master 3D coordinate systems and vector operations
- Object positioning and scaling - Precise 3D object manipulation techniques
- Rotation and animation - Create dynamic 3D rotations and movements
- Distance calculations - Implement spatial relationships between 3D objects
- Vector normalization - Understand unit vectors and direction calculations
- Camera controls - Use lookAt method for dynamic camera targeting

#threejs #webgl #3dweb

Видео Create 3D Website Using Three.js | Three.js and WebGL Course | Lesson 1 канала Literate Code