前言
剛開始使用three.js時會不太熟悉，想寫一些專案增加理解，網上翻了好多文章，不是畫立方體就是畫三角形，最后偶然看到這個網站，十分炫酷，
我們也許沒那么牛逼，但我們可以整個簡略版的太陽系來練練手，加強理解，增加熟練度，
實作目標
1、繪制宇宙背景，
2、添加宇宙星辰，
3、繪制行星軌道，
4、繪制行星環，
5、實作行星自轉與公轉，
6、實作雙擊行星后鏡頭的拉近效果(類似cesium的flyTo效果)，
7、顯示行星描述，
具體效果
這里是瀏覽地址，專案是用vue2開發的，廢話少說，我們直接開整！
匯入依賴
import * as THREE from "three";//匯入three.js
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"; //匯入滑鼠控制器
import TWEEN from "@tweenjs/tween.js";//匯入tween影片
構造行星資料
我將資料寫在了js里面，便于直接匯出，當然你也可以寫一個json，這里以一個球體(太陽)作為例子，其他類似，
let sun = {
name: "太陽",//球體名稱
mapImg: sunImg,//球體貼圖
size: sunSize,//球體尺寸
position: [0, 0, 0],//位置(x，y，z)
rotation: 0.05,//自轉速度
revolution: 0,//公轉速度
data: {
sunDistance: "0km", weight: "1.989e30kg", diameter: "1392000km", rotation: "36day",
revolution: "", temp: "5500℃", atmosphere: "氮氣、氧氣、氬氣", msg: "太陽是在大約45.7億年前在一個坍縮的氫分子云內形成，太陽是太陽系里唯一的恒星，是太陽系的中心天體，"
}//描述
};
其他球體資料構造完后放入陣列，匯出，
let planetList = [sun, mercury, venus, earth, mars, jupiter, saturn, uranus, neptune, pluto];
export default planetList;
初始化場景
init() {
this.dom = document.getElementById("planetDiv"); //獲取dom
let width = this.dom.clientWidth;
let height = this.dom.clientHeight;
scene = new THREE.Scene(); //場景場景
// scene.add(new THREE.AxesHelper(500));
camera = new THREE.PerspectiveCamera(45, width / height, 1, 50000); //創建透視相機(視場、長寬比、近面、遠面)
camera.position.set(0, 500, 2700); //設定相機位置
camera.lookAt(0, 0, 0);
//創建渲染器
this.renderer = new THREE.WebGLRenderer({
antialias: true, //抗鋸齒
alpha: true, //透明
});
this.renderer.setClearColor(0x000000, 0.1); //設定場景透明度
this.renderer.setSize(width, height); //設定渲染區域尺寸
this.dom.appendChild(this.renderer.domElement); //將渲染器添加到dom中形成canvas
this.createUniverse(); //創建宇宙
this.createStars(); //創建星辰
this.createLight(); //創建光源
//遍歷行星資料生成星球及其軌道
this.planetList.forEach((e) => {
this.createSphere(e);//創建球體
this.createTrack(e);//創建軌跡
});
this.createOrbitControls(); //創建滑鼠控制器
this.render(); //渲染
},
創建場景與渲染器，引數需要自己調節，記得將渲染器的antialias與alph打開，
創建宇宙
//創建宇宙(球形宇宙)
createUniverse() {
let universeGeometry = new THREE.SphereGeometry(7000, 100, 100);
let universeMaterial = new THREE.MeshLambertMaterial({
//高光材質
map: new THREE.TextureLoader().load(universeImg),//匯入宇宙貼圖
side: THREE.DoubleSide, //雙面顯示
});
//宇宙網格
let universeMesh = new THREE.Mesh(universeGeometry, universeMaterial);
universeMesh.name = "宇宙";
scene.add(universeMesh);//將宇宙網格添加到場景中
},
這里創建背景的方法為這篇文章的第三種創建背景的方法，使用SphereGeometry創建宇宙的幾何體，MeshLambertMaterial作為宇宙的材質，記得打開材質的side屬性，進行雙面顯示，
創建星辰
//創建星辰
createStars() {
const positions = [];
const colors = [];
//星辰幾何體
const starsGeometry = new THREE.BufferGeometry();
//添加星辰的顏色與位置
for (let i = 0; i < 10000; i++) {
let vertex = new THREE.Vector3();
vertex.x = Math.random() * 2 - 1;
vertex.y = Math.random() * 2 - 1;
vertex.z = Math.random() * 2 - 1;
positions.push(vertex.x, vertex.y, vertex.z);
let color = new THREE.Color();
color.setRGB(255, 255, 255);
colors.push(color.r, color.g, color.b);
}
starsGeometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(positions, 3)
);
starsGeometry.setAttribute(
"color",
new THREE.Float32BufferAttribute(colors, 3)
);
//星辰材質
let starsMaterial = new THREE.PointsMaterial({
map: new THREE.TextureLoader().load(starImg),
size: 5,
blending: THREE.AdditiveBlending,
fog: true,
depthTest: false, //(不能與blending一起使用)
// depthWrite: false, //(深度寫入)防止星辰在球體前面出現黑塊
});
//星辰的集合
let starsMesh = new THREE.Points(starsGeometry, starsMaterial);
starsMesh.scale.set(7000, 7000, 7000); //設定集合體范圍
scene.add(starsMesh);
},
星辰是若干個THREE.Points構成的，材質是PointsMaterial，幾何體是BufferGeometry，在添加星辰到場景中前，記得使用scale.set()設定星辰集合的尺度，
創建光源
//創建光源
createLight() {
let ambient = new THREE.AmbientLight(new THREE.Color(0xffffff)); //環境光
scene.add(ambient);
let pointLight = new THREE.PointLight(new THREE.Color(0xffffff), 2, 1, 0); //點光源
pointLight.visible = true;
pointLight.position.set(0, 0, 0); //點光源在原點充當太陽
scene.add(pointLight); //點光源添加到場景中
},
這里我將光源設定在太陽的中心，即場景的中心，
創建球體
//創建球體
createSphere(data) {
//處理特殊球體
if (data.name == "太陽") {
this.createSun(data);
} else if (data.name == "地球") {
this.createEarth(data);
} else if (data.name == "金星") {
this.createVenus(data);
} else if (data.name == "土星") {
this.createSaturn(data);
} else {
//其他球體
let sphereGeometry = new THREE.SphereGeometry(data.size, 100, 100); //球體幾何體
//球體材質
let sphereMaterial = new THREE.MeshLambertMaterial({
map: new THREE.TextureLoader().load(data.mapImg),
});
let sphereMesh = new THREE.Mesh(sphereGeometry, sphereMaterial); //生成球體網格
sphereMesh.name = data.name; //網格名字
sphereMesh.planetMsg = data;
sphereMesh.isPlanet = true; //標識為星球
sphereMesh.angle = 0; //添加初始角度
//球體位置
sphereMesh.position.set(
data.position[0],//x
data.position[1],//y
data.position[2]//z
);
scene.add(sphereMesh); //球體添加到場景中
}
},
這里我將單獨處理太陽、地球、金星、土星，其他星球直接通過行星資料進行批量創建，流程均為，創建SphereGeometry，創建MeshLambertMaterial，設定位置、添加到場景，
創建太陽
//創建太陽
createSun(data) {
let sunGroup = new THREE.Group(); //太陽的組
let sunGeometry = new THREE.SphereGeometry(data.size, 100, 100); //太陽幾何體
let sunMaterial = new THREE.MeshLambertMaterial({
//太陽材質
color: new THREE.Color(0xffffff),
map: new THREE.TextureLoader().load(data.mapImg),
});
let sunMesh = new THREE.Mesh(sunGeometry, sunMaterial);
sunGroup.add(sunMesh);
//太陽大氣幾何體
let sunAtmosphereGeometry = new THREE.SphereGeometry(
data.size + 8,
100,
100
);
let sunAtmosphereMaterial = new THREE.MeshLambertMaterial({
color: new THREE.Color(0xffffff),
transparent: true,
opacity: 0.2,
});
let sunAtmosphereMesh = new THREE.Mesh(
sunAtmosphereGeometry,
sunAtmosphereMaterial
);
sunGroup.add(sunAtmosphereMesh);
sunGroup.name = data.name; //網格名字
sunGroup.planetMsg = data;
sunGroup.isPlanet = true; //標識為星球
sunGroup.angle = 0; //添加初始角度
//球體位置
sunGroup.position.set(
data.position[0],
data.position[1],
data.position[2]
);
scene.add(sunGroup);
},
創建太陽需要使用THREE.Group()，將太陽網格sunMesh 添加到組中再將組添加到場景中，這里我們給太陽添加了一層透明球殼作為太陽大氣，大氣半徑需要大于太陽球體，同時太陽大氣材質MeshLambertMaterial需要開啟透明屬性transparent，金星與太陽的創建方法一樣，只不過金星大氣多添加了貼圖材質，
創建地球
//創建地球
createEarth(data) {
let earthGroup = new THREE.Group(); //地球的組
let earthGeometry = new THREE.SphereGeometry(data.size, 100, 100); //地球幾何體
//地球材質
let earthMaterial = new THREE.MeshPhysicalMaterial({
map: new THREE.TextureLoader().load(data.mapImg),
normalScale: new THREE.Vector2(10, 10), //凹凸深度
normalMap: new THREE.TextureLoader().load(earthNormalImg), //法線貼圖
});
let earthMesh = new THREE.Mesh(earthGeometry, earthMaterial); //地球網格
earthGroup.add(earthMesh); //將地球網格添加到地球組中
//地球云層幾何體
let earthCloudsGeometry = new THREE.SphereGeometry(
data.size + 2,
100,
100
);
//地球云層材質
let earthCloudsMaterial = new THREE.MeshLambertMaterial({
color: new THREE.Color(0xffffff),
transparent: true,
opacity: 0.4,
map: new THREE.TextureLoader().load(earthCloudsImg),
});
//地球云層網格
let earthCloudsMesh = new THREE.Mesh(
earthCloudsGeometry,
earthCloudsMaterial
);
earthGroup.add(earthCloudsMesh); //將地球云層網格添加到地球組中
//創建月球軌道
let moonTrackGeometry = new THREE.RingBufferGeometry( //圓環幾何體
data.size + 40,
data.size + 40.2,
100
);
let moonTrackMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
let moonTrackMesh = new THREE.Mesh(moonTrackGeometry, moonTrackMaterial);
moonTrackMesh.rotation.set(0.5 * Math.PI, 0, 0);
earthGroup.add(moonTrackMesh);
//創建月球
let moonGeometry = new THREE.SphereGeometry(10, 100, 100);
let moonMaterial = new THREE.MeshPhysicalMaterial({
map: new THREE.TextureLoader().load(moonImg),
normalScale: new THREE.Vector2(10, 10), //凹凸深度
});
let moonMesh = new THREE.Mesh(moonGeometry, moonMaterial);
moonMesh.position.set(data.size + 40, 0, 0);
earthGroup.add(moonMesh);
earthGroup.name = data.name; //網格名字
earthGroup.planetMsg = data;
earthGroup.isPlanet = true; //標識為星球
earthGroup.angle = 0; //添加初始角度
//球體位置
earthGroup.position.set(
data.position[0],
data.position[1],
data.position[2]
);
scene.add(earthGroup);
},
創建地球使用的材質為MeshPhysicalMaterial，該材質使用normalMap添加法線貼圖與normalScale設定凹凸深度后可使該材質顯示出凹凸效果，地球周圍有月球，月球軌道使用環形幾何體RingBufferGeometry創建，月球使用MeshPhysicalMaterial材質創建，將創建好的月球添加到地球組中，最后將地球組添加到場景中，
創建土星
//創建土星
createSaturn(data) {
let saturnGroup = new THREE.Group(); //土星的組
let saturnGeometry = new THREE.SphereGeometry(data.size, 100, 100); //土星幾何體
let saturnMaterial = new THREE.MeshLambertMaterial({
map: new THREE.TextureLoader().load(data.mapImg), //土星材質
});
let saturnMesh = new THREE.Mesh(saturnGeometry, saturnMaterial); //土星網格
saturnGroup.add(saturnMesh); //將土星網格添加到地球組中
//創建土星環1
let saturnTrackGeometry1 = new THREE.RingBufferGeometry( //圓環幾何體
data.size + 10,
data.size + 25,
100
);
let saturnTrackMaterial1 = new THREE.MeshLambertMaterial({
transparent: true,
opacity: 0.8,
color: 0xc0ad87,
side: THREE.DoubleSide,
});
let saturnTrackMesh1 = new THREE.Mesh(
saturnTrackGeometry1,
saturnTrackMaterial1
);
saturnTrackMesh1.rotation.set(0.5 * Math.PI, 0, 0);
//創建土星環2
let saturnTrackGeometry2 = new THREE.RingBufferGeometry( //圓環幾何體
data.size + 26,
data.size + 30,
100
);
let saturnTrackMaterial2 = new THREE.MeshLambertMaterial({
transparent: true,
opacity: 0.5,
color: 0xc0ad87,
side: THREE.DoubleSide,
});
let saturnTrackMesh2 = new THREE.Mesh(
saturnTrackGeometry2,
saturnTrackMaterial2
);
saturnTrackMesh2.rotation.set(0.5 * Math.PI, 0, 0);
//創建土星環3
let saturnTrackGeometry3 = new THREE.RingBufferGeometry( //圓環幾何體
data.size + 30.1,
data.size + 32,
100
);
let saturnTrackMaterial3 = new THREE.MeshLambertMaterial({
transparent: true,
opacity: 0.3,
color: 0xc0ad87,
side: THREE.DoubleSide,
});
let saturnTrackMesh3 = new THREE.Mesh(
saturnTrackGeometry3,
saturnTrackMaterial3
);
saturnTrackMesh3.rotation.set(0.5 * Math.PI, 0, 0);
saturnGroup.add(saturnTrackMesh1); //將網格添加到組中
saturnGroup.add(saturnTrackMesh2);
saturnGroup.add(saturnTrackMesh3);
saturnGroup.name = data.name; //網格名字
saturnGroup.planetMsg = data;
saturnGroup.isPlanet = true; //標識為星球
saturnGroup.angle = 0; //添加初始角度
//球體位置
saturnGroup.position.set(
data.position[0],
data.position[1],
data.position[2]
);
scene.add(saturnGroup);
},
土星特點是其土星環，土星環使用環形幾何體RingBufferGeometry創建，材質使用MeshLambertMaterial，記得設定屬性side: THREE.DoubleSide,雙面顯示，將土星環都添加到土星組中，最后將土星組添加到場景中，
創建行星軌道
//創建球體軌跡
createTrack(data) {
if (data.name == "太陽") {
//去除太陽中心由圓環形成的圓形
return;
}
//創建軌跡
let trackGeometry = new THREE.RingBufferGeometry( //圓環幾何體
data.position[0],
data.position[0] + 2,
1000
);
//圓環材質
let trackMaterial = new THREE.LineBasicMaterial({
color: 0xffffff,
side: THREE.DoubleSide,
});
let trackMesh = new THREE.Mesh(trackGeometry, trackMaterial);
trackMesh.position.set(0, 0, 0); //軌道位置
trackMesh.rotation.set(0.5 * Math.PI, 0, 0); //旋轉軌道至水平
scene.add(trackMesh);
},
星球軌道的創建與月球軌道的創建一樣，使用的幾何體也是圓環幾何體RingBufferGeometry，除開太陽外其他星球均繪制軌道，
渲染影片
//渲染
render() {
//請求影片幀，螢屏每重繪一次呼叫一次，系結螢屏重繪頻率
this.anId = requestAnimationFrame(this.render); //記錄下影片id可用于銷毀場景
orbitControls.update(); //滑鼠控制元件實時更新
this.renderer.render(scene, camera);
//控制公轉
if (this.isRevolution) {
this.sphereRevolution(this.planetList); //球體公轉
}
if (this.isRotation) {
this.sphereRotation(this.planetList); //球體自轉
}
//監聽畫布雙擊事件
document.getElementById("planetDiv") &&
document
.getElementById("planetDiv")
.addEventListener("dblclick", this.handleDblclick, false);
TWEEN.update(); //更新影片
},
three.js的影片渲染通常使用請求影片幀requestAnimationFrame來完成，在渲染影片時即可添加各種事件與限制，
球體自轉
//球體自轉
sphereRotation(data) {
scene.children.forEach((e) => {
//過濾出星球
if (e.isPlanet) {
let planetData = https://www.cnblogs.com/xi12/archive/2022/07/24/data.filter((d) => d.name == e.name)[0];
if (e.name =="土星") {
e.rotation.x = 0.05 * 2 * Math.PI;
// return;
}
//天王星自轉軸特殊
if (e.name == "天王星") {
e.rotation.z =
e.rotation.z + planetData.rotation >= 2 * Math.PI
? 0
: e.rotation.z + planetData.rotation;
return;
}
e.rotation.y =
e.rotation.y + planetData.rotation >= 2 * Math.PI
? 0
: e.rotation.y + planetData.rotation;
}
});
},
在場景中過濾出標識為星球的物體執行自轉邏輯，自轉時值得注意的是土星與天王星的自轉，土星自轉是x軸角度自增的，天王星是z軸角度自增的，其他星球均為y軸角度變化，
球體公轉
//球體公轉
sphereRevolution(data) {
scene.children.forEach((e) => {
//過濾出星球
if (e.isPlanet) {
let planetData = https://www.cnblogs.com/xi12/archive/2022/07/24/data.filter((d) => d.name == e.name)[0]; //獲取球體資料
e.angle =
e.angle + planetData.revolution >= 2 * Math.PI
? 0
: e.angle + planetData.revolution;
e.position.set(
planetData.position[0] * Math.sin(e.angle),
0,
planetData.position[0] * Math.cos(e.angle)
);
}
});
},
在場景中過濾出標識為星球的物體執行公轉邏輯，所有公轉行星中金星的公轉角是自減的，
實作flyTo
//雙擊事件
handleDblclick(e) {
let dom = document.getElementById("planetDiv");
let width = dom.clientWidth; //視窗寬度
let height = dom.clientHeight; //視窗高度
//將滑鼠點擊位置的螢屏坐標轉換成threejs中的標準坐標
this.mouse.x = (e.offsetX / width) * 2 - 1;
this.mouse.y = -(e.offsetY / height) * 2 + 1;
// 通過滑鼠點的位置和當前相機的矩陣計算出raycaster
this.raycaster.setFromCamera(this.mouse, camera);
//生成星球網格串列
let palnetMeshList = [];
scene.children.forEach((p) => {
if (p.name !== "") {
palnetMeshList.push(p);
}
});
// 獲取raycaster直線和星球網格串列相交的集合
let intersects = this.raycaster.intersectObjects(palnetMeshList);
//判斷是否點擊到虛無的太空
if (intersects.length == 0) {
return;
}
//判斷是否是行星
if (intersects[0].object.isPlanet) {
this.clickPlanet = intersects[0].object;
} else {
this.clickPlanet = intersects[0].object.parent;
}
// console.log(this.clickPlanet);
//獲取球體半徑
let planetR = "";
this.planetList.forEach((e) => {
if (e.name == this.clickPlanet.name) {
planetR = e.size;
}
});
//相機新位置
let newP = {
x: this.clickPlanet.position.x,
y: this.clickPlanet.position.y + planetR,
z: this.clickPlanet.position.z + 2.5 * planetR,
};
//雙擊到星球需要停止公轉（雙擊虛空需反轉公轉狀態）
if (this.clickPlanet.type !== "Scene") {
this.isRevolution = false;
this.isRotation = false;
//點擊后傳入引數飛向星球
this.flyTo(
camera.position,
orbitControls.target,
newP,
this.clickPlanet.position,
2000
);
} else {
this.isRevolution = !this.isRevolution;
this.isRotation = !this.isRotation;
}
},
//飛向物件(舊相機位置，舊物件位置，新相機位置，新物件位置，影片時間，回呼)
flyTo(oldP, oldT, newP, newT, time, callBack) {
if (TWEEN) {
let tween = new TWEEN.Tween({
x1: oldP.x, // 相機x
y1: oldP.y, // 相機y
z1: oldP.z, // 相機z
x2: oldT.x, // 控制點的中心點x
y2: oldT.y, // 控制點的中心點y
z2: oldT.z, // 控制點的中心點z
});
tween.to(
{
x1: newP.x,
y1: newP.y,
z1: newP.z,
x2: newT.x,
y2: newT.y,
z2: newT.z,
},
time
);
tween.onUpdate(function (object) {
camera.position.set(object.x1, object.y1, object.z1);
orbitControls.target.x = object.x2;
orbitControls.target.y = object.y2;
orbitControls.target.z = object.z2;
orbitControls.update();
});
tween.onComplete(function () {
callBack && callBack();
});
tween.easing(TWEEN.Easing.Cubic.InOut);
tween.start();
}
},
雙擊事件擊中球體時觸發flyTo效果，需要使用three.js的光線投射器THREE.Raycaster()，判斷擊中的物體是否為指定物體，若判斷擊中的物體為星球，則使用flyTo效果，否則為擊中虛無太空，這里的flyTo效果實作使用了@tweenjs/tween.js中的TWEEN來實作拉近影片效果，
顯示行星描述
<template>
<div >
<div >
<!--邊角樣式-->
</div>
<div ></div>
<div >
<div >{{ msg.name }}</div>
<div>
距離太陽：<span>{{ data.sunDistance }}</span>
</div>
<div>
質量：<span>{{ data.weight }}</span>
</div>
<div>
直徑：<span>{{ data.diameter }}</span>
</div>
<div>
自轉：<span>{{ data.rotation }}</span>
</div>
<div>
公轉：<span>{{ data.revolution }}</span>
</div>
<div>
表面溫度：<span>{{ data.temp }}</span>
</div>
<div>
大氣成分：<span>{{ data.atmosphere }}</span>
</div>
</div>
<div >
{{ data.msg }}
</div>
</div>
</template>
<script>
import gsap from "gsap";//行星資訊顯示時使用影片
export default {
props: {
//星球資訊
msg: {
type: Object,
default() {
return {};
},
},
},
components: {},
data() {
return {};
},
computed: {
data() {
return this.msg.data;
},
},
watch: {},
created() {},
mounted() {
this.showMsg();
},
methods: {
showMsg() {
gsap.fromTo(".msg-div", { x: 200 }, { x: 0, duration: 0.5 });
},
},
};
</script>
在雙擊擊中行星時，取出該行星資料，將該行星資料傳遞至一個資訊顯示組件，組件使用gsap.fromTo影片，
原始碼地址
文章省略了很多代碼，可以查看專案所有原始碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/500136.html
標籤：其他