three.js实现太阳系

  • three.js实现太阳系已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

刚开始使用three.js时会不太熟悉,想写一些项目增加理解,网上翻了好多文章,不是画立方体就是画三角形,最后偶然看到这个网站,十分炫酷。

我们也许没那么牛逼,但我们可以整个简略版的太阳系来练练手,加强理解,增加熟练度。


前言

刚开始使用three.js时会不太熟悉,想写一些项目增加理解,网上翻了好多文章,不是画立方体就是画三角形,最后偶然看到这个网站,十分炫酷。
three.js实现太阳系
我们也许没那么牛逼,但我们可以整个简略版的太阳系来练练手,加强理解,增加熟练度。

实现目标

1、绘制宇宙背景。
2、添加宇宙星辰。
3、绘制行星轨道。
4、绘制行星环。
5、实现行星自转与公转。
6、实现双击行星后镜头的拉近效果(类似cesium的flyTo效果)。
7、显示行星描述。

具体效果

three.js实现太阳系
three.js实现太阳系
这里是浏览地址,项目是用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动画。

源码地址

文章省略了很多代码,可以查看项目所有源码