This is the first blog about three.js

As all we know Three.js is a 3D library that tries to make it as easy as possible to get 3D content on a webpage.

Three.js uses WebGL to draw 3D. WebGL is a very low-level system that only draws points, lines, and triangles. To do anything useful with WebGL generally requires quite a bit of code and that is where three.js comes in. It handles stuff like scenes, lights, shadows, materials, textures, 3d math, all things that you'd have to write yourself if you were to use WebGL directly.

let's try to give you an idea of the structure of a three.js app. A three.js app requires you to create a bunch of objects and connect them together. Here's a diagram that represents a small three.js app

I know struture is to complex but it simple to understand

Renderer is indeed a critical component, It plays a vital role in the rendering pipeline by converting the 3D scene, consisting of objects, lights, and cameras, into a 2D representation that can be displayed on a screen.

You pass a Scene and a Camera to a Renderer and it renders (draws) the portion of the 3D scene that is inside the frustum of the camera as a 2D image to a canvas.

There is a scenegraph which is a tree like structure, consisting of various objects like a Scene object, multiple Mesh objects, Light objects, Group, Object3D, and Camera objects

A Scene object defines the root of the scenegraph and contains properties like the background color and fog.

objects define a hierarchical parent/child tree like structure

Note in the diagram Camera is half in half out of the scenegraph. This is to represent that in three.js, unlike the other objects, a Camera does not have to be in the scenegraph to function. Just like other objects, a Camera, as a child of some other object, will move and orient relative to its parent object

Mesh objects represent drawing a specific Geometry with a specific Material.

Geometry objects represent the vertex data of some piece of geometry like a sphere, cube, plane, dog, cat, human, tree, building, etc..

Texture objects generally represent images either loaded from image files, generated from a canvas or rendered from another scene.

Light objects represent different kinds of lights.