THREE.
JS & REACT THREE FIBER
[Link] Basics
The important concepts in [Link] are below.
1. Scene
2. Objects(Mesh) in below picture, computer and ball are objects.
3. Camera.
4. Renderer.
//Scene
const scene = new [Link]();
const geomentry = new [Link](1, 1, 1);
const material = new [Link]({ color: "purple" });
//Mesh (Object)
const mesh = new [Link](geomentry, material);
[Link](mesh);
//Camera
const aspect = {
width: [Link],
height: [Link],
};
const camera = new [Link](75, [Link] / [Link]); // default near
value is 1,and far value is 2000
[Link].z = 3;
[Link].x = 1;
[Link].y = 1;
[Link](camera);
//Renderer
const canvas = [Link](".draw"); //select the canvas element
const renderer = new [Link]({ canvas }); //add the WebGLRenderer
[Link]([Link], [Link]); //Renderer size
[Link](scene, camera);//Draw on the canvas what camera captured
Output
Transformation
Positioning,Scaling,Rotation in x,y,z axis comes under the Transformation.
//Mesh (Object)
const mesh = new [Link](geomentry, material);
[Link].x = 1; // place/position the object 1 units from origin in x-axis
[Link].y = 2; // place/position the object 2 units from origin in y-axis
[Link].z = 1; // place/position the object 1 units from origin in z-axis
[Link].x = 2; // strech the object 2 units on x-axis
[Link].x = [Link] * 0.25; // rotate the object on x-axis
[Link].y = [Link] * 1.25; // rotate the object on y-axis
[Link](mesh);
const axes = new [Link](10); // it will show the x,y,z axis on the canvas
[Link](axes); //adding the axes to canvas
Animation
A single image on canvas is drawn again and again an Animation will appear.
//Camera
const aspect = {
width: [Link],
height: [Link],
};
const camera = new [Link](75, [Link] / [Link]); // default near
value is 1,and far value is 2000
[Link].z = 3;
[Link](camera);
//Renderer
const canvas = [Link](".draw"); //select the canvas element
const renderer = new [Link]({ canvas }); //add the WebGLRenderer
[Link]([Link], [Link]); //Renderer size
//Clock
const clock = new [Link]();
const animate = () => {
const elapsedTime = [Link]();
// [Link].x +=0.01 // movement of the cube is related to fps, which varies per device.
[Link].x = elapsedTime; // the movemnet of the cube is related to [Link] seconds
// on with fps
[Link](scene, camera);
[Link](animate);
};
animate();
Bundler
A bundler is a tool used in web development that processes the
source files of an application into static assets utilised by browsers.
Webpack
Webpack in react is a JavaScript module bundler that is commonly
used with React to bundle and manage dependencies. It takes all of
the individual JavaScript files and other assets in a project, such as
images and CSS, and combines them into a single bundle that can
be loaded by the browser.
Geometry
Geometry is a vertices and vertices are sum of the word vertex, and
the vertex is a point in 3D space. Vertix or point both have a same
meaning.
Material
Material is used to give or add the features to geometry by coloring
every pixel to geometry.
Environment map are the images that surround the scene from all
sides. Also we can use environment map on the material to reflect
these images. To use the environment map we need to use the
cube texture loader.
REACT THREE FIBER
React three fiber is a renderer for [Link].
Canvas component takes the dimensions of it parent component.
OrbitControls allow the camera to rotate around the points.
Custom Mesh
If we want to create the geomentry according to our needs, then look below code snippet.
Below code generetes the traingle in the right image.
Explanation of code which contains useLoader & Particles.
We are creating the particles using points.
React-drei