English

WebGL Tutorial

WebGL Application

WebGL Examples

WebGL - Interactive Cube

Hello, aspiring programmers! Today, we're going to embark on an exciting journey into the world of WebGL. We'll be creating an interactive cube that you can rotate with your mouse. Don't worry if you've never coded before – I'll guide you through each step with the patience of a wise old turtle. Let's dive in!

WebGL - Interactive Cube

Understanding the Basics

Before we start drawing our cube, let's quickly cover some fundamental concepts.

What is WebGL?

WebGL (Web Graphics Library) is a JavaScript API that allows us to render 3D graphics in a web browser. It's like giving your web pages superpowers to create stunning visual effects!

What We'll Need

  1. A text editor (like Notepad++ or Visual Studio Code)
  2. A web browser (Chrome, Firefox, or any modern browser)
  3. A pinch of curiosity and a dash of perseverance!

Example – Draw an Interactive Cube

Step 1: Setting Up the HTML

First, let's create the skeleton of our web page. Open your text editor and create a new file called interactive_cube.html. Copy and paste the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebGL Interactive Cube</title>
    <style>
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        // Our WebGL code will go here
    </script>
</body>
</html>

This sets up our HTML structure and includes the Three.js library, which will make our WebGL work much easier.

Step 2: Creating the Scene

Now, let's add some JavaScript to create our 3D scene. Replace the comment in the script tag with this code:

// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('myCanvas') });
renderer.setSize(window.innerWidth, window.innerHeight);

// Create a 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;

Let's break this down:

  • We create a scene, which is like a stage for our 3D objects.
  • The camera defines our point of view.
  • The renderer is responsible for drawing our scene.
  • We create a cube using BoxGeometry and give it a green color.
  • Finally, we position the camera 5 units away from the center.

Step 3: Animating the Cube

To make our cube rotate, we need to add an animation loop. Add this code after the previous block:

function animate() {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
}
animate();

This function will be called repeatedly, rotating the cube slightly each frame and re-rendering the scene.

Step 4: Making it Interactive

Now, let's add interactivity so we can rotate the cube with our mouse. Add this code before the animate() function:

let isDragging = false;
let previousMousePosition = { x: 0, y: 0 };

document.addEventListener('mousedown', () => isDragging = true);
document.addEventListener('mouseup', () => isDragging = false);
document.addEventListener('mousemove', (e) => {
    if (isDragging) {
        const deltaMove = {
            x: e.offsetX - previousMousePosition.x,
            y: e.offsetY - previousMousePosition.y
        };

        cube.rotation.y += deltaMove.x * 0.01;
        cube.rotation.x += deltaMove.y * 0.01;
    }

    previousMousePosition = {
        x: e.offsetX,
        y: e.offsetY
    };
});

This code adds event listeners for mouse actions, allowing us to rotate the cube by clicking and dragging.

Step 5: Adding Some Pizzazz

Let's make our cube a bit more interesting by giving it different colors on each face. Replace the material creation line with this:

const materials = [
    new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Red
    new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // Green
    new THREE.MeshBasicMaterial({ color: 0x0000ff }), // Blue
    new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Yellow
    new THREE.MeshBasicMaterial({ color: 0xff00ff }), // Magenta
    new THREE.MeshBasicMaterial({ color: 0x00ffff })  // Cyan
];
const cube = new THREE.Mesh(geometry, materials);

Now each face of our cube will have a different color!

Conclusion

Congratulations! You've just created an interactive 3D cube using WebGL. This is just the tip of the iceberg when it comes to 3D graphics programming. As you continue your journey, you'll discover even more amazing things you can create.

Remember, learning to code is like learning to ride a bicycle. It might seem wobbly at first, but with practice, you'll be zooming around in no time!

Here's a table summarizing the main methods we used:

Method Description
THREE.Scene() Creates a new 3D scene
THREE.PerspectiveCamera() Sets up the camera view
THREE.WebGLRenderer() Handles rendering the scene
THREE.BoxGeometry() Creates a cube geometry
THREE.MeshBasicMaterial() Defines the material for the cube
THREE.Mesh() Combines geometry and material
requestAnimationFrame() Calls the animation loop

Keep experimenting, keep learning, and most importantly, have fun! The world of WebGL is your oyster, and you're now equipped to start exploring it. Happy coding!

Credits: Image by storyset

Previous Tutorial:
WebGL - Cube Rotation