Three.js
Requirement :
Basics knowledge on JavaScript.
Tips:
To begin a strong and fast project you can use vite.js but it needs vue.js.
By this way you can import easily and have a render without recharging the page.
To resume, Vite is a local server for developers.
Vite.js: https://vitejs.dev/
First of all, what are the basics of Three.js ?
Based on : Java script.
What that : It’s a langage on object.
What for ? To build a scene.
How ? There are three important’s ways to keep in mind :
a scene, a camera and a render.
Ok, now we can begin!
First of all :
How to use it ?
Download :
No download, or just copy on an other js page and css page that you need.
Compiled :
On your own js page.
For beginners be carefull :Be careful of imports with vite.js. For easy way, the best is to let auto file to complete your call. With this you will understand what and when you add functions. But without this aim's function your scene will fail.
Is it ok ? Now we can finally use it !
The scene.
Follow the documentation for more construction informations!
To understand the structure of this framework:
With this you can create a movie :
Take for example Mr.Cube. Mr.Cube wants to be the new famous actor. He has faith on his own and go to meet the great company near his home : three.js.
Mr. Cube takes his car and reaches his goal in whistling.
When he finally arrives at the door of the company an intense light hurt his eyes. He has pain to walk through the door.
He knocks.
No response.
Mr Cube decides to enter without permission.
He enters on stage. He is afraid. There is no sound and no light.
“Anyone here?” he said...
The render.
Despite the little light he sees cameras, he feels the stage at his foot and can imagine the render of this situation.
But no one and nothing.
“ANYONE THERE?” scream it.“To the light.” Said a voice get out of nowhere.Cube turns green like vegetable and tries to say:“It's my best profile”.
The animation.
“Have no fear...” said the far far away voice.“Turn around, we must see you in all aspects!”
“Thanks Mr Cube!” said the voice.“We can work together.”
The code.
// This is the scene
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// This is Mr Cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial( { color:0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
// Imagination of cube renderer:
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
// Mr Cube turns around:
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
}
animate();For the end of the story of Mr Cube, the director it's you.So what are you waiting for? Did it!
