threeJs 是用來方便快捷創(chuàng)建 3D 視圖的庫国觉，內(nèi)部對 WebGL 的接口進行了封裝吧恃。使得編寫代碼的過程更加貼近常規(guī)思維。
基礎(chǔ) Api
1蛉加、創(chuàng)建畫布
如果要畫一幅畫蚜枢，首先需要的是一塊畫布：
var renderer = new THREE.WebGLRenderer({
//
canvas: document.getElementById('main')
})
// 設置畫布的顏色
renderer.setClearColor('0x000000')
這樣就有了一塊畫布，可以用來承載我們的畫针饥。
2厂抽、創(chuàng)建場景
場景的概念和畫布很類似，場景內(nèi)放物體丁眼，場景放到畫布上筷凤。
var scene = new THREE.Scene()
之后創(chuàng)建的所有東西，都是放到場景內(nèi)苞七。
3藐守、創(chuàng)建照相機
場景是一個“黑盒子”，從外部看不到任何東西蹂风，所以需要使用“照相機”來觀察內(nèi)部的物體卢厂。
var camera = new THREE.PerspectiveCamera(45, 4/3, 1, 1000)
創(chuàng)建好了一個照相機，回憶起之前學過的物理惠啄，照相機都是由一個“點”開始以椎體的視線向外延伸慎恒。
照相機在創(chuàng)建好之后任内，就可以把照相機放到我們想要的地方：
camera.position.set(0, 0, 5)
4、創(chuàng)建物體
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({
color: 0xff0000,
wireframe: true
})
)
創(chuàng)建了一個長寬高均為 1 的正方體融柬，并且顏色為0xf0000并且是三維線框(wireframe: true)死嗦。
然后只要將這個正方體放到場景中，再把場景和照相機放到畫布上就可以了粒氧。
5越除、顯示
scene.add(cube)
// 重點在這一句，顯示場景與相機
renderer.render(scene, camera)
控制照相機
雖然照相機顯示出了我們的正方體外盯，但是由于是面對面摘盆，所以無法看出正方體的立體感，需要調(diào)整下照相機的位置门怪，讓照相機俯視或者仰視骡澈。
改變照相機位置
所以肯定要改變照相機的位置：
// 在 x 軸與 y 軸方向上都 + 1
camera.position.set(1, 1, 5)
從圖片上可以比較直觀看出移動的方向锅纺，僅僅是改變了在 x 和 y 軸上的距離掷空，沒有改變 z 軸距離，所以和改變距離前還是在同一個平面上囤锉。
聯(lián)系日常生活的經(jīng)驗坦弟，照相機到了這個位置，物體相對的就是等于往反方向移動官地。所以原來在正中央的正方體”移動“到了左下角酿傍。
改變照相機角度
camera.lookAt(new THREE.Vector3(0, 0, 0))
就可以將照相機的角度朝向原點。
控制物體
改變物體位置
初始化的物體都是在原點的驱入，所以需要將其重新設置位置赤炒，每個物體都有position屬性，通過改變該屬性的x亏较、y莺褒、z值就可以改變位置了，也可以調(diào)用position.set()傳入x, y, z進行改變雪情。
可能要注意的就是軸的方向遵岩。
物體材質(zhì)
材質(zhì)就是說這個物體是什么做的，金屬和布就有很大區(qū)別巡通。
如果不通過觸摸尘执，就需要借助”光“來將材質(zhì)進行區(qū)分，金屬有高光而布沒有宴凉。
