Installation and introduction of Three for vUE project

npm install three –dev-save

The version of three.js used in this article is 0.135.0.

Introduction of three in the project

  import * as THREE from 'three'
Copy the code

Scene Scene

Scene object is the core object of three.js and it inherits from Object3D object. A scene is where we place objects, lights, and cameras.

Object3D is the base class for most objects in three.js and provides a set of properties and methods for manipulating objects in 3D space.

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

Create Mesh model Mesh

The geometry in three.js cannot be rendered directly, only the mesh of geometry and material can be rendered on the screen.

Geometry Geometry

// let geometry = new THREE.SphereGeometry(60, 40, 40); // Create a sphere geometry object
let geometry = new THREE.BoxGeometry(100.100.100); // Create a cube Geometry object Geometry
Copy the code

Material is qualitative Material

let material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); 
Copy the code

Combine the two to create a mesh and add it to the scene

let mesh = new THREE.Mesh(geometry, material); // Mesh model object Mesh
scene.add(mesh); // Add the grid model to the scene
Copy the code

The Light source Light

To create a lighting effect on objects in the scene, you need to create a light source.

let point = new THREE.PointLight(0xffffff);
point.position.set(400.200.300); // Point light source position
scene.add(point); // Add a light source to the scene
/ / the ambient light
let ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
Copy the code

The Camera Camera

let width = window.innerWidth; // Window width
let height = window.innerHeight; // Window height
let k = width / height; // Window width ratio
let s = 200; // 3d scene display range control coefficient, the larger the coefficient, the larger the display range
// Create the camera object
// OrthographicCamera
// PerspectiveCamera
let 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)
Copy the code

Here scene.position is the default, the origin of the coordinates.

The Renderer the Renderer

It is to perform a series of calculations on scene and camera, and then draw the calculation results on canvas.

  1. First the renderer is created
  2. Begin to render
  3. Canvas object

2 and 3 can be reversed

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);// Set the render area size
renderer.setClearColor(0x000000.1); // Set the background color
document.getElementById(this.id).appendChild(renderer.domElement); // Insert a canvas object into the div element
// Perform render operations specifying the scene and camera as parameters
renderer.render(scene, camera);
Copy the code

The results of

Point light effect

Ambient light effect

Point light + ambient light effect