Home > Developer > Web Develop
1.webGL
A network standard that defines a number of lower-level graphical interfaces.
2.three.js
A 3Djs library, an excellent one in the WebGL open source framework. In addition to WebGL, Three.js also offers a canvas-based, svg-tagged renderer.
This is an open source project .
3. Environment
Find a favorite jside. Debugging is recommended using Chrome or Firefox.
4. Download
Portal
5. Use
< Head > < type= "Text/javascript" src= "Js/three.js"></ Script > </ Head >
The rendering of WEBGL requires Canvas,three.js to be generated, or you can customize the canvas:
<onload= "init ()"> <id= " Maincanvas " width=" 400px " height=" 300px "></ Canvas > </ Body >
In JS, you define an init function that executes after the HTML is loaded:
function init () { // ... }The Three.js program consists of three major components:
Scene, Camera, renderer (Renderer), and the object you create.
6. Renderer (Renderer)
The renderer binds to the canvas element, followed by:
var New three. Webglrenderer ({ canvas:document.getElementById (' Maincanvas ')});If you want to three.js build a canvas element, you do not need to define a canvas in HTML, which you can write in JS:
var New three. Webglrenderer (); Renderer.setsize (400,300);d ocument.getelementsbytagname (' body ') [0]. AppendChild (renderer.domelement);The second line sets the width height of the canvas. The third line adds the canvas element corresponding to the renderer to <body>.
The following sentence can set the background to black:
Renderer.setclearcolor (0x000000);
7. Scenario (Scene)
The objects added to the Three.js are added to the scene. Instantiate at the very beginning of the program, and then add the object to the scene.
var New Three. Scene ();
8. Cameras (camera)
The coordinate system used by WEBGL and Three.js is the right-hand coordinate system:
Camera is divided into a positive projection camera and a perspective projection camera. Here you first define the camera that has a perspective projection:
var New Three. Perspectivecamera (45,4/3,1,1000); // four parameters corresponding to: the angle of view, the distance of the near cutting surface, the distance of the distant cutting surface, the actual window aspect ratio (discussed in detail later) Camera.position.set (0,0,5); // Setting the camera position Scene.add (camera); // added to the scene.
9. Box
Create a red box with X, Y, z direction lengths of 1, 2, and 3, respectively:
var New Three. Mesh (new three. Cubegeometry (),
New0xff0000 }); Scene.add (Cube) ;
Among them, three. Mesh represents a mesh model; Three.cubegeometry represents a cube box; Meshbasicmaterial is a material: no sense of illumination, a simple color for geometry, or a wireframe display. Finally added to the scene.
10. Rendering
After defining the objects in the scene and setting up the camera, the renderer knows how to render the two-dimensional results. Call the renderer's render function to make it render once.
Renderer.render (scene, camera);
11. Example
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "UTF-8"><title>3.js Test One</title></Head><Bodyonload= "init ()"><CanvasID= "Maincanvas"width= "400px"Height= "300px" ></Canvas><Scripttype= "Text/javascript"src= "Js/three.min.js"></Script><!--Path to your-- <Scripttype= "Text/javascript"> functioninit () {//Renderer Renderer varrenderer= Newthree. Webglrenderer ({canvas:document.getElementById ('Maincanvas')//Bind canvas}); Renderer.setclearcolor (0x000000); //Black //Scene Scenes varScene= Newthree. Scene (); Instantiating a scene//Camera Cameras varCamera= Newthree. Perspectivecamera ( $, 4 / 3, 1, +); Perspective projection camera parameter Settings camera.position.set (0, 0, 5); Camera position setting Scene.add (camera); Add to Scene//a cube in the scene created by the object varCube= Newthree. Mesh (Newthree. Cubegeometry (1, 2, 3),//create mesh, parameter one: Geometry (cube)Newthree. Meshbasicmaterial ({//Parameter two: material (mesh base material)
Color:0xff0000//Set color }) ); Scene.add (Cube); Add to Scene//Render Renderingrenderer.render (scene, camera); } </Script></Body></HTML>
The effect of rendering is:
Zhang Wenli "Three.js Getting Started Guide"
Other references:webgl Chinese web
The Three.js Foundation explores a
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
