A-Z of Three.js (Understanding the concept of a movie scene )

In the making of a movie the following thing are require for this to happen.

1. A scene
2. A Camera
3. The object or the characters
4. The film

I would try to use a movie to describe how best three.js works under the hood.

1.A scene: According to google, scene is the place where an incident in real life or fiction occurs or occurred.
Multiple scene make up a movie. In three.js in other to render an object you need a scene.To define a scene use
const scene= new THREE.Scene();

2.A Camera : Camera is necessary in the making of every movie scene .Without a camera in a scene it more or less like a stage play .

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

Every movie you must have watch have a height and width .Some are more rectangular and other square shape.Some scene might be closer to you while others are far from you.
In three.js you can specify x,y,z axises. X is from left to right or majorly the side of the scene ,Y is from top to bottom.While Z is for of zoom ie far or near to your view .

camera.position.z=3;

3.The object or the characters

In a movie you must have an object or a character acting the scene.This is what every watcher want to see.Take for instance you need a red box in your set .You need to first make a wooden box and wrap a red piece of cloth around it.The same works in three.js .

You have to create a wireframe or structure which is done with

const geometry = new THREE.BoxGeometry(1,1,1);


Then wrap with with a red material

const material = new THREE.MeshBasicMaterial({ color:'red'})

The combination of the wooden box and red material is handled by the MESH in three.js


const cube = new THREE.Mesh( geometry, material );
scene.add( cube );


4.The film: Everything comes together to make up the movie.The camera, scene and object makes up a movie .

`const canvas = document.querySelector('.webgl');

const renderer = new THREE.WebGLRenderer({
canvas: canvas
})
renderer.setSize(window.innerWidth,window.innerHeight)
renderer.render(scene,camera);`

Final result :-

Hoping to learn more about three.js checkout three.js or threejs journey