A New Try

Day 1 of Three.js 🌌:

Getting Started with 3D in the Browser!

Three.js makes creating 3D graphics on the web easy and exciting! Built on WebGL, it simplifies the complex setup needed to draw 3D graphics in the browser and is widely used in web-based games, interactive graphics, and even VR.

📜 Introduction to Three.js
Three.js is a popular JavaScript library that brings the power of 3D graphics to your web browser! From small interactive elements to complex simulations, Three.js allows us to create stunning visuals and immersive experiences. WebGL, the technology under Three.js, works directly with the GPU for fast, efficient rendering, but it's challenging to write directly. Three.js simplifies this, providing an easy-to-use layer for designing 3D experiences. 💻✨

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

1. Import Three.js – This grabs everything we need from the Three.js library.
2. Create a WebGL Renderer – The renderer displays our graphics on the screen, using WebGL behind the scenes.
3. Set the Renderer Size – The render area covers the entire window.
4. Add to DOM – Finally, we add it to the document so it's visible in the browser. 🌐 `

`

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);

`

1. Create the Scene – Think of this as our virtual stage where we’ll place objects and lights.
2. Setup the Camera – Using a Perspective Camera here, which gives a more realistic depth perception by mimicking how our eyes view the world.
3. 75: Field of view in degrees (a wider or narrower "view angle")
4. window.innerWidth / window.innerHeight: Aspect ratio for avoiding distortion
5. 0.1, 1000: Near and far clipping planes, setting the visible range of the camera (from 0.1 to 1000 units away).

`

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
camera.position.set(0, 2, 5);
const boxGeometry = new THREE.BoxGeometry();
const boxMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
scene.add(box);
function animate(time) {
    box.rotation.x = time / 1000;
    box.rotation.y = time / 1000;
    box.rotation.z = time / 1000;
    renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

`

1. AxesHelper: Creates an AxesHelper, a visual aid showing three lines along the X, Y, and Z axes.
2. Adding to Scene: scene.add(axesHelper); places the helper in the scene, helping orient object placements.
3. Box Geometry: Creates boxGeometry, defining the shape of a basic cube.
4. Box Material: Sets boxMaterial as a plain white (0xffffff) material for the cube’s surface.
5. Mesh: Combines boxGeometry and boxMaterial into a Mesh, which can be rendered.
6. Add Box to Scene: scene.add(box); places the cube in the scene, making it visible.
7. Animate Function: Defines an animate function to handle updates to each animation frame.

Refer: https://youtu.be/xJAfLdUgdc4?si=bAdjReYgI1ExVvaK