Creating a Scene with Basic Functionality

Explore how to create a basic Three.js scene by understanding essential components like the camera, lights, meshes, and renderer. Learn to set up a scene graph including grouping objects, and implement a render loop with interactive controls for viewing 3D scenes dynamically.

We'll cover the following...

Creating a scene
The basic functionality of a scene
- Example: Basic scenes

Creating a scene

We have learned how to create THREE.Scene, so we already know some of the basics of Three.js. We saw that for a scene to show anything, we need four different types of objects:

Camera: This determines which part of THREE.Scene is rendered onscreen.
Lights: These have an effect on how materials are shown and are used when creating shadow effects.
Meshes: These are the main objects that are rendered from the perspective of the camera. These objects contain the vertices and faces that make up the geometry (for example, a sphere or a cube) and contain a material, which defines what the geometry looks like.
...

1.Introduction to the Course

2.Part 1: Getting Up and Running

3.Creating the First 3D Scene with Three.js

4.The Basic Components That Make Up a Three.js Application

5.Working with Light Sources in Three.js

6.Part 2: Working with the Three.js Core Components

7.Working with Three.js Materials

8.Learning to Work with Geometries

9.Exploring Advanced Geometries

10.Points and Sprites

11.Part 3: Particle Clouds, Loading, and Animating Models

12.Creating and Loading Advanced Meshes and Geometries

13.Animation and Moving the Camera

14.Loading and Working with Textures

15.Part 4: Post-Processing, Physics, and Sounds

16.Render Post-Processing

17.Adding Physics and Sounds to Our Scene

18.Working with Blender and Three.js

19.Three.js: Together with React, TypeScript, and WebXR

20.Conclusion

21.Appendix

Creating a Scene with Basic Functionality

Creating a scene