Three.js is a powerful JavaScript library that makes it easy to create and display animated 3D computer graphics in a web browser. In this tutorial, we will set up a simple 3D scene with a spinning cube. Let's dive in!

Step 1: Setting Up the Project

First, create a new HTML file and include the Three.js library. You can download it from the official website or use a CDN.

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    

Step 2: Creating the 3D Scene

Next, set up the basic components of a Three.js scene: a scene, a camera, and a renderer. Add a cube to the scene and animate it to spin.

<script>
    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.getElementById('threejs-scene').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();
</script>
    

Step 3: Customizing the Cube

You can customize the appearance of the cube by changing its color, size, or material. Let's make it more interesting by adding a texture.

<script>
    const textureLoader = new THREE.TextureLoader();
    const texture = textureLoader.load('path_to_your_texture.jpg');
    const texturedMaterial = new THREE.MeshBasicMaterial({ map: texture });
    cube.material = texturedMaterial;
</script>
    

Step 4: Interacting with the Cube

To make the cube interactive, we can add event listeners for mouse clicks. When the cube is clicked, its color will change.

<script>
    const raycaster = new THREE.Raycaster();
    const mouse = new THREE.Vector2();

    function onMouseClick(event) {
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

        raycaster.setFromCamera(mouse, camera);

        const intersects = raycaster.intersectObjects(scene.children);

        for (let i = 0; i < intersects.length; i++) {
            intersects[i].object.material.color.set(Math.random() * 0xffffff);
        }
    }

    window.addEventListener('click', onMouseClick);
</script>
    

Now, when you click on the cube, its color will change randomly. This is a simple example of how you can interact with 3D objects in Three.js.

If you enjoyed this tutorial, give it a thumbs up! 👍 Your support encourages me to create more content like this.

Connect with me on LinkedIn, Github, and PeerList for more tutorials and insights into web development and 3D graphics. Thanks for reading!