three之前的準備

three.js是webGL的一個高級工具集，webGL則是從openGL ES 發展而來的一個圖形繪制庫
如果單純使用webGL的原生API來繪制場景需要以下幾個步驟

1. 創建畫布
2. 獲取畫布環境
3. 初始化視口
4. 創建渲染數據的數組
5. 創建渲染數據的變換矩陣
6. 創建著色器
7. 初始化著色器
8. 繪制

但是我們使用three.js,three.js就會把這些抽象成以下幾個東西

初識three.js

three.js是一個封裝了webGL接口的工具，什么是webGL這個就需要另外開一長篇大論來寫了
簡而言之，webGL就是openGL的一個簡化版本，可以提供讓瀏覽器使用顯卡渲染圖形的能力
但是webGL的接口十分復雜：(webGL接口)我們直接調用webGL會耗散我們大量精力，因此各種封裝了webGL接口的庫應運而生，three.js就是其中的一個佼佼者

如何使用

在使用three.js之前，我們需要了解threejs的幾個概念

1. 場景(Scene)
2. 相機(Camera)
3. 渲染器(Renderer)
4. 光源(Light)
5. 模型(Geometry)
6. 材質(Material)

以上就是three.js需要渲染出一個3D世界所需要的基本要素，在我們實際操作之前我們還需要了解一個東西

坐標系
three.js的坐標系是右手坐標系，意思是x軸從左指到右，y軸從下到上，z軸從里到外

坐標系

視口

實踐操作

好了我們廢話少說了，上代碼看看我們怎么把以上元素結合展現一個3D的世界吧

//引入three.js我這里采用的是npm包的require,你也可以使用標簽的方式引入
//不管怎么樣只要保證全局變量里面有THREE這個對象就行
const THREE= window.THREE=require('three')
const scene = new THREE.Scene();//創建一個場景
//創建一個相機，這個相機屬于透視投影相機，里面的參數你就先別管了
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z=150//因為剛剛創建的對象都會位于原點，我們需要把相機拉遠一點
//創建一個渲染器,并設置大小，然后把這個渲染器加入到dom中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
//創建一個光源，這光源是屬于環境光，先別管啥叫環境光
const light = new THREE.AmbientLight( '#fff',1);
//創建一種材質
const mat = new THREE.MeshPhongMaterial({
    color: new THREE.Color("rgb(106,153,153)"),
    transparent: 1,
    opacity: 0.2,
    shininess:5,
    specular:new THREE.Color("rgb(153,153,153)"),
    emissive:new THREE.Color("rgb(6,53,53)"),
    shading: THREE.FlatShading 
});
//創建一個多面體模型，并將模型和材質結合
const ballGeometry = new THREE.IcosahedronGeometry(25,2);
const ball = new THREE.Mesh( ballGeometry, mat );

scene.add(light)//場景中加入光源
scene.add( camera )//場景中加入相機
scene.add( ball )//場景中加入多面體

renderer.render(scene, camera);//把相機對準場景開始渲染

以上代碼渲染出如下一個多面體，但是我們看起來像一個圓，是因為光照和材質的緣故導致分不清輪廓，但是不要懷疑，這的確是一個多面體

image.png

參考

1. http://www.hewebgl.com/article/articledir/1
2. http://techbrood.com/threejs/docs/