ThreeJs：二、簡單立方體

前言

在第一節中，我們介紹了建立一個三維對象所需要的基本要素。下面我們就要開始嘗試做一個旋轉的立方體了。

準備工作

• 引入three.js的庫檔案

• 建立場景(Scene)

  建立一個場景，并且擷取浏覽器螢幕的寬高。

• 建立照相機(Camera)

這裡建立的是一個遠景相機(PerspectiveCamera)，為什麼選擇遠景相機進行投影呢?，因為遠景投影也稱之為透視投影。這個是我們人眼觀察世界的模式。

構造器介紹：
PerspectiveCamera( fov, aspect, near, far )
fov - 從上往下的觀察角度
aspect - 寬高比
near - 相機近裁剪面
far  - 相機遠裁剪面
           

• 設定實體材質

  實體材質相當于物體表面的顔色，花紋等特征。

  基礎物體材料（MeshBasicMaterial）:一個以簡單着色（平面或線框）方式來繪制幾何形狀的材料。

  圖示：

  

• 建立物體(Mesh)

  

構造器介紹:
Mesh( geometry, material )
geometry - 一個幾何模型的執行個體。
material - 一個材料的執行個體，用來定義對象的外觀。
           

• 建立渲染器(Render)

方法介紹:
setSize
調整輸出canvas尺寸（寬度，高度），要考慮裝置像素比，并且設定視口（viewport）以比對該尺寸。
render ( scene, camera, renderTarget, forceClear )
使用相機渲染一個場景。

           

• 進行渲染

效果圖

代碼預覽：

/* eslint-disable */
(function() {
    // 建立場景
    var scene = new THREE.Scene();

    var width = window.innerWidth;
    var height = window.innerHeight;
    // 相機
    var camera = new THREE.PerspectiveCamera(, / , , );
    camera.position.set(,,);
    camera.lookAt(scene.position);
    // 材質
    var geometry = new THREE.CubeGeometry(,,);
    var material = new THREE.MeshBasicMaterial({color: });

    // 物體
    var cube = new THREE.Mesh(geometry, material);  
    scene.add(cube);
    // 燈光
    var light = new THREE.PointLight({color:});
    light.position.set(,,);
    scene.add(light);
    // 渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(, );
    document.body.appendChild(renderer.domElement);

    renderer.render(scene, camera);
    // 動畫旋轉
    function render() {
        requestAnimationFrame(render);
        cube.rotation.x += ;
        cube.rotation.y += ;
        renderer.render(scene, camera);
    }
    // render();
})();
           

資源網站

threejs源碼位址：https://github.com/mrdoob/three.js

threejs API文檔：https://hypnosnova.github.io/

threejs中文教程：http://techbrood.com/threejs/docs/