three.js 郭先生製作太陽系

郭先生的部落格發表於2020-07-28

今天郭先生收到評論，想要之前製作太陽系的案例，因為找不到了，於是在vue版本又製作一版太陽系，線上案例請點選部落格原文（載入時間比較長，請稍等一下）。話不多說先看效果圖。

圖片有點多，先放三張，相比於上一個版本，這個版本製作更加細緻，動畫更加流暢。那麼下面分析一下主要程式碼。

1. 先介紹一下變數

這裡查了一些資料radiuses、distances、pub_rotation、self_rotation、pitchs分別為八大行星半徑比、到太陽的距離比、公轉比、自轉比、自轉軸傾角比。

radiuses: [2440, 6052, 6371, 3397, 71492, 60268, 25559, 24766],
distances: [5791, 10820, 14960, 22794, 77833, 142940, 287099, 450400],
pub_rotation: [88, 225, 365, 687, 4329, 10767, 30769, 60152],
self_rotation: [58.65, 243, 1, 1, 0.41, 0.42, 0.64, 0.65],
pitchs: [0, 177, 23, 25, 3, 27, 98, 28],
sunObj: {
    radius: 60000//實際695500，為了好看太陽半徑縮小了
},
moonObj: {
    distance: 800, //實際90 為了好看地月距離放大了
    radius: 1737,
    pitchs: 5,
    self_rotation: 27.25,
    pub_rotation: 27.25
},
asteriodObj: {
    radius: 2000,//2000
    pub_rotation: 408
},

2. 引入星球的紋理貼圖

由於星球的貼圖載入比較慢，所以要在貼圖載入之後，再進行後續操作。

let loader = new THREE.TextureLoader();
taiyangT = loader.load('/static/images/texture/planets/sun.jpg');
shuixingT = loader.load('/static/images/texture/planets/shuixing.jpg');
jinxingT = loader.load('/static/images/texture/planets/jinxing.jpg');
diqiuT = loader.load('/static/images/texture/planets/diqiu.jpg');
huoxingT = loader.load('/static/images/texture/planets/huoxing.jpg');
muxingT = loader.load('/static/images/texture/planets/muxing.jpg');
tuxingT = loader.load('/static/images/texture/planets/tuxing.jpg');
tianwangxingT = loader.load('/static/images/texture/planets/tianwangxing.jpg');
haiwangxingT = loader.load('/static/images/texture/planets/haiwangxing.jpg');
yueqiuT = loader.load('/static/images/texture/planets/yueqiu.jpg');
asteriodsT = loader.load('/static/images/texture/planets/asteriod.jpg');
tuxinghuanT = loader.load('/static/images/texture/planets/tuxingring.png');

3. 繪製星球，並在場景中新增

這裡我們寫了一個公共的方法createMesh,這個方法傳兩個引數貼圖和索引，可以根據這個索引找到自轉週期、公轉週期距離等等。

shuixing = this.createMesh(shuixingT, 0);
jinxing = this.createMesh(jinxingT, 1);
diqiu = this.createMesh(diqiuT, 2);
huoxing = this.createMesh(huoxingT, 3);
muxing = this.createMesh(muxingT, 4);
tuxing = this.createMesh(tuxingT, 5);
tianwangxing = this.createMesh(tianwangxingT, 6);
haiwangxing = this.createMesh(haiwangxingT, 7);
taiyang = this.createTaiyang();
yueqiu = this.createYueqiu();

scene.add(shuixing);
scene.add(jinxing);
scene.add(diqiu);
scene.add(huoxing);
scene.add(muxing);
scene.add(tuxing);
scene.add(tianwangxing);
scene.add(haiwangxing);
scene.add(taiyang);
scene.add(yueqiu);

建立公共網格方法如下

createMesh(texture, index) {
    let sphere = new THREE.SphereGeometry(this.radiuses[index] * this.radius_ratio, 60, 30);
    let material = new THREE.MeshBasicMaterial({map: texture});
    let mesh = new THREE.Mesh(sphere, material);
    mesh.position.x = this.distance_ratio * this.distances[index];
    return mesh;
}

建立太陽網格方法如下

createYueqiu() {
    let sphere = new THREE.SphereGeometry(this.moonObj.radius * this.radius_ratio, 30, 20);
    let material = new THREE.MeshBasicMaterial({map: yueqiuT});
    let mesh = new THREE.Mesh(sphere, material);
    mesh.position.x = this.distance_ratio * this.moonObj.distance;
    let moon = new THREE.Object3D();
    moon.position.copy(diqiu.position);
    moon.add(mesh);
    return moon;
}

4. 星體自轉和公轉

在render函式中呼叫自轉和公轉函式，控制自轉的屬性就是mesh.rotation。控制公轉的屬性就是mesh.position。這裡使用尤拉角和THREE.Math方法

selfRotate() {
    shuixing.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[0]), Math.sqrt(1 / this.self_rotation[0]) * this.self_ratio * this.timeS, 0));
    jinxing.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[1]), Math.sqrt(1 / this.self_rotation[1]) * this.self_ratio * this.timeS, 0));
    diqiu.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[2]), Math.sqrt(1 / this.self_rotation[2]) * this.self_ratio * this.timeS, 0));
    huoxing.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[3]), Math.sqrt(1 / this.self_rotation[3]) * this.self_ratio * this.timeS, 0));
    muxing.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[4]), Math.sqrt(1 / this.self_rotation[4]) * this.self_ratio * this.timeS, 0));
    tuxing.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[5]), Math.sqrt(1 / this.self_rotation[5]) * this.self_ratio * this.timeS, 0));
    tianwangxing.rotation.copy(new THREE.Euler(0, Math.sqrt(1 / this.self_rotation[6]) * this.self_ratio * this.timeS, THREE.Math.degToRad(this.pitchs[6]), 'ZYX'));
    haiwangxing.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.pitchs[7]), Math.sqrt(1 / this.self_rotation[7]) * this.self_ratio * this.timeS, 0));
    // yueqiu.children[0].rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.moonObj.pitchs), Math.sqrt(1 / this.moonObj.self_rotation) * this.self_ratio * this.timeS, 0));
    yueqiu.position.copy(diqiu.position);
    yueqiu.rotation.copy(new THREE.Euler(THREE.Math.degToRad(this.moonObj.pitchs), Math.sqrt(1 / this.moonObj.self_rotation) * this.self_ratio * this.timeS, 0));
    asteriods.rotation.copy(new THREE.Euler(0, this.timeS * this.pub_ratio / this.asteriodObj.pub_rotation / 2, 0));
},
pubRotate() {
    shuixing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[0]) * this.distance_ratio * this.distances[0], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[0]) * this.distance_ratio * this.distances[0]);
    jinxing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[1]) * this.distance_ratio * this.distances[1], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[1]) * this.distance_ratio * this.distances[1]);
    diqiu.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[2]) * this.distance_ratio * this.distances[2], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[2]) * this.distance_ratio * this.distances[2]);
    huoxing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[3]) * this.distance_ratio * this.distances[3], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[3]) * this.distance_ratio * this.distances[3]);
    muxing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[4]) * this.distance_ratio * this.distances[4], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[4]) * this.distance_ratio * this.distances[4]);
    tuxing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[5]) * this.distance_ratio * this.distances[5], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[5]) * this.distance_ratio * this.distances[5]);
    tianwangxing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[6]) * this.distance_ratio * this.distances[6], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[6]) * this.distance_ratio * this.distances[6]);
    haiwangxing.position.set(Math.cos(this.timeP * this.pub_ratio / this.pub_rotation[7]) * this.distance_ratio * this.distances[7], 0, -Math.sin(this.timeP * this.pub_ratio / this.pub_rotation[7]) * this.distance_ratio * this.distances[7]);
}

5. 使用動畫，提升逼格

這裡使用了tween控制相機的position和lookat屬性，實現空間穿梭的感覺。

initTween() {
    let pos = {x: 0, y: 0, z: -96, lx: 0, ly: 0, lz: 0};
    tween1 = new TWEEN.Tween(pos).to({x: 57.91, y: 0, z: -5, lx: 57.91, ly: 0, lz: 0}, 20 * this.animation_time);
    tween1.easing(TWEEN.Easing.Linear.None);
    tween2 = new TWEEN.Tween(pos).to({x: 108.2, y: 0, z: -13, lx: 108.2, ly: 0, lz: 0}, 22 * this.animation_time);
    tween2.easing(TWEEN.Easing.Linear.None);
    tween3 = new TWEEN.Tween(pos).to({x: 149.6, y: 0, z: -14, lx: 149.6, ly: 0, lz: 0}, 24 * this.animation_time);
    tween3.easing(TWEEN.Easing.Linear.None);
    tween4 = new TWEEN.Tween(pos).to({x: 227.94, y: 0, z: -6, lx: 227.94, ly: 0, lz: 0}, 27 * this.animation_time);
    tween4.easing(TWEEN.Easing.Linear.None);
    tween5 = new TWEEN.Tween(pos).to({x: 436.5, y: 0, z: -6, lx: 436.5, ly: 0, lz: 0}, 30 * this.animation_time);
    tween5.easing(TWEEN.Easing.Linear.None);
    tween6 = new TWEEN.Tween(pos).to({x: 778.33, y: 0, z: -112, lx: 778.33, ly: 0, lz: 0}, 34 * this.animation_time);
    tween6.easing(TWEEN.Easing.Linear.None);
    tween7 = new TWEEN.Tween(pos).to({x: 1429.4, y: 0, z: -155, lx: 1429.4, ly: 0, lz: 0}, 35 * this.animation_time);
    tween7.easing(TWEEN.Easing.Linear.None);
    tween8 = new TWEEN.Tween(pos).to({x: 2871, y: 0, z: -46, lx: 2871, ly: 0, lz: 0}, 36 * this.animation_time);
    tween8.easing(TWEEN.Easing.Linear.None);
    tween9 = new TWEEN.Tween(pos).to({x: 4504, y: 0, z: -46, lx: 4504, ly: 0, lz: 0}, 37 * this.animation_time);
    tween9.easing(TWEEN.Easing.Linear.None);
    tween10 = new TWEEN.Tween(pos).to({x: -600, y: 452, z: 0, lx: 778.33, ly: 0, lz: 0}, 38 * this.animation_time);
    tween10.easing(TWEEN.Easing.Linear.None);

    tween1.chain(tween2).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show1 = false).onComplete(() => this.show2 = true);
    tween2.chain(tween3).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show2 = false).onComplete(() => this.show3 = true);
    tween3.chain(tween4).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show3 = false).onComplete(() => this.show4 = true);
    tween4.chain(tween5).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show4 = false).onComplete(() => this.show5 = true);
    tween5.chain(tween6).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show5 = false).onComplete(() => this.show6 = true);
    tween6.chain(tween7).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show6 = false).onComplete(() => this.show7 = true);
    tween7.chain(tween8).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show7 = false).onComplete(() => this.show8 = true);
    tween8.chain(tween9).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show8 = false).onComplete(() => this.show9 = true);
    tween9.chain(tween10).onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show9 = false).onComplete(() => this.show10 = true);
    tween10.onUpdate(onUpdate).delay(50 * this.animation_time).onStart(() => this.show10 = false);
    
    tween1.start();
},

主要程式碼差不多就是這樣，像這樣製作太陽系並不難，只要你敢想。

轉載請註明地址：郭先生的部落格

canvas繪製太陽系
2017-10-27
Canvas
canvas繪製太陽系運動效果
2017-06-16
Canvas
一個太陽系HTML
2024-08-02
HTML
Three.js實現太陽系八大行星的自轉公轉
2019-04-08
JS
three.js 製作魔方
2020-07-27
JS
用Python搓一個太陽系
2022-02-25
Python
three.js 製作機房（上）
2020-08-11
JS
three.js 製作機房（下）
2020-08-12
JS
用HTML5的canvas畫太陽系
2021-09-09
HTMLCanvas
CSS3 太陽系星球旋轉效果
2017-11-27
CSSS3
ARKit如何將太陽系裝進iPhone（二）
2017-12-21
iPhone
Three.js 初探 - 微場景製作
2017-11-10
JS
太陽（藍橋杯14屆）
2024-04-11
three.js 製作邏輯轉體遊戲（下）
2020-08-20
JS遊戲
three.js 製作邏輯轉體遊戲（上）
2020-08-19
JS遊戲
基於 HTML5 + WebGL 的太陽系 3D 展示系統
2019-12-04
HTMLWeb3D
【IDL】幫助科學家瞭解太陽系的形成
2024-06-28
使用THREE.js製作一款3D遊戲
2018-10-05
JS3D遊戲
css地球月亮太陽環繞旋轉
2018-05-20
CSS
暴力破解太陽鏡++ (607字)
2001-04-09
three.js 製作屬於自己的動態二維碼
2020-07-18
JS
three.js 利用uv和ThreeBSP製作一個快遞櫃
2020-08-18
JS
基於 HTML5 + WebGL 的太陽系 3D 視覺化系統
2020-04-06
HTMLWeb3D視覺化
LulzSec如何黑掉《太陽報》網站的？
2011-07-20
網站
Python模擬太陽-地球-月亮運動模型
2019-02-19
Python模型
canvas實現太陽、地球和月亮旋轉效果
2017-02-22
Canvas
three.js cannon.js物理引擎製作一個保齡球遊戲
2021-02-04
JS遊戲
Spectacles智慧太陽鏡能拍小影片的眼鏡
2016-09-28
three.js cannon.js物理引擎之製作擁有物理特性的汽車
2021-02-01
JS
QNX 如何製作目標系統，製作系統映象，燒寫系統檔案
2017-07-08
網際網路之父瑟夫稱要把網際網路送到整個太陽系
2007-09-29
DataGear 製作基於 three.js 的 3D 資料視覺化看板
2024-02-29
JS3D視覺化
Linux 製作系統映象
2020-10-30
Linux
u盤製作系統盤
2018-06-23
在太陽城網賭提不了款的解決辦法
2019-07-14
太陽軟體帶你溫習：反爬手段有幾何？
2019-02-12
1000粉！使用Three.js製作一個專屬3D獎牌?
2022-01-20
JS3D
windows系統盤製作，系統裝機
2024-11-04
Windows