Threejs 官网

pengphie 2016-12-21

展开全文

Threejs 官网 - 入门指南（Getting Started）

太阳火神的美丽人生 (http://blog.csdn.net/opengl_es)

本文遵循“署名-非商业用途-保持一致”创作公用协议

转载请保留此句：太阳火神的美丽人生 - 本博客专注于敏捷开发及移动和物联设备研究：iOS、Android、HTML5、Arduino、pcDuino，否则，出自本博客的文章拒绝转载或再转载，谢谢合作。

入门指南（Getting Started ）

chinedufn edited this page on 4 Mar 2013 · 9 revisions

Three.js 场景非常容易设置，只需要几行代码就能完成初始化工作。场景使用几种不同类型的对象来构造：像机（camera）、灯光（light）和蒙皮（mesh）。

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

渲染 three.js 场景的第一步就是创建 WebGL 渲染对象。下面的代码创建一个 800x640 像素的 HTML 画布（cavas）对象，把它加入到文档主体中，并初始化 three.js 的场景。

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.js scene.

var renderer = new THREE.WebGLRenderer();
renderer.setSize( 800, 640 );
document.body.appendChild( renderer.domElement );

var scene = new THREE.Scene();

第二步定义像机，渲染对象在渲染中将会用到。

The second step is to define a camera which the renderer object will use in 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 );

第一个参数决定了视图 field 有多宽。
第二个参数是高宽比，通过视图区域的宽除以高来计算。
第三个和第四个参数指定像机视角中对象（可视区域）的界限点。
如果对象离像机的距离未落在 NEAR 和 FAR 之间的范围内，那么这样的对象就不会被渲染。（译者注：这也是一种减少不必要渲染对 GPU 资源消耗，提高效率的内部机制吧！）。
最后一行代码，设置像机 XYZ 坐标分别为 -15, 10 和 15 。

The first parameter passed determines how wide the field of view is. The second parameter is the aspect ratio which is 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 not fall in the range between NEAR and FAR then that object is not rendered. The last line sets the camera's XYZ coordinates to -15, 10, and 15 respectively.

三步创建一个 5 个单位宽、高、深的立方体，添加 Lambert 材质，并把它加入到场景中。

Step three creates a cube that is 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 );

设置场景的最后一步，创建一个黄色的光源，并添加到场景中。

For the last step in setting up 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 we render the scene which displays our scene through the camera's eye.

// 译者注：火柴呢？打火机呢？赶快点亮吧
renderer.render( scene, camera );

使用最小 HTML 模板的运行示例中的每一样东西放在一下，就像下面的代码这样了：

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

<!DOCTYPE html>
<html>
<head>
    <title>Getting Started with Three.js</title>    
    <script src="three.min.js"></script>
    <script>
    window.onload = function() {

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( 800, 600 );
        document.body.appendChild( renderer.domElement );

        var scene = new THREE.Scene();

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

        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 );

        var light = new THREE.PointLight( 0xFFFF00 );
        light.position.set( 10, 0, 10 );
        scene.add( light );

        renderer.render( scene, camera );

    };
    </script>
</head>
<body></body>
</html>

15 行 JavaScript 代码初始化并渲染了一个场景。

15 lines of Javascript to initialize and render a scene.