DEV Community

Cover image for A-Z of Three.js (Understanding the concept of a movie scene )
es404020
es404020

Posted on • Edited on

2

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 :-

Image description

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

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up