标签：创建 THREE three let position new js data 太阳系
前言
刚开始使用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 = 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 = 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 class="msg-div">
<div class="top-r">
<!--边角样式-->
</div>
<div class="bottom-r"></div>
<div class="parameter-div">
<div class="name">{{ 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 class="description">
{{ 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动画。
源码地址
文章省略了很多代码，可以查看项目所有源码
标签：创建,THREE,three,let,position,new,js,data,太阳系 来源： https://www.cnblogs.com/xi12/p/16513757.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。