Home > Developer > Web Develop
WebGL allows us to achieve 3D effects on canvas. Three.js is a WEBGL framework that is widely used because of its ease of use. If you want to learn WebGL, it's a good idea to discard the complex native interfaces from this framework.
Bloggers are also learning three.js, found that the relevant information is very rare, and even the official API documentation is very rough, a lot of effects need to slowly tap the code to explore. So I write the purpose of this tutorial is to summarize their own, the second is to share with you.
This article is the first of a series of tutorials: Getting started. In this article, I will take a simple demo as an example to illustrate the basic configuration method of Three.js. After finishing this article, you will learn how to draw a stereoscopic graphic in your browser!
preparatory workBefore writing the code, you first have to go to the latest Three.js framework package, in your page to introduce three.js, of course, there are a lot of files in the demo for everyone to learn;
Chrome is currently the best browser to support WebGL, firefow second, domestic roaming, cheetah tested can also run.
get started with the example!First we build HTML, as follows:
<!DOCTYPE HTML>
<HTML><Head><MetaCharSet= "UTF-8"><title>Lesson1</title><!--introduction of Three.js -<Scriptsrc= "Three.js"></Script><styletype= "Text/css">Div#canvas-frame{Border:None;cursor:Move;width:1400px;Height:600px;Background-color:#EEEEEE;
}
</style>
</Head>
<Body><!--container for placing canvas-
<DivID= "Container">
</Div>
</Body>
</HTML>
Prepare areas that match the size of the canvas frame for WebGL drawing. Specifically:
(1) Add a DIV element with ID "canvas3d" in the body tag.
(2) The style tag specifies the "canvas3d" CSS style.
It is important to note that we do not need to write a <canvas> tag, we just need to define a good place to put the canvas div can be, canvas is three.js dynamic generation!
Now we're going to write the script and we'll build a simple stereoscopic model with the following five steps, which is the basic step for three.js:
1. Setting the Three.js rendererThe process of mapping objects in three-dimensional space to two-dimensional planes is called three-dimensional rendering. In general, we call the software that renders the rendering operation the renderer. Specifically, the following processing is needed.
(0) Declaring global variables (objects);
(1) Get the width of the canvas "canvas-frame";
(2) Generate Renderer Object (properties: Anti-aliasing effect is set to valid);
(3) Specify the aspect of the renderer (and the size of the canvas frame);
(4) Append "Canvas" element to "canvas3d" element;
(5) Set the renderer's clear color (clearcolor).
Turn on the Three.js renderer var renderer;//declare global variable (object) function Initthree () { width = document.getElementById (' Canvas3d '). clientwidth;//gets the wide height of the canvas "canvas3d" = document.getElementById (' Canvas3d '). clientheight;//Get Canvas "canvas3d" high renderer=new Three. Webglrenderer ({antialias:true});//Generate Renderer Object (properties: antialiasing effect is set) renderer.setsize (width, height);// Specifies the renderer's aspect (and canvas frame size) document.getElementById (' Canvas3d '). appendchild (renderer.domelement);//append "canvas" element to " Canvas3d "element. Renderer.setclearcolorhex (0xFFFFFF, 1.0);//Set Canvas background color (clearcolor)}In OpenGL (WebGL), there are two kinds of cameras, perspective projection and orthographic projection, in the way that objects in three-dimensional space are projected into two-dimensional space. Perspective projection is, the larger the object is, the smaller the object is drawn in the distance from the point of view, and the way in which we look at the object in everyday life is consistent. The positive projection is that the projection is widely used regardless of the distance between the object and the point of view, which is drawn according to the uniform size, and needs to be drawn from various angles in the fields of architecture and design. In Three.js, you can also specify both perspective projection and orthographic projection cameras. This article sets the perspective projection method by following the steps below.
(0) declaring a global variable (object);
(1) Set the camera with perspective projection;
(2) Set the position coordinates of the camera;
(3) Set the camera on the "z" axis direction;
(4) Set the center coordinate of the field of view.
Set camera var cameras; function Initcamera () { camera = new three. Perspectivecamera (Width/height, 1, 5000);//Set the camera with perspective projection by default, the camera's upper direction is the Y axis, the right side is the x-axis, and along the z-axis (field of view: FoV aspect Ratio: The nearest distance from the camera to the apparent volume aspect From: Near camera distance from the apparent volume: FAR) camera.position.x = 0;//Setting the camera's position coordinates CAMERA.POSITION.Y = 50;//Setting the camera's position coordinates CAMERA.POSITION.Z = 100;//Set the camera's position coordinates camera.up.x = 0;//Set the camera to the "x" axis direction camera.up.y = 1;//Set the upper of the camera for the "y" axis direction Camera.up.z = 0;//Set the camera on the "z" axis direction Camera.lookat ({x:0, y:0, z:0}); /Set the center coordinate of the field of view }The scene is a three-dimensional space. Declare an object called [scene] with the [scene] class.
Set the scene var scene; function Initscene () { scene = new three. Scene (); }In OpenGL (WebGL) Three-dimensional space, there are two types of point light and spotlight. Moreover, as a special case of the point light source, there is also a parallel light source (wireless remote source). In addition, as the parameters of the light source can also be [ambient light] and other settings. As a counterpart, the three.js can be set to [spot light] [spotlight] [spot light] [parallel lights], and [ambient light] (Ambient). As with OpenGL, you can set multiple lights in one scene. Basically, it is the combination of ambient light and several other light sources. If you do not set the ambient light, the face that the light is not exposed to will become too dark. In this article, you first set up a parallel light source by following the steps below, and then add the ambient light.
(0) Declaring global variables (objects)
(1) Setting the parallel light source
(2) Set light vector
(3) Add light source to scene
Here we use the "directionallight" class to declare an object called [light] to represent the parallel lights
Set the light source var; function Initlight () {Light = new three. DirectionalLight (0xff0000, 1.0, 0);//Set parallel light source light.position.set (200, 200, 200);//set light source vector scene.add;// Add light to Scene }Here, we declare a ball model
Set the object var sphere; function Initobject () { sphere = new three. Mesh ( new three. Spheregeometry (20,20), //width,height,depthnew three. Meshlambertmaterial ({color:0xff0000})//material setting ); Scene.add (sphere); Sphere.position.set (0,0,0); }Finally, we write a main function to perform the above five steps:
Execute function Threestart () { initthree (); Initcamera (); Initscene (); Initlight (); Initobject (); Renderer.clear (); Renderer.render (scene, camera); }At this point, test the above procedure and you will find that the spherical model you have drawn appears in the browser window:
SummarizeThe above is Three.js's introductory content, our core five steps are:
1. Setting the Three.js renderer
2. Setting up camera cameras
3. Setting scenes scene
4. Set Light
5. Set Object Object
There may be some of these settings you are not quite clear, it's okay, the following articles will be on the above five main steps to explain in detail, please look forward to ~ ~
<! DOCTYPE html>"One of Three.js" introductory article
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
