THREE.
JS & REACT THREE FIBER
Three.js Basics
The important concepts in three.js are below.
1. Scene
2. Objects(Mesh) in below picture, computer and ball are objects.
3. Camera.
4. Renderer.
//Scene
const scene = new THREE.Scene();
const geomentry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: "purple" });
//Mesh (Object)
const mesh = new THREE.Mesh(geomentry, material);
scene.add(mesh);
//Camera
const aspect = {
width: window.innerWidth,
height: window.innerHeight,
};
const camera = new THREE.PerspectiveCamera(75, aspect.width / aspect.height); // default near
value is 1,and far value is 2000
camera.position.z = 3;
camera.position.x = 1;
camera.position.y = 1;
scene.add(camera);
//Renderer
const canvas = document.querySelector(".draw"); //select the canvas element
const renderer = new THREE.WebGLRenderer({ canvas }); //add the WebGLRenderer
renderer.setSize(aspect.width, aspect.height); //Renderer size
renderer.render(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 THREE.Mesh(geomentry, material);
mesh.position.x = 1; // place/position the object 1 units from origin in x-axis
mesh.position.y = 2; // place/position the object 2 units from origin in y-axis
mesh.position.z = 1; // place/position the object 1 units from origin in z-axis
mesh.scale.x = 2; // strech the object 2 units on x-axis
mesh.rotation.x = Math.PI * 0.25; // rotate the object on x-axis
mesh.rotation.y = Math.PI * 1.25; // rotate the object on y-axis
scene.add(mesh);
const axes = new THREE.AxesHelper(10); // it will show the x,y,z axis on the canvas
scene.add(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: window.innerWidth,
height: window.innerHeight,
};
const camera = new THREE.PerspectiveCamera(75, aspect.width / aspect.height); // default near
value is 1,and far value is 2000
camera.position.z = 3;
scene.add(camera);
//Renderer
const canvas = document.querySelector(".draw"); //select the canvas element
const renderer = new THREE.WebGLRenderer({ canvas }); //add the WebGLRenderer
renderer.setSize(aspect.width, aspect.height); //Renderer size
//Clock
const clock = new THREE.Clock();
const animate = () => {
const elapsedTime = clock.getElapsedTime();
// mesh.rotation.x +=0.01 // movement of the cube is related to fps, which varies per device.
mesh.rotation.x = elapsedTime; // the movemnet of the cube is related to no.of seconds
// on with fps
renderer.render(scene, camera);
window.requestAnimationFrame(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 three.js.
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
