How to install and use three.js

What is three.js?

Three.js is an open source 3D graphics library based on JavaScript, used to create and display various three-dimensional scenes, objects and special effects. It provides rich functions and APIs that enable developers to easily render complex 3D graphics in the browser.

Three.js provides a simplified set of interfaces and tools, including cameras, geometry, materials, light sources, etc., as well as various rendering techniques such as shadows, transparency, texture mapping, etc. By using Three.js, developers can create interactive, high-performance 3D scenes by writing a small amount of code without having to understand the underlying WebGL technology.

Three.js can run on modern browsers that support WebGL, including Chrome, Firefox, Safari, and Edge. It is widely used in game development, visual data display, virtual reality (VR) and augmented reality (AR) and other fields. Whether you are a beginner or an experienced developer, you can quickly build a variety of stunning 3D graphics applications with Three.js.

The steps to install and use Three.js are as follows:

Download the Three.js library file or use npm to install Three.js

For specific operation methods, please refer to the answer in the previous question.

Introduce the Three.js library file into the HTML page

Introduce the Three.js library file into the head section of the HTML page:

<head>
  <script src="/path/to/three.js"></script>
</head>

Please note to replace "/path/to/three.js" with the actual Three.js library file path.

Create Three.js scenes and renderers

Create a div container in the body section and create a Three.js scene and renderer in JavaScript. The scene contains all objects, cameras, and lights, and the renderer is responsible for rendering the scene onto the HTML canvas element.

<body>
  <div id="container"></div>

  <script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);
  </script>
</body>

4. Create Three.js geometry and materials

Geometry and materials are created in the scene. Geometry includes the shape and size of objects, while materials include surface properties of objects, such as color, texture, etc.

<body>
  <div id="container"></div>

  <script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);

    // 创建几何体和材质
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
  </script>
</body>

Render scene

Finally, render the Three.js scene in JavaScript:

<body>
  <div id="container"></div>

  <script>
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('container').appendChild(renderer.domElement);

    // 创建几何体和材质
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({
    
     color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    function animate() {
    
    
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();
  </script>
</body>

The role of three.js

Three.js is used to create and display interactive 3D graphics scenes in web browsers. It can achieve the following functions:

Create and manage 3D objects: With Three.js, you can easily create and manipulate various three-dimensional objects, such as geometries (such as cubes, spheres, cylinders, etc.), models, particle systems, etc. You can set their position, rotation, scale, and other properties, and combine and layer them in the scene.

Rendering and animation: Three.js provides a powerful rendering engine that can render defined scenes and objects onto the HTML5 canvas element. You can control the camera's position and perspective, and utilize animation loops to achieve smooth motion effects. You can rotate, move, change color and transparency of objects to achieve various animation effects.

Materials and Textures: Three.js supports different materials and texture mapping, allowing you to give your objects a photorealistic look. You can set colors, maps, lighting, shadows, and more to enhance the visual effect of your objects. You can use built-in material types or customize shader programs to implement more advanced rendering techniques.

Lighting and shadows: Three.js supports various light source types, including ambient light, directional light, point light sources, etc., which can simulate real lighting effects in the scene. You can add realistic shadows and reflections to your objects by setting properties such as the position, color, and intensity of the light source.

Interaction and control: Three.js has rich user interaction functions. You can monitor mouse, keyboard and touch events to realize user interaction with the scene. You can capture mouse clicks, movements, and wheel events to implement operations such as rotation, zooming, and dragging. You can also add controllers, such as track controllers or device orientation controllers, to simplify user manipulation of the scene.