Home > Developer > Web Develop
Three.js is a JavaScript library, so you can develop three.js applications using environments that normally develop JavaScript applications. If you have no preference, I would recommend the Komodo IDE.
Debugging is recommended using Chrome or the Firefox browser. If you are using Firefox, then Firebug will be an essential plugin for you, and if you are using chrome, simply use the console to debug it. These are the same as JavaScript debugging, so this book is not further expanded.
DownloadFirst, we need to download the Three.js code on GitHub.
The https://github.com/mrdoob/three.js/tree/master/build can be seen three.js and three.min.js two files, the former is not code-compressed, so applicable to the debugging phase; the latter is code-compressed, Debugging is inconvenient, but the file size is small and works for the final release version. Save a file to local, here we can choose Three.js.
Before using three.js, we need to refer to the file in the HTML file:
<script type="text/javascript" src="three.js"></ Script>
You can then THREE access all the properties and methods through the global variables.
Next, we finally have to use the Three.js!
First, in the HTML section, you need to declare an external file three.js .
"text/javascript" src="js/three.js "></script>"init ()"> < Canvas id="maincanvas" width="400px " height= " 300px " ></canvas></body>
Define a function in JavaScript code init that executes after the HTML is loaded:
A typical three.js program must include at least the renderer (Renderer), scene, camera, and the object you created in the scene. These topics will be further expanded in the following chapters, where we will show you how to use these things quickly.
Renderer (Renderer)The renderer will bind to the canvas element, and if it was previously manually defined id as a mainCanvas canvas element in HTML, then renderer can write:
var New three. Webglrenderer ({ canvas:document.getElementById ('maincanvas')});
If you want to three.js build a canvas element, you don't need to define a canvas element in HTML, which you can write in JavaScript code:
var New three. Webglrenderer (); renderer.setsize;d ocument.getelementsbytagname (' body') [0].appendchild (renderer.domelement);
The second line of the above code indicates that the canvas is set to wide 400 pixels and high 300 pixels. The third line adds the canvas element that the renderer corresponds to <body> .
We can use the following code to set the background color (the color used to clear the screen) to black: The 0x color used by Threejs
Renderer.setclearcolor (0x000000);
Scenes (Scene)The objects added to the Three.js are added to the scene, so it is equivalent to a large container. Generally speaking, there is no complicated operation in the scene, it is instantiated at the very beginning of the program, and then the object is added to the scene.
var New Three. Scene ();
Cameras (camera)Before we introduce the camera settings, let's start with a simple understanding of the coordinate system. The coordinate system used by WEBGL and Three.js is the right-handed coordinate system, which looks like this:
Here, we define a camera with a perspective projection, which will unfold in the next chapter.
var New Three. Perspectivecamera (431); camera.position. Set (005); Scene.add (camera);
CuboidWe're going to create a box with X, Y, z-direction lengths, respectively, and 1 2 3 set it to red.
var New Three. Mesh (new three. Cubegeometry (123), new three. Meshbasicmaterial ({ 0xff0000 })); Scene.add (cube);
So 1 what is the length of the unit here? The length here is in the object coordinate system, its unit and screen resolution is irrelevant, simply speaking, it is a virtual space coordinate system, the 1 representation of how much does not have the actual meaning, but the important is the relative length.
RenderingAfter defining the objects in the scene and setting up the camera, the renderer knows how to render the two-dimensional results. At this point, we just need to invoke the renderer's render function and render it once.
Renderer.render (scene, camera);
Full codefunction init () {//renderer varRenderer =Newthree. Webglrenderer ({canvas:document.getElementById ('Maincanvas') }); Renderer.setclearcolor (0x000000);//Black//Scene varScene =Newthree. Scene (); //Camera varCamera =NewThree. Perspectivecamera ( $,4/3,1, +); Camera.position.Set(0,0,5); Scene.add (camera); //a cube in the scene varCube =NewThree. Mesh (NewThree. Cubegeometry (1,2,3), Newthree. Meshbasicmaterial ({color:0xff0000 }) ); Scene.add (Cube); //Renderrenderer.render (scene, camera);}Attached link http://runjs.cn/detail/xtj5fstx
Maybe some classmates say it doesn't look like a cube.
Now adjust the parameters, now is not to see out
//Camera varCamera =NewThree. Perspectivecamera ( $,4/3,1, +); Camera.position.Set(4,4,5); Camera.lookat (NewThree. Vector3 (0,3,0)); Scene.add (camera); //a cube in the scene varCube =NewThree. Mesh (NewThree. Cubegeometry (1,2,3), Newthree. Meshbasicmaterial ({color:0xff0000, wireframe:true }) ); "WebGL" Threejs Getting Started---creating a simple cube
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
