Three. Js is introduced

Three. Js is an open source mainstream 3D drawing JS engine, originally written by Mr.Doob. The project address is

We know that WebGL is a standard for 3D web drawing, and just as jQuery simplifies HTML DOM manipulation, three.js can simplify WebGL programming

Technically, in addition to WebGL, three.js also supports other renderers such as Canvas 2D, so it can be rolled back even in browsers that don’t support WebGL

Three. Use js

1. Download the zip library and include it in your HTML

<script src="three.js"></script>
Copy the code

2. Install and import it as a module

npm install three
// Bundle files using a tool like Webpack or Browserify. By bundling all dependencies, they can "require ('modules')" in the browser.
var THREE = require('three');
var scene = new THREE.Scene();
// Or import the syntax using ES6
import * as THREE from 'three';
const scene = new THREE.Scene();
// Import only selected parts of the three.js library, such as Scene:
import { Scene } from 'three';
const scene = new Scene();
Copy the code

Three. Introduction to js

If you have studied WebGL programs, you should know that to create a WebGL program, you basically need four steps:

  1. Initialize the WebGL drawing context
  2. Initialize the shader program
  3. Model and data cache
  4. Finish drawing and animating

This is basically procedural programming, unlike three. js, which uses an object-oriented approach to build the application, consisting of Three basic objects: scene, camera, and a render. In a movie analogy, the scene corresponds to the entire set space, the camera is used to shoot the lens, and the renderer is used to convert the scene into film (in the case of a web page, a computer screen). The scene and camera represent the 3D viewing space and data model, while the renderer contains the WebGL drawing context and shaders.

Create a scene

// Create a scene
var scene = new THREE.Scene();
Copy the code

Create a camera

// The framework of threes.js supports PerspectiveCamera.
// That is, the way the human eye sees
var camera = new THREE
.PerspectiveCamera( 75.window.innerWidth / window.innerHeight, 0.1.1000 );
Copy the code

Properties:

  1. The first property 75 is filed of view;
  2. The second sign sets the aspect ratio of the camera’s shooting surface, dividing the width of the element by its height, otherwise it will squeeze.
  3. Almost cut plane
  4. Far the cutting plane

Create renderer

// Renderer, where all magic effects are generated. Except for the WebGLRenderer, three.js that we're using here
// Support for some other renderers, basically just a back-and-forth for older user browsers that don't support WebGL.
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
Copy the code

In addition to creating the renderer instance, we also need to set the size of the render space, usually using the width and height of the target screen (window.innerWidth and window.innerheight), or giving a smaller size. If you want to keep the render space size but use a lower resolution, you can set updateStyle to false when calling setSize, For example setSize(window.innerwidth /2, window.innerheight /2, false) will use 1/2 resolution to draw your application, assuming 100% width and height. Finally, we add the Renderer element to the HTML document. Here is an element that the renderer uses to display the scene.

Creating a 3D cube

It’s all prepping, the set is ready, the actors are not in yet. Next we add “actor”.

var geometry = new THREE.BoxGeometry( 1.1.1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00});var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
Copy the code

To create a cube, we need to use the BoxGeometry model, which is an object that contains all the vertices and fill faces of the cube. In addition to this geometry model, we need a material to color it. Three. Js supports a variety of materials, for now we only use MeshBasicMaterial. All materials contain a property object. For simplicity, we only provide a color value of 0x00FF00 for green. This is the same as the hexadecimal color values in CSS and Photoshop. The third thing we need is a Mesh. Mesh is an object used to hold a geometric model, and materials can be applied to it and then added to the scene to complete the rotation animation. By default, when we call scene.add(), the object will be added to the origin, the coordinate point (0,0,0), which will cause the camera and the cube to overlap in space. To avoid this, let’s move the camera out of position.

Rendering the scene

If you copy the above code in a new creation and click run, you still won’t see anything because we haven’t actually rendered it yet. To do this, we need a render loop.

function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();
Copy the code

This creates a loop that draws the scene 60 times per second. Those of you who have read this tutorial are probably familiar with the requestAnimationFrame function, which is used to replace setInterval. This new interface has several advantages. For example, stop rendering after Tab switching to save resources, synchronize with screen refresh to avoid invalid refresh, and safely revert to setInterval in browsers that do not support this interface.

Animating the Cube

If you go through the code step by step, click Run and you should now see a green cube. Now let’s add a little animation to get it moving. Add the following code before renderer. Render in the render function:

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
Copy the code

So we use three.js to create a rotating cube. Basically, if we want to change the motion of the cube, we do it in the Render loop.

Example to make a cube move code

var THREE = require('three');
var scene = new THREE.Scene();
var camera=new THREE.PerspectiveCamera(
  75.window.innerWidth/window.innerHeight,
  0.1.1000
);

var renderer=new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry=new THREE.BoxGeometry(1.1.1);
var material=new THREE.MeshBasicMaterial( { color: 0x00ff00 })
var cube=new THREE.Mesh(geometry,material);
scene.add( cube );

camera.position.z = 5;

var render=function() {
  requestAnimationFrame( render );
  cube.rotation.x += 0.1;
  cube.rotation.y += 0.1;
  renderer.render( scene, camera );
}
render();
Copy the code

Refer to the link

Three. Js project address is Three. Js Chinese tutorial