Threejs official Website-Getting Started Guide (Getting Started)

Threejs official Website-Getting Started Guide (Getting Started)

The beautiful Life of the Sun Vulcan (http://blog.csdn.net/opengl_es)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Sun Vulcan's Beautiful Life-this blog focuses on Agile development and mobile and IoT device research: IOS, Android, HTML5, Arduino, Pcduino , Otherwise, the article from this blog refused to reprint or re-reproduced, thank you for your cooperation.

Getting Started Guide (Getting Started) chinedufn edited this pageOn 4 Mar· 9 Revisions

The three.js scene is easy to set up, and it takes just a few lines of code to do the initialization work. Scenes are constructed using several different types of objects: camera, light, and skin (mesh).

Three.js scenes is very easy-to-setup and only require a few lines of code to initialize. Scenes is constructed using a few different types of objects:cameras, lights, and meshes.

The first step in rendering a three.js scene is to create a WebGL render object. The following code creates a 800x640 pixel HTML canvas (Cavas) object, adds it to the body of the document, and initializes the three.js scene.

the first step in rendering a three.js scene is creating the WebGL renderer object. The following code creates an HTML canvas object 800x640 pixels, adds it to the document ' s body, and initializes a THREE.J S scene.

var renderer = new three. Webglrenderer (); renderer.setsize (640);d Ocument.body.appendChild (renderer.domelement); var scene = new three. Scene ();  

The second step is to define the camera, and the rendered object will be used in the rendering.

The second step is to define a camera which the renderer object would use the rendering.

var camera = new THREE.PerspectiveCamera( 35, // Field of view 800 / 640, // Aspect ratio .1, // Near 10000 // Far);camera.position.set( -15, 10, 15 );camera.lookAt( scene.position );

The first parameter determines the viewFieldHow wide it is.
The second parameter isHighAspect ratio, calculated by dividing the width of the view area by the height.
The third and fourth parameters specify the boundary point of the object (viewable area) in the camera view.
If the object's distance from the camera does not fall within the range between near and far, then such an object will not be rendered. (Translator Note: This is also a way to reduce unnecessary rendering of GPU resource consumption, improve the efficiency of the internal mechanism!) ）。
The last line of code that sets the camera XYZ coordinates to-15, 10 and 15.

the first parameter passed determines how wide the field of view is. The second parameter is the aspect ratio which are calculated by dividing the viewing area's width by its height. The third and fourth parameters specify cut-off points for objects in the camera ' s view. If an object's distance from the camera does isn't fall in the range between near and far then this object is not rendered. The last line sets the camera's XYZ coordinates to-15, ten, and respectively.

Three steps to create a 5 unit wide, high, deep cube, add Lambert material, and put it into the scene.

Step three creates a cube that's 5 units wide, tall and deep, adds the Lambert material, and adds it to the scene.

// 译者注：扎灯笼骨架var geometry = new THREE.CubeGeometry( 5, 5, 5 );// 译者注：绘画糊灯笼的纸，当然过年时，图案画得更喜庆为好var material = new THREE.MeshLambertMaterial( { color: 0xFF0000 } );// 译者注：把画好图案的彩纸按灯笼的大小比量好，裁剪下来并糊到灯笼骨架上var mesh = new THREE.Mesh( geometry, material );// 译者注：灯笼糊好了，可以挂到大门口让别人看了，我们中国人就是爱展示我们最美好的一面scene.add( mesh );

Set the last step of the scene, create a yellow light source, and add it to the scene.

For the last step in setting-a scene we create a yellow light source and add it to the scene.

// 译者注：可别忘了这一步，得给灯笼准备根蜡烛var light = new THREE.PointLight( 0xFFFF00 );// 译者注：把蜡烛放到灯笼里，比量好位置，别把灯笼自个点着了，那可就白糊了，还容易失火哟light.position.set( 10, 0, 10 );// 译者注：按比量好的位置把蜡烛固定在灯笼里，当然了，扎灯笼骨架时，可能你已经考虑到预留插蜡烛的地方了scene.add( light );

Finally, the scene is rendered, which shows only the parts of the scene that can be seen through the camera view.

Finally we render the scene which displays our scene through the camera's eye.

//Translator Note: Where are the matches? Where's the lighter? Come on, light up. Renderer.render (scene, camera);  

Use each of the things in the run example of the minimal HTML template to put it in a bit, just like the following code:

Everything together in a working example with a minimal HTML template:

<! DOCTYPE html>

15 lines of Javascript code initialize and render a scene.

Lines of Javascript to initialize and render a scene.

Threejs official Website-Getting Started Guide (Getting Started)