preface

This paper will not explain the concepts of three. js geometry, material, camera, model, light source and so on in detail. It will first be divided into several modules to quickly demonstrate a box of small cases. You can quickly understand the infinite charm of Three.js according to these modules.

learning

We will use three. js to make a simple cube, so that we can have a macro understanding of Three.js. I will break it down into code segments (modules) for development. The modules are as follows:

  • Scene objects
  • Grid model
  • The light source
  • The camera
  • Renderer object
  • rendering

1. Create an HTML file

First, we need to create an HTML file so we have somewhere to develop. Once created, we can introduce the three.js file, which today is the star. I directly import the remote URL address for loading, you can also go to the official website to download the local import.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  
  </body>
</html>
Copy the code

2. Create a scene object

Create a virtual 3D scene with the help of the three. js engine.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /*
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
    </script>
  </body>
</html>
Copy the code

3. Create a grid model

This line of code new THREE.BoxGeometry(200, 200, 200) means that a cube object is created that is 200 long, 200 wide, and 200 high. Then and through the code new THREE. MeshLambertMaterial material for the cube object definition, here can understand into a cube properties (such as contains a color and transparency properties), here listed color attribute for the time being. Then we need to associate the cube with the properties, using the Mesh model, passing them in as two parameters of the constructor Mesh, and finally adding them to the scene.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /* * Create the scene object */
      var scene = new THREE.Scene();
      /* * Create grid model */
      var geometry = new THREE.BoxGeometry(200.200.200); // Create a cube Geometry object Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4'});// The Material object is Material
      var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      scene.add(mesh); // Add the grid model to the scene
    </script>
  </body>
</html>
Copy the code

4. Set a light source

The code new three.pointlight (‘# FFF ‘) creates a PointLight object. The parameter # FFF defines the intensity of the light. If you change the parameter to #666, you will see that the surface of the cube becomes dark. A flare in the night sky is an example of a point source. The code three.ambientlight (‘#333’) creates an AmbientLight object whose color affects the entire scene.AmbientLight has no specific light source and is a kind of light source that simulates diffuse reflection, so it can shine light evenly on every object in the scene without specifying a position. Usually used to soften shadows or add some color to the environment, the ambient light should not be the only source of light in the scene.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /* * Create the scene object */
      var scene = new THREE.Scene();
      /* * Create grid model */
      var geometry = new THREE.BoxGeometry(200.200.200); // Create a cube Geometry object Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4'});// The Material object is Material
      var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      scene.add(mesh); // Add the grid model to the scene
      /* * Set the light */
      var point = new THREE.PointLight('#fff'); / / the point light source
      point.position.set(300.100.200); // Point light source position
      scene.add(point); // Add a light source to the scene
      
      var ambient = new THREE.AmbientLight('# 333');/ / the ambient light
      scene.add(ambient); // Add ambient light to the scene
    </script>
  </body>
</html>
Copy the code

5. Set up the camera

OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); OrthographicCamera(-s * k, s * k, s, 1, 1000); The first four parameters of the camera constructor define the size of the camera window. As usual, the frame is larger, so the person being photographed is smaller relative to the background. camera.position.set(200, 300, 200); And camera.lookat (scene.position) define the camera position and the camera direction. You can change camera.position.set(200,300,200) to redefine the camera position. You’ll notice that the Angle of the cube on the screen changes, just like when you have the same photographer in your life, but when you take a picture from a different Angle, it will look different. You don’t have to worry about all the details, but at least you know that the camera can zoom in and out of a 3D scene and view it from different angles.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /* * Create the scene object */
      var scene = new THREE.Scene();
      /* * Create grid model */
      var geometry = new THREE.BoxGeometry(200.200.200); // Create a cube Geometry object Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4'});// The Material object is Material
      var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      scene.add(mesh); // Add the grid model to the scene
      /* * Set the light */
      var point = new THREE.PointLight('#fff'); / / the point light source
      point.position.set(300.100.200); // Point light source position
      scene.add(point); // Add a light source to the scene
      var ambient = new THREE.AmbientLight('# 333');/ / the ambient light
      scene.add(ambient); // Add ambient light to the scene
      /* * Set the camera */
      var width = window.innerWidth; // Window width
      var height = window.innerHeight; // Window height
      var k = width / height; // Window width ratio
      var s = 200; // 3d scene display range control coefficient, the larger the coefficient, the larger the display range
      // Create the camera object
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1.1000);
      camera.position.set(200.300.200); // Set the camera position
      camera.lookAt(scene.position); // Set the camera orientation (the scene object to point to)
    </script>
  </body>
</html>
Copy the code

6. Create the renderer object

Three.js is a 3D engine running on a native WebGL package. So the browser uses the code new three.webglrenderer () to render a frame of image. You can set the render area size and background color.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /* * Create the scene object */
      var scene = new THREE.Scene();
      /* * Create grid model */
      var geometry = new THREE.BoxGeometry(200.200.200); // Create a cube Geometry object Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4'});// The Material object is Material
      var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      scene.add(mesh); // Add the grid model to the scene
      /* * Set the light */
      var point = new THREE.PointLight('#fff'); / / the point light source
      point.position.set(300.100.200); // Point light source position
      scene.add(point); // Add a light source to the scene
      var ambient = new THREE.AmbientLight('# 333');/ / the ambient light
      scene.add(ambient); // Add ambient light to the scene
      /* * Set the camera */
      var width = window.innerWidth; // Window width
      var height = window.innerHeight; // Window height
      var k = width / height; // Window width ratio
      var s = 200; // 3d scene display range control coefficient, the larger the coefficient, the larger the display range
      // Create the camera object
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1.1000);
      camera.position.set(200.300.200); // Set the camera position
      camera.lookAt(scene.position); // Set the camera orientation (the scene object to point to)
      /* * Create the renderer object */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); // Set the render area size
      renderer.setClearColor(0xb9d3ff.1); // Set the background color
    </script>
  </body>
</html>
Copy the code

7. Perform rendering operations

Specify the scene and camera as parameters for the rendered region, and add the region to the page.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /* * Create the scene object */
      var scene = new THREE.Scene();
      /* * Create grid model */
      var geometry = new THREE.BoxGeometry(200.200.200); // Create a cube Geometry object Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4'});// The Material object is Material
      var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      scene.add(mesh); // Add the grid model to the scene
      /* * Set the light */
      var point = new THREE.PointLight('#fff'); / / the point light source
      point.position.set(300.100.200); // Point light source position
      scene.add(point); // Add a light source to the scene
      var ambient = new THREE.AmbientLight('# 333');/ / the ambient light
      scene.add(ambient); // Add ambient light to the scene
      /* * Set the camera */
      var width = window.innerWidth; // Window width
      var height = window.innerHeight; // Window height
      var k = width / height; // Window width ratio
      var s = 200; // 3d scene display range control coefficient, the larger the coefficient, the larger the display range
      // Create the camera object
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1.1000);
      camera.position.set(200.300.200); // Set the camera position
      camera.lookAt(scene.position); // Set the camera orientation (the scene object to point to)
      /* * Create the renderer object */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); // Set the render area size
      renderer.setClearColor(0xb9d3ff.1); // Set the background color
      /* * Perform render operation */ 
      renderer.render(scene, camera); // Specify the scene and camera as parameters
      document.body.appendChild(renderer.domElement); // Insert the canvas in the body element
    </script>
  </body>
</html>
Copy the code

The complete code

Margin: 0; overflow: hidden; } is to hide the body window area scrollbar.

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Three. Js small case</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
    <! -- introducing three. Js - >
    <script src="https://unpkg.com/[email protected]/build/three.js"></script>
  </head>

  <body>
  <script>  
      /* * Create the scene object */
      var scene = new THREE.Scene();
      /* * Create grid model */
      var geometry = new THREE.BoxGeometry(200.200.200); // Create a cube Geometry object Geometry
      var material = new THREE.MeshLambertMaterial({
        color: '#f4f4f4'});// The Material object is Material
      var mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
      scene.add(mesh); // Add the grid model to the scene
      /* * Set the light */
      var point = new THREE.PointLight('#fff'); / / the point light source
      point.position.set(300.100.200); // Point light source position
      scene.add(point); // Add a light source to the scene
      var ambient = new THREE.AmbientLight('# 333');/ / the ambient light
      scene.add(ambient); // Add ambient light to the scene
      /* * Set the camera */
      var width = window.innerWidth; // Window width
      var height = window.innerHeight; // Window height
      var k = width / height; // Window width ratio
      var s = 200; // 3d scene display range control coefficient, the larger the coefficient, the larger the display range
      // Create the camera object
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1.1000);
      camera.position.set(200.300.200); // Set the camera position
      camera.lookAt(scene.position); // Set the camera orientation (the scene object to point to)
      /* * Create the renderer object */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); // Set the render area size
      renderer.setClearColor(0xb9d3ff.1); // Set the background color
      /* * Perform render operation */ 
      renderer.render(scene, camera); // Specify the scene and camera as parameters
      document.body.appendChild(renderer.domElement); // Insert the canvas in the body element
    </script>
  </body>
</html>
Copy the code

conclusion

The following diagram illustrates the context-camera-renderer relationship very graphically.

Conclusion: This is just the tip of the iceberg in Three.js. If you want to continue to learn Three.js, welcome to follow my official account and learn three. js together. Feel its infinite charm!

  • Welcome to pay attention to my public number front end experience robbed road

  • Reply keywords e-books, you can get 12 front-end popular e-books.

  • Reply keywords little Red Book 4th edition, you can get the latest “JavaScript advanced Programming” (4th edition) ebook.

  • After following the official account, click the menu below to add my wechat. I have attracted many IT bigwigs and created a technical exchange and article sharing group. I look forward to your joining.

  • Author: Vam’s Golden Bean Road

  • Wechat public number: the front end of the road through robbery