In the making of a movie the following thing are require for this to happen.
- A scene
- A Camera
- The object or the characters
- 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
Top comments (0)