three.js實現土星繞太陽體系

概況以下：

一、SphereGeometry實現自轉的太陽，土星；

二、RingGeometry實現土星公轉軌道；

三、ImageUtils加載球體貼圖；

四、canvas中createRadialGradient實現太陽發光效果；

五、THREE.RingGeometry實現土星公轉軌道。

效果圖以下：

預覽地址：three.js實現土星繞太陽體系

初始化場景、相機、渲染器，設置相機位置，初始化光源，光源採用點光源PointLight，設置光源位置爲場景中心位置，並將光源加入場景中。

 1 // 初始化場景
 2 var scene = new THREE.Scene();
 3 // 初始化相機，第一個參數爲攝像機視錐體垂直視野角度，第二個參數爲攝像機視錐體長寬比，
 4 // 第三個參數爲攝像機視錐體近端面，第四個參數爲攝像機視錐體遠端面
 5 var camera = new THREE.PerspectiveCamera(20, dom.clientWidth / dom.clientHeight, 1, 100000);
 6 // 設置相機位置，對應參數分別表示x，y，z位置
 7 camera.position.set(0, 0, 300);
 8 var renderer = new THREE.WebGLRenderer({
 9       alpha: true,
10       antialias: true
11 });
12 // 設置光照，第一個參數表示光顏色，第二個參數爲光照強度，範圍爲0-1，默認值爲1，
13 var lights = new THREE.PointLight('#ffffff', 1);
14 lights.position.set(0, 0, 0);
15 scene.add(lights);

設置場景窗口尺寸，而且初始化控制器，窗口尺寸默認與瀏覽器窗口尺寸保持一致，最後將渲染器加載到dom中。

1 // 設置窗口尺寸，第一個參數爲寬度，第二個參數爲高度
2 renderer.setSize(dom.clientWidth, dom.clientHeight);
3 // 初始化控制器
4 var orbitcontrols = new THREE.OrbitControls(camera,renderer.domElement);
5 // 將渲染器加載到dom中
6 dom.appendChild(renderer.domElement);

定義太陽及其材質，太陽經過SphereGeometry來實現，經過ImageUtils來導入貼圖。

1 // 定義太陽材質，sunImgUrl表示太陽貼圖地址
2 var sunTexture = THREE.ImageUtils.loadTexture(sunImgUrl, {}, function () {
3       renderer.render(scene, camera);
4 });
5 // 使用SphereGeometry實現太陽球體，sunSize表示球體半徑
6 var centerBall = new THREE.Mesh(new THREE.SphereGeometry(sunSize, 30, 50), new THREE.MeshBasicMaterial({
7       map: sunTexture
8 }));

太陽發光效果經過Sprite引入canvas渲染的createRadialGradient來實現。

 1 /**
 2  * 實現球體發光
 3  * @param color 顏色的r,g和b值,好比：「123,123,123」;
 4  * @returns {Element} 返回canvas對象
 5  */
 6 var generateSprite = function (color) {
 7     var canvas = document.createElement('canvas');
 8     canvas.width = 16;
 9     canvas.height = 16;
10     var context = canvas.getContext('2d');
11     var gradient = context.createRadialGradient(canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, 
12     canvas.height / 2, canvas.width / 2);
13     gradient.addColorStop(0, 'rgba(' + color + ',1)');
14     gradient.addColorStop(0.2, 'rgba(' + color + ',1)');
15     gradient.addColorStop(0.4, 'rgba(' + color + ',.6)');
16     gradient.addColorStop(1, 'rgba(0,0,0,0)');
17     context.fillStyle = gradient;
18     context.fillRect(0, 0, canvas.width, canvas.height);
19     return canvas;
20 };
21 // 添加太陽發光效果
22 var centerBallLite = new THREE.Sprite(new THREE.SpriteMaterial({
23     map: new THREE.CanvasTexture(generateSprite(sunSpriteColor)),
24     blending: THREE.AdditiveBlending
25 }));
26 centerBallLite.scale.x = centerBallLite.scale.y = centerBallLite.scale.z = sunScaleSize;
27 scene.add(centerBallLite);
28 scene.add(centerBall);

實現土星繞太陽公轉體系，公轉軌道經過RingGeometry來實現，公轉軌道偏移經過position來實現。

 1 // 建立土星體系
 2 var createSsaturnLite = function () {
 3     // 添加土星體系
 4     saturnMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材質設定
 5     // 土星對應元素
 6     // 土星公轉軌道
 7     var track = new THREE.Mesh(new THREE.RingGeometry(saturnLiteRadius, saturnLiteRadius + 0.1, 50, 1), new THREE.MeshBasicMaterial());
 8     saturnLite = new THREE.Mesh(new THREE.SphereGeometry(saturnLiteSize, 30, 30), new THREE.MeshPhongMaterial({
 9         map: THREE.ImageUtils.loadTexture(imgUrl)
10     }));
11     saturnLite.position.set(saturnLiteRadius, 0, 0);
12     saturnLite.rotation.x = 1.9;
13     // 土星環對應元素
14     // 土星環公轉軌道
15     var trackRing = new THREE.Mesh(new THREE.RingGeometry(saturnLiteSize + 3, saturnLiteSize + 8, 50, 1), new THREE.MeshBasicMaterial({
16         map: THREE.ImageUtils.loadTexture(ringImgUrl),
17         side: THREE.DoubleSide
18     }));
19     // 土星環軌道中心
20     ringPoint = new THREE.Object3D();
21     ringPoint.add(trackRing);
22     ringPoint.position.set(saturnLiteRadius, 0, 0);
23     ringPoint.rotation.x = 0.3;
24     
25     var earthPoint = new THREE.Object3D();
26     earthPoint.add(saturnLite);
27     earthPoint.add(track);
28     earthPoint.add(ringPoint);
29     saturnMesh.add(earthPoint);
30     saturnMesh.rotation.set(rotation.x, rotation.y, rotation.z);
31     scene.add(saturnMesh);
32 }

將建立好的太陽，土星自轉公轉體系渲染到場景中，自轉和公轉經過定時修改position值來實現，動畫使用requestAnimationFrame來實現。

1 // 執行函數
2 var render = function () {
3     renderer.render(scene, camera);
4     centerBall.rotation.y -= sunSpeed;
5     saturnMesh.rotation.z -= saturnRotationSpeed;
6     orbitcontrols.update();
7     requestAnimationFrame(render);
8 }