Discover Our Project

Connection to WebGL

Three.js is built on top of WebGL, a low-level JavaScript API for rendering 2D and 3D graphics in the browser. WebGL interacts directly with the GPU, enabling high-performance graphics. Three.js abstracts WebGL's complexity, allowing developers to create scenes, cameras, and objects with simpler syntax while leveraging WebGL's power under the hood.

How Three.js Works

Below is a simple example of creating a rotating cube with Three.js:

                    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);

                    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;

                    function animate() {
                        requestAnimationFrame(animate);
                        cube.rotation.x += 0.01;
                        cube.rotation.y += 0.01;
                        renderer.render(scene, camera);
                    }
                    animate();
                

This code sets up a scene, adds a green cube, and animates it by rotating it continuously. The renderer uses WebGL to draw the scene on a canvas element.