three.js模擬實現太陽系行星體系

概況以下：

一、SphereGeometry實現自轉的太陽；

二、RingGeometry實現太陽系星系的公轉軌道；

三、ImageUtils加載球體和各行星貼圖；

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

五、THREE.Sprite精靈實現太陽系行星。

效果圖以下：

 預覽地址：three.js模擬實現太陽系行星體系

初始化場景、相機、渲染器，設置相機位置。

 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, 500);  8 var renderer = new THREE.WebGLRenderer({  9       alpha: true, 10       antialias: true
11 });

設置場景窗口尺寸，而且初始化控制器，窗口尺寸默認與瀏覽器窗口尺寸保持一致，最後將渲染器加載到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 // 定義太陽材質
2 var sunTexture = THREE.ImageUtils.loadTexture('./image/sun_bg.jpg', {}, function () { 3  renderer.render(scene, camera); 4 }); 5 // 太陽以及太陽材質設定
6 centerBall = new THREE.Mesh(new THREE.SphereGeometry(30, 30, 30), new THREE.MeshBasicMaterial({ 7  map: sunTexture 8 })); 9 scene.add(centerBall);

太陽發光效果經過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);

太陽系各行星公轉軌道經過RingGeometry來實現，公轉軌道偏移經過position來實現，行星體系經過THREE.Sprite來實現。

/** * 返回行星軌道的組合體 * @param starLiteSize 行星的大小 * @param starLiteRadius 行星的旋轉半徑 * @param rotation 行星組合體的x,y,z三個方向的旋轉角度 * @param speed 行星運動速度 * @param imgUrl 行星的貼圖 * @param scene 場景 * @returns {{satellite: THREE.Mesh, speed: *}} 衛星組合對象;速度 */
var initSatellite = function (starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene) { var track = new THREE.Mesh(new THREE.RingGeometry(starLiteRadius, starLiteRadius + 0.05, 50, 1), new THREE.MeshBasicMaterial()); var centerMesh = new THREE.Mesh(new THREE.SphereGeometry(1, 1, 1), new THREE.MeshLambertMaterial()); //材質設定
var starLite = new THREE.Sprite(new THREE.SpriteMaterial({ map: THREE.ImageUtils.loadTexture(imgUrl) })); starLite.scale.x = starLite.scale.y = starLite.scale.z = starLiteSize; starLite.position.set(starLiteRadius, 0, 0); var pivotPoint = new THREE.Object3D(); pivotPoint.add(starLite); pivotPoint.add(track); centerMesh.add(pivotPoint); centerMesh.rotation.set(rotation.x, rotation.y, rotation.z); scene.add(centerMesh); return {starLite: centerMesh, speed: speed}; };

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

 1 // 執行函數
 2 var render = function () {  3  renderer.render(scene, camera);  4     centerBall.rotation.y -= 0.01;  5     for (var i = 0; i < starLites.length; i++) {  6         starLites[i].starLite.rotation.z -= starLites[i].speed;  7  }  8  orbitcontrols.update();  9  requestAnimationFrame(render); 10 }

 

原文出處：https://www.cnblogs.com/gaozhiqiang/p/11450433.html