【webGL】threejs入門 ---創建一個簡單立方體

Three.js是一個JavaScript庫，所以，你可以使用平時開發JavaScript應用的環境開發Three.js應用。如果你沒什么偏好的話，我會推薦Komodo IDE。

調試建議使用Chrome或者Firefox瀏覽器。如果你使用的是Firefox，那么Firebug會是你必不可少的插件；如果你使用的是Chrome，那么直接使用控制台調試即可。這些和JavaScript的調試是相同的，因此本書不作進一步展開。

下載

首先，我們需要在Github下載Three.js的代碼。

在https://github.com/mrdoob/three.js/tree/master/build可以看到three.js和three.min.js兩個文件，前者是沒有經過代碼壓縮的，因此適用於調試階段；后者是經過代碼壓縮的，調試起來會不太方便，但文件較小，適用於最終的發布版。保存一個文件到本地，這里我們可以選擇three.js。

引用

在使用Three.js之前，我們需要在HTML文件中引用該文件：

<script type="text/javascript" src="three.js"></script>

然后就能通過全局變量THREE訪問到所有屬性和方法了。

開始工作

接下來，我們終於要真正使用Three.js了！

首先，在HTML的<head>部分，需要聲明外部文件three.js。

<head>
    <script type="text/javascript" src="js/three.js"></script>
</head>
<body onload="init()">
    <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
</body>

在JavaScript代碼中定義一個init函數，在HTML加載完后執行：

一個典型的Three.js程序至少要包括渲染器（Renderer）、場景（Scene）、照相機（Camera），以及你在場景中創建的物體。這些話題將在后面幾章中進一步展開，這里我們將介紹如何快速地使用這些東西。

渲染器（Renderer）

渲染器將和Canvas元素進行綁定，如果之前在HTML中手動定義了id為mainCanvas的Canvas元素，那么Renderer可以這樣寫：

var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
});

而如果想要Three.js生成Canvas元素，在HTML中就不需要定義Canvas元素，在JavaScript代碼中可以這樣寫：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

上面代碼的第二行表示設置Canvas的寬400像素，高300像素。第三行將渲染器對應的Canvas元素添加到<body>中。

我們可以使用下面的代碼將背景色（用於清除畫面的顏色）設置為黑色：threejs使用的0x顏色

renderer.setClearColor(0x000000);

場景（Scene）

在Three.js中添加的物體都是添加到場景中的，因此它相當於一個大容器。一般說，場景里沒有很復雜的操作，在程序最開始的時候進行實例化，然后將物體添加到場景中即可。

var scene = new THREE.Scene();

照相機（Camera）

在介紹照相機設置前，我們先來簡單了解下坐標系。WebGL和Three.js使用的坐標系是右手坐標系，看起來就是這樣的：

這里，我們定義了一個透視投影的照相機，具體原理將在下一章中展開。

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5);
scene.add(camera);

長方體

我們要創建一個x、y、z方向長度分別為1、2、3的長方體，並將其設置為紅色。

var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
        new THREE.MeshBasicMaterial({
            color: 0xff0000
        })
);
scene.add(cube);

那么這里長度為1的單位是什么呢？這里的長度是在物體坐標系中的，其單位與屏幕分辨率等無關，簡單地說，它就是一個虛擬空間的坐標系，1代表多少並沒有實際的意義，而重要的是相對長度。

渲染

在定義了場景中的物體，設置好的照相機之后，渲染器就知道如何渲染出二維的結果了。這時候，我們只需要調用渲染器的渲染函數，就能使其渲染一次了。

renderer.render(scene, camera);

完整代碼

function init() {
    // renderer
    var renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
    });
    renderer.setClearColor(0x000000); // black

    // scene
    var scene = new THREE.Scene();

    // camera
    var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
    camera.position.set(0, 0, 5);
    scene.add(camera);

    // a cube in the scene
    var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
            new THREE.MeshBasicMaterial({
                color: 0xff0000
            })
    );
    scene.add(cube);

    // render
    renderer.render(scene, camera);
}

附上鏈接http://runjs.cn/detail/xtj5fstx

可能有的同學說看起來不像一個立方體

那現在調整一下參數,現在是不是看的出來了

// camera
    var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
    camera.position.set(4, 4, 5);
    camera.lookAt(new THREE.Vector3(0, 3, 0));
    scene.add(camera);

 // a cube in the scene
    var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
            new THREE.MeshBasicMaterial({
                color: 0xff0000,
                wireframe: true
            })
    );