threejs一些基礎

導入js包
場景對象-scene
幾何對象-Geometry
材質-material
網格對象-mesh（對象，材質）
光源-Light
攝像機-camera
camera.lookAt相機看的方向
渲染器-renderer
document.body.appendChild(renderer.domElement); //body元素中插入canvas對象
//執行渲染操做 指定場景、相機做爲參數

renderer.render(scene, camera);

requestAnimationFrame()渲染函數
requestAnimationFrame(render);//請求再次執行渲染函數render

鼠標的控制
導入的包three.js-master\examples\js\controls\OrbitControls.js

var controls = new THREE.OrbitControls(camera,renderer.domElement);//建立控件對象
controls.addEventListener('change', render);//監聽鼠標、鍵盤事件
和requestAnimationFrame()不能同時使用

輔助三維座標系AxisHelper
爲了方便調試預覽threejs提供了一個輔助三維座標系AxisHelper，能夠直接調用THREE.AxisHelper建立一個三維座標系，而後經過.add()方法插入到場景中便可。
threejs三維座標系老版本名稱是AxisHelper，新版本名稱AxesHelper。

材質效果

半透明效果
更改場景中的球體材質對象構造函數THREE.MeshLambertMaterial()的參數，添加opacity和transparent屬性，opacity的值是0~1之間，transparent表示是否開啓透明度效果， 默認是false表示透明度設置不起做用，值設置爲true，網格模型就會呈現透明的效果，使用下面的代碼替換原來的球體網格模型的材質， 刷新瀏覽器,經過鼠標旋轉操做場景,能夠看到半透明的球體和立方體顏色疊加融合的效果。

材質常見屬性
wireframe-線框
opacity-透明度
transparent-是否開啓透明

添加高光效果
漫反射-MeshLambertMaterial()
鏡面反射-
MeshPhongMaterial()
高光效果-屬性
屬性specular表示球體網格模型的高光顏色改顏色的RGB值會與光照顏色的RGB份量相乘
shininess屬性能夠理解爲光照強度的係數

光源的類型
AmbientLight-環境光
PointLight-點光源
DirectionalLight-平行光，好比太陽光
SpotLight-聚光源

光源建立-scene.add()
立體的效果
僅僅使用環境光的狀況下，你會發現整個立方體沒有任何棱角感，這是由於環境光知識設置整個空間的明暗效果。若是須要立方體渲染要想有立體效果，須要使用具備方向性的點光源、平行光源等。

經過光源構造函數的參數能夠設置光源的顏色，通常設置明暗程度不一樣的白光RGB三個份量值是同樣的。若是把THREE.AmbientLight(0x444444);的光照參數0x444444改成0xffffff,你會發現場景中的立方體渲染效果更明亮。-環境光的強度

光源位置
point.position.set(0, 0, 0);
點模型Points
// 點渲染模式
var material = new THREE.PointsMaterial({
color: 0xff0000,
size: 10.0 //點對象像素尺寸
}); //材質對象
var points = new THREE.Points(geometry, material); //點模型對象
scene.add(points); //點對象添加到場景中

線模型Line
// 線條渲染模式
var material=new THREE.LineBasicMaterial({

color:0xff0000 //線條顏色

});//材質對象
var line=new THREE.Line(geometry,material);//線條模型對象
scene.add(line);//線條對象添加到場景中

材質屬性.vertexColors
vertexColors: THREE.VertexColors, //以頂點顏色爲準
關於材質的屬性.vertexColors能夠查看Material文檔介紹，屬性.vertexColors的默認值是THREE.NoColors，這也就是說模型的顏色渲染效果取決於材質屬性.color，若是把材質屬性.vertexColors的值設置爲THREE.VertexColors,threejs渲染模型的時候就會使用幾何體的頂點顏色數據geometry.attributes.color。

屬性緩衝區對象BufferAttribute
Threejs提供的接口BufferAttribute目的是爲了建立各類各樣頂點數據，好比頂點顏色數據，頂點位置數據，而後做爲幾何體BufferGeometry的頂點位置座標屬性BufferGeometry.attributes.position、頂點顏色屬性BufferGeometry.attributes.color的值。

緩衝類型幾何體BufferGeometry除了頂點位置、頂點顏色屬性以外還有其餘頂點屬性，後面課程都會講解到。關於BufferGeometry更多屬性和方法能夠查看文檔BufferGeometry。

顏色插值
若是你把幾何體做爲網格模型Mesh或者線模型Line構造函數的參數，你會發現渲染出漸變的彩色效果。

頂點法向量
在上面頂點位置數據基礎上定義頂點法向量數據，這時候除了環境光之外，點光源也會參與光照計算，三角形整個表面比較明亮，同時兩個三角形表面法線不一樣，即便光線方向相同，明暗天然不一樣，在分界位置有棱角感。

// 設置幾何體attributes屬性的位置normal屬性
geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3個爲一組,表示一個頂點的法向量數據

API使用總結
// 訪問幾何體頂點位置數據
BufferGeometry.attributes.position
// 訪問幾何體頂點顏色數據
BufferGeometry.attributes.color
// 訪問幾何體頂點法向量數據
BufferGeometry.attributes.normal

頂點索引.index
BufferGeometry.index定義了一個矩形。經過頂點索引組織網格模型三角形的繪製，由於矩形的兩個三角形有兩個頂點位置重複，因此頂點位置數據、頂點法向量數據都只須要定義4個就能夠。

經過頂點索引組織頂點數據，頂點索引數組indexes經過索引值指向頂點位置geometry.attributes.position、頂點法向量geometry.attributes.normal中頂面數組。

Vector3定義頂點位置座標數據
Vector3是threejs的三維向量對象,能夠經過Vector3對象表示一個頂點的xyz座標，頂點的法線向量。

幾何體Geometry和緩衝類型幾何體BufferGeometry表達的含義相同，只是對象的結構不一樣，Threejs渲染的時候會先把Geometry轉化爲BufferGeometry再解析幾何體頂點數據進行渲染。

幾何體Geometry的頂點位置屬性geometry.vertices和緩衝類型幾何體BufferGeometry頂點位置屬性BufferGeometry.attributes.position是對應的。

Color定義頂點顏色數據
經過threejs頂點顏色對象Color能夠定義幾何體頂點顏色數據，而後頂點顏色數據構成的數組做爲幾何體Geometry頂點顏色屬性geometry.colors的值。

幾何體Geometry的頂點顏色屬性geometry.colors和緩衝類型幾何體BufferGeometry頂點顏色屬性BufferGeometry.attributes.color是對應的。

注意設置幾何體Geometry頂點顏色屬性geometry.colors，對網格模型Mesh是無效的，對於點模型Points、線模型Line是有效果。

注意使用頂點顏色數據定義模型顏色的時候，要把材質的屬性vertexColors設置爲THREE.VertexColors,這樣頂點的顏色數據才能取代材質顏色屬性.color起做用。//材質對象var material = new THREE.MeshLambertMaterial({ // color: 0xffff00, vertexColors: THREE.VertexColors, //以頂點顏色爲準 side: THREE.DoubleSide, //兩面可見});