前言：threejs系列的第二篇文章，也是一邊學習一邊總結；
1，一個物體繞着另一個物體轉動
上一篇文中主要是物體自轉，為了描述一個一個物體繞另一個物體轉，這里我描述了一個月球繞地球公轉，並且自轉的場景；
首先依照前面的教程，創建兩個球體，一大一小，並添加紋理圖片，作為地球和月球，然后創建一個細圓環作為星球運行的軌跡，（注意調整圓環的位置，使得月球的運行軌跡剛好在圓環上）這里就不做分析；
最重要的部分是要添加一個轉軸到場景中
// 添加一個轉軸 pivotPoint = new THREE.Object3D(); pivotPoint.rotation.x = 0.4; scene.add(pivotPoint);
注意一點就是因為小球要繞着軸轉動，所以小球要添加到軸中，（spheresml表示小球）即：
pivotPoint.add(spheresml);
然后，我們在render函數中，設置軸轉動，帶動小球的轉動
//在control中設置初始值
this.rotationSpeedY = 0.01;
//在render函數中
pivotPoint.rotation.y += control.rotationSpeedY;
requestAnimationFrame(render);
然后通過requestAnimationFrame函數完成動畫
2，粒子系統
我們背景是一個星空，可以創建一個許多的點粒子來完成，粒子的顏色是隨機變化的
var starsGeometry = new THREE.Geometry(); // an empty geometry
for (var i = 0; i < 2000; i++) {
// create a new vertex with random coordinates between -1 and 1
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2 - 1;
vertex.y = Math.random() * 2 - 1;
vertex.z = Math.random() * 2 - 1;
//vertex.multiplyScalar(67);
starsGeometry.vertices.push(vertex);
}
var starsMaterial = new THREE.ParticleBasicMaterial({
color: Math.random() * 0xffffff,
size: 2,
sizeAttenuation: false
});
var stars = new THREE.ParticleSystem(starsGeometry, starsMaterial);
stars.scale.set(300, 300, 300);
stars.name = 'stars';
scene.add(stars);
同時為星星添加一個旋轉動畫
scene.getObjectByName('stars').rotation.y += control.starRoitationSpeedZ;
3， TrackballControls控制器操作
首先，我們需要用 script標簽引入 TrackballControls.js文件
然后添加如下的代碼創建一個控制器實例
camControl = new THREE.TrackballControls(camera);
然后在render函數中進行更新
camControl.update();
這時候，你用鼠標拖動，或者滾動鼠標滑輪的時候，就會看到效果了
最后的效果圖，如圖所示：完整代碼下載：github(threejs-three) 如果，你覺得我寫的對你有所幫助的話，請給我個star吧，謝謝
文章最后，對光源的種類進行一個小總結：
光源大致分為8種：
基礎光源：（1）AmbientLight: 環境光 ；它的顏色會添加到整個場景和所有對象的當前顏色上
（2）PointLight: 點光源；空間中的一點，朝所有的方向發射光線
（3）SpotLight: 聚光燈光源；聚光燈是由點光源發出，這種類型的光也可以產生投影，有聚光的效果
（4）DirectionalLight:方向光，平行光；例如：太陽光
特殊光源：
（1）HemisphereLight：半球光光源 ；可以為室內場景創建更加自然的光照效果，模擬反光面和光線微弱的天氣
（2）AreaLight:面光源； 使用這種光源可以指定散發光線的平面，而不是空間的一個點
（3）RectAreaLight：矩形區域光源；這種光從一個矩形面均勻地發射，可以用來模擬明亮的窗戶或者帶狀的照明；可以產生投影
（4）LensFlare：鏡頭炫光；這不是一種光源，但是通過該炫光可以為場景中的光源添加炫目的效果
AmbientLight( color, intensity )；
DirectionalLight( color, intensity )；
-
color：設置光的顏色；
-
intensity：設置光的強度。
PointLight( color, intensity, distance, decay )
-
color：設置光的顏色；
-
intensity：設置光的強度，默認值為1；
-
distance：設置光距離物體的距離；
-
decay：設置光的衰減量；
屬性：
-
.decay：默認值為1； -
.distance：默認為0.0，這個屬性描述了光線強度減弱到0時距離光源的位置； -
.isPointLight：默認值為true，用來檢查光線是否為點光； -
.power：用來描述光的能量，默認為4pi； -
.shadow：用來計算光所產生的陰影
RectAreaLight( color, intensity, distance, angle, penumbra, decay )
-
color：設置光的顏色；
-
intensity：設置光的強度，默認值為1；
-
distance：設置光距離物體的距離；
-
angle：設置光的照射角度；
-
penumbra：這個參數不是很清楚。。。；
-
decay：設置光的衰減量；
屬性：
-
.castShadow：如果設置為true，將會產生動態的投影，默認值為false； -
.decay：描述光的衰減，默認值為1； -
.distance：默認為0.0，這個屬性描述了光線強度減弱到0時距離光源的位置； -
.isRectAreaLight：默認為true，用來檢查光是否是矩形區域光； -
.position：相當於設置Object3D.DefaultUp坐標坐標為( 0, 1, 0 )，相當於光線是從正上方平行照射下來； -
.shadow：用來計算光所產生的陰影； -
.target：平行光的方向是從光的位置指向目標物體的位置，默認目標物體的位置是( 0, 0, 0 )。
SpotLight( color, intensity, distance, angle, penumbra, decay )；
-
color：設置光的顏色； -
intensity：設置光的強度； -
distance：設置光源到物體的距離； -
angle：聚光燈能夠照射的最大范圍； -
penumbra：由於邊緣造成的聚光錐衰減的百分比； -
decay：光的衰減速度；
屬性：
-
.angle：默認值為Math.PI/3，不超過Math.PI/2； -
.castShadow：默認值為true，值為true時會動態投影； -
.decay：設置光的衰減程度，值在0和1之間； -
.distance：設置光衰減為0時距離光源的距離； -
.isSpotLight：用來檢查光源是否是聚光燈； -
.penumbra：由於光邊緣造成的聚光錐衰減的百分比，值可以在0和1之間，默認值為0； -
.position：相當於設置Object3D.DefaultUp坐標坐標為( 0, 1, 0 )，相當於光線是從正上方平行照射下來； -
.power：光強度大小，默認值為4PI； -
.shadow:SpotLightShadow用來計算光產生的陰影； -
.target：平行光的方向是從光的位置指向目標物體的位置，默認目標物體的位置是( 0, 0, 0 )。