three.js

Overview

three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser. It was first released in 2010 by Ricardo Cabello (mrdoob) and has since become a widely adopted tool for web-based 3D development. The library leverages WebGL, a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the need for plug-ins, to achieve hardware-accelerated rendering as defined by Mozilla's WebGL API documentation. three.js significantly simplifies the process of working with WebGL by providing a higher-level abstraction, allowing developers to focus on scene creation, object manipulation, and animation rather than the intricate details of low-level graphics programming.

The library is designed for a broad range of applications where interactive 3D content is beneficial. This includes the creation of immersive product configurators, virtual tours, educational tools, and scientific data visualizations. For example, a developer might use three.js to render a 3D model of a product that users can rotate and inspect from all angles directly in their browser. It is also suitable for building browser-based games, ranging from simple casual experiences to more complex simulations, offering tools for physics integration and animation controls.

three.js includes various components necessary for 3D rendering, such as scenes, cameras, lights, and objects. Developers define a scene graph, which describes the hierarchical structure of objects in the 3D environment. Cameras dictate the user's perspective, while different light sources (e.g., ambient, directional, point lights) illuminate the scene. Objects can be created from predefined geometries (like cubes, spheres, and planes) or imported from external 3D modeling software in various formats such as GLTF or OBJ. The library's comprehensive set of features, coupled with its active maintenance and extensive community support, positions it as a robust solution for deploying 3D graphics on the web.

Its open-source nature means that the entire library is freely available for use, modification, and distribution, fostering a collaborative development environment. This approach has led to a rich ecosystem of extensions, examples, and educational resources, making it accessible for both beginners and experienced graphics programmers. The official documentation provides detailed API references and numerous examples demonstrating various functionalities, from basic scene setup to advanced post-processing effects and physically based rendering.

Key features

• WebGL Abstraction: Simplifies complex WebGL operations, making 3D rendering more accessible for web developers.
• Scene Management: Provides a robust scene graph for organizing 3D objects, cameras, and lights hierarchically.
• Geometry and Materials: Offers a wide array of built-in geometries (e.g., BoxGeometry, SphereGeometry) and materials (e.g., MeshStandardMaterial, MeshBasicMaterial) for diverse visual effects.
• Lights and Shadows: Supports various light types (AmbientLight, DirectionalLight, PointLight, SpotLight) and enables realistic shadow casting.
• Cameras: Includes different camera types (PerspectiveCamera, OrthographicCamera) to control the view of the 3D scene.
• Loaders: Capable of loading 3D models and textures from external files in formats like GLTF, OBJ, and FBX as detailed in the three.js GLTFLoader documentation.
• Animations: Tools for creating and managing animations, including keyframe animation and skeletal animation.
• Post-processing Effects: Supports advanced visual effects such as bloom, depth of field, and anti-aliasing through a post-processing pipeline.
• Physics Integration: While not built-in, it can be integrated with external JavaScript physics engines like Cannon-es or Ammo.js for realistic interactions.
• Cross-browser Compatibility: Designed to work across modern web browsers that support WebGL.

Pricing

three.js is distributed under the MIT License, which is a permissive free software license. This means it is entirely free to use for any purpose, including commercial applications, without licensing fees. Contributions to the project are welcome, and its development is community-driven.

Common integrations

• React (via react-three-fiber): A popular renderer for three.js that allows developers to build 3D scenes declaratively with React components as hosted on GitHub.
• Vue.js (via tres.js): A declarative component-based interface for three.js in Vue 3 that simplifies scene creation and management.
• Physics Engines: Often integrated with JavaScript physics libraries such as Cannon-es or Ammo.js for realistic object interactions and simulations.
• UI Frameworks: Can be combined with standard web UI frameworks like HTML, CSS, and JavaScript to create interactive control panels or overlays for 3D experiences.
• Node.js (for server-side rendering/tooling): While primarily client-side, Node.js can be used for server-side processing of 3D assets or generating static scene data.
• Blender/3D Modeling Software: 3D models created in software like Blender are commonly exported in formats compatible with three.js loaders, such as GLTF.
• Dat.GUI: A lightweight JavaScript library for creating graphical user interfaces for changing variables in JavaScript code in real-time, often used for debugging three.js scenes.

Alternatives

• Babylon.js: Another powerful, open-source 3D engine for rendering interactive 3D graphics in a web browser.
• PlayCanvas: A cloud-hosted 3D game engine and design tool that also renders WebGL content in the browser.
• A-Frame: An open-source web framework for building virtual reality (VR) experiences with HTML and custom components, built on top of three.js.
• WebGL directly: For developers requiring maximum control over the rendering pipeline, direct WebGL programming is an alternative, albeit with significantly higher complexity.
• Unity WebGL: Exports 3D games and applications developed in the Unity engine to WebGL, allowing them to run in web browsers.

Getting started

To begin using three.js, you can include the library in your HTML file via a CDN or install it using a package manager like npm. The following example demonstrates how to set up a basic scene with a rotating cube. First, create an index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js Basic Cube</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
    </style>
</head>
<body>
    <!-- Include three.js from a CDN -->
    <script type="module">
        import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';

        // 1. Scene setup
        const scene = new THREE.Scene();

        // 2. Camera setup
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

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

        // Handle window resizing
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 4. Create a geometry (cube)
        const geometry = new THREE.BoxGeometry(1, 1, 1);

        // 5. Create a material (basic color)
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

        // 6. Create a mesh (object combining geometry and material)
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        // 7. Animation loop
        function animate() {
            requestAnimationFrame(animate);

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

            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>

In this example:

1. A Scene is created to hold all objects, lights, and cameras.
2. A PerspectiveCamera is set up to define the viewing frustum, positioned back from the origin.
3. A WebGLRenderer is initialized to render the scene onto a <canvas> element, which is then appended to the document body.
4. A basic BoxGeometry defines the shape of our cube.
5. A MeshBasicMaterial is created, giving the cube a green color.
6. A Mesh combines the geometry and material to form the cube object, which is then added to the scene.
7. An animate function uses requestAnimationFrame to create a continuous loop, updating the cube's rotation and re-rendering the scene on each frame.

Opening this HTML file in a web browser will display a rotating green cube. This minimal example demonstrates the fundamental flow of creating a 3D application with three.js: setting up the scene, camera, and renderer, adding objects, and controlling animation following the official three.js guide to creating a scene. From this foundation, developers can explore more complex geometries, materials, lighting, and interactions provided by the library.