Three. js Quick Start [recommended] and three. js Quick Start 【

Three. js Quick Start [recommended] and three. js Quick Start 【

The core five steps of Three. js are:

1. Set three. js Renderer

2. Set the camera

3. Set scene

4. Set the light source

5. Set object

1. Set three. js Renderer

The process of ing objects in a 3D space to a two-dimensional plane is called 3D rendering. Generally, we call the rendering software a Renderer. Specifically, the following processing is required.

Var renderer; function initThree () {width = document. getElementById ("box "). clientWidth; height = document. getElementById ("box "). clientHeight;/** // declare the renderer object: WebGLRenderer renderer = new THREE. webGLRenderer ({antialias: true, // whether to enable anti-sawtooth precision: "highp", // select alpha: true for coloring precision, // whether to set the background color transparent premultipliedAlpha: false, stencel: false, preserveDrawingBuffer: true, // whether to save the drawing buffer maxLights: 1 // maxLights: Maximum number of lights}); */renderer = new THREE. webGLRenderer ({antialias: true});/* generate a renderer object (attribute: the anti-aliasing effect is set to valid) */renderer. setSize (width, height); document. getElementById ("box "). appendChild (renderer. domElement);/* set the canvas background color (clearColor) and background color transparency (clearAlpha) */renderer. setClearColor (0 x ffffff, 1.0 );}

2. Set the camera

Objects in OpenGL (WebGL) and 3D space are projected into two-dimensional space. There are two kinds of cameras: Perspective Projection and normal projection.

A. Perspective Projection: the larger the object that is closer from the viewpoint, the smaller the object that is drawn from a distance, and the same way we view the object in daily life.

B. Positive projection: regardless of the distance between the object and the viewpoint, the objects are drawn according to the uniform size. during construction and design, objects need to be drawn from various angles. Therefore, this projection is widely used. In Three. js, you can also specify either perspective projection or normal projection. Follow these steps to set the Perspective Projection mode.

(1) Declare global variables (objects );

(2) sets the camera for perspective projection;

(3) set the camera coordinates;

(4) set the "z" axis direction for the camera;

(5) set the central coordinates of the field of view.

Var camera; function initCamera () {/* PerspectiveCamera four parameter 1: field of view angle, parameter 2: aspect ratio. This parameter almost always uses the width of the element divided by the height, otherwise you will see that the image is squashed as in the old movie. parameter 3: The nearest distance allowed by the camera to the object. parameter 4: the maximum distance from the camera to the object. by default, the camera's top direction is the Y axis, the right direction is the X axis, and the inward direction is the Z axis. */camera = new THREE. perspectiveCamera (45, width/height, 1,10000); camera. position. x = 0; camera. position. y = 1000; camera. position. z = 0; camera. up. x = 0; camera. up. y = 0; camera. up. z = 1; camera. lookAt ({x: 0, y: 0, z: 0}); // sets the central coordinates of the field of view}

3. Set the scenario

var scene;function initScene(){ scene = new THREE.Scene();}

4. Set the light source

In the 3D space of OpenGL (WebGL), there are two types: Point Light Source and spotlight. In addition, parallel light sources (wireless remote light sources) exist as a special case of the point light source ). You can also set [ambient light] as the parameter of the light source. As the corresponding, Three. in js, you can set [Point Light] [Spot Light] [ction Light], and [Ambient Light]. Like OpenGL, multiple light sources can be set in one scenario. Basically, it is a combination of ambient light and several other light sources. If the ambient light is not set, the surface that the light cannot reach becomes too dark. In this article, first set the parallel light source according to the following steps, after which the ambient light will be appended.

(1) Declare global variables (objects)

(2) set parallel light sources

(3) set the light source vector

(4) append the light source to the scenario

/*** Light )***/
New THREE. AmbientLight (color); // ambient light
New THREE. PointLight (color, intensity, distance); // Point Light Source
New THREE. DirectionalLight (color, brightness); // parallel light
New THREE. SpotLight (color, intensity, distance, angle, attenuation index); // SpotLight

Var light; function initLight () {light = new THREE. directionalLight (0xFF0000, 1.0, 0); // parallel light. position. set (100,100,200); // set the position of the light source scene. add (light); // add an official to the scenario}

5. Set objects

// Geometric shape
CubeGeometry (length, width, height, length, width, and height); // cube
PlanGeometry (long, wide, long, and wide); // plane
SphereGeometry (radius, longitude slice, latitude split, longitude split, longitude crossing, latitude start, latitude crossing); // sphere
CircleGeometry (radius, number of slices, start, cross angle); // circle
CylinderGeometry (top area, bottom area, high, circle split, high split, whether there is no top and bottom ); //
TetrahedronGeometry (radius, details); // Quadrilateral
OctahedronGeometry (radius, details); // positive octagonal
IconsahedronGeometry (radius, details); // positive twelve Edges
TorusGeometry (radius, pipe radius, latitude division, longitude division, radian on the ring surface); // ring Surface

Var sphere; function initObject () {sphere = new THREE. mesh (new THREE. sphereGeometry (200,200)/* set the size of the sphere */, new THREE. meshLambertMaterial ({color: 0xff0000})/* set the sphere material */); // set the material to scene. add (sphere); sphere. position. set (, 0);/* set object position */}

6. Execute

function threeExcute(){  initThree();  initCamera();  initScene();  initLight();  initObject();  renderer.clear();  renderer.render(scene,camera); }

Complete code

<! DOCTYPE html> 
Three. js: http://www.bootcdn.cn/three.js/
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!