肝了一晚上的地球飞星动画!!

前端Sharing

共 6423字,需浏览 13分钟

 ·

2021-11-29 11:07

前言

最近有粉丝在群里讨论,如何实现可视化大屏中的飞星动画,Fly哥最近也是抽空简单写了下小demo。读完这篇文章你可以学到

  1. 「球面坐标系」
  2. 「还有就是三阶贝塞尔曲线」
  3. 「二维图形转球面」

直接看效果:

飞星动画

一、 3d绘制场景的构建

绘制一个3d程序首先需要添加 「渲染器」「场景」「照相机」  这些元素,这里补充一个灯光;

1、渲染器

首先创建一个渲染器,参数为页面中的canvas元素,

渲染器的作用就是把3d场景的内容结合照相机渲染到页面中,

最后将画布背景设为白色。

const renderer = new Three.WebGLRenderer({canvasthis.$refs.thr});
renderer.setClearColor(0x000000);

2、场景

场景顾名思义,就是添加一个你发挥(绘制)的场地,后面所有绘制的元素都要添加到场景中;

cosnt scene = new Three.Scene();

3、照相机

照相机就像人的视觉或说从什么角度去看场景,看场景的位置和视线的方向决定了渲染到页面的内容。故一般需要设置两个参数相机位置position、视线方向lookAt,,在webgl其实是需要三组参数视点,观察点,和上方向。thresjs中好像是默认Y轴为上方向了,这里使用透视相机。

const camera = new THREE.PerspectiveCamera(45500 / 50011500);
camera.position.set(1001001000);
camera.lookAt(new THREE.Vector3(000));
scene.add(this.camera);

4、灯光

这里使用THREE.HemisphereLight光,可以更加贴近自然的户外光照效;

let light = new THREE.HemisphereLight(0xffffff); 
light.position.set(00200); 
scene.add(light)

以上我们基本的绘制要素已添加完成,下面开始绘制各个几何体内容;

「几何体的绘制有三部:创建几何体,创建材料,添加网格模型;」

二、地球的绘制

threejs中提供了球体的绘制,我们只需创建一个球体,材料使用纹理贴图方式添加地图;

贴图图片是我从官网上找的

const geometry = new THREE.SphereGeometry(this.radius, 100100); // 球体      
const textureLoader = new THREE.TextureLoader(); // 创建纹理贴图      
const texture = textureLoader.load(require("@/assets/map.jpg"),texture => {  
  let material = new THREE.MeshLambertMaterial({map: texture,transparenttrue,});
  let mesh = new THREE.Mesh(geometry, material);  
  scene.add(mesh);
});

由于图片加载是异步的 ,这里需等图片加载完成后才能创建材质;

img

这里我们就创建好了一个地球模型,接着还要让其转动起来;(中间为xyz坐标轴)

threejs提供了几何体的基本3d变换,直接使用rotateY(angleChange)根据时间设置其绕y轴(绿色轴)旋转角度即可;

三、球面坐标点的绘制

「1、在绘制球面位置点时,需先前先看下球坐标系,确定点的位置,webgl中坐标方向与下图不一致,但是对点的表示方法是一致的;」

img

球面上任意点可以用r,θ,φ表示,也可通过以下公式转化到直角坐标系中

x=rsinθcosφ.

y=rsinθsinφ.

z=rcosθ

但实际中地球位置我们一般也会使用经纬度表示。。。下面写个经纬度转坐标的方法。

threejs提供了THREE.Math.degToRad方法可以将经纬度转化为θ,φ,转化方法如下,这里为了方便后面使用,我直接返回一个3维向量;

getPosition(longitude, latitude, radius = this.radius) {     
  // 经度,纬度转换为坐标      
  let lg = THREE.Math.degToRad(longitude);      
  let lt = THREE.Math.degToRad(latitude);      // 获取x,y,z坐标      
  let temp = radius * Math.cos(lt);      
  let x = temp * Math.sin(lg);      
  let y = radius * Math.sin(lt);      
  let z = temp * Math.cos(lg);      
  return new THREE.Vector3(x, y, z);  
},

「2、知道了位置的表示方法后开始绘制表示位置的点」

根据示例位置点的由点和一个圆环组成,我们先绘制一个二维平面内的点和圆弧,在通过设置其位置和旋转方式移动到目标坐标位置点;

(这里也可以绘制几何小球体来模拟)

(1)点的绘制

THREE.Shape是用来绘制二维平面内的形状的,设置其形状为圆弧,即可实现一个原点;

let shapePoint = new THREE.Shape();
shapePoint.absarc(00, r - 402 * Math.PI, false);
let arcGeometry = new THREE.ShapeGeometry(shapePoint);
let arcMaterial = new THREE.MeshBasicMaterial({ color0x008080 });
let point = new THREE.Mesh(arcGeometry, arcMaterial);

(2)圆弧的绘制

let geometryLine = new THREE.Geometry();
let arc = new THREE.ArcCurve(00, r, 02 * Math.PI);
let points = arc.getPoints(40);
geometryLine.setFromPoints(points);
let LineMateri = new THREE.LineBasicMaterial({ color0x20b2aa });
let line = new THREE.Line(geometryLine, LineMateri);

(3)位置的设置

position.set(pos.x, pos.y, pos.z);

(4)二维图形旋转至球面

THREE.Spherical()方法 ,可将坐标点转化为坐标点转化回球坐标系的偏移角度;

let spherical = new THREE.Spherical();
spherical.setFromCartesianCoords(pos.x, pos.y, pos.z);

设置位置点旋转

Point.rotateX(spherical.phi - Math.PI / 2);
Point.rotateY(spherical.theta);

这里为什么要 - Math.PI / 2 是因为开始我们绘制时,平面是垂直于y轴的平面,看下面这幅图吧;

img

四、接着绘制链接球面两点间的连线

连接两点的曲线需在球面上方,

两点间可以坐出无数条曲线,那么如何确定曲线,我们需自己再选择合适的参数来确定;

首先想的是二阶贝塞尔曲线,取两点的中点为控制点,但如果链接两点刚好位于球面的两个对称端点(两点间连线为直径)时,控制点需在无穷远处;

故考虑使用三阶贝塞尔曲线,连接球面两点和球心,三点确定的一个平面如下图,

img

链接v1 v1,取中点c,链接oc,做一条射线,在射线取一点p,链接v1p,v2p,在v1,v2上取两点作为控制点;

求两点的中点

 getVCenter(v1, v2) { 
   let v = v1.add(v2);  
   return v.divideScalar(2); 
 }

获取两点间指定比例位置坐标

getLenVcetor(v1, v2, len) {   
    let v1v2Len = v1.distanceTo(v2);   
    return v1.lerp(v2, len / v1v2Len);
}

获取贝塞尔控制点,(控制点位置大小需与夹角线性相关)

// 获取贝塞尔控制点    
getBezierPoint(v0, v3) {          
 let angle = (v0.angleTo(v3) * 180) / Math.PI; // 0 ~ Math.PI       // 计算向量夹角 
 let aLen = angle * 2.5,        
     hLen = angle * angle * 50;      
 let p0 = new THREE.Vector3(000);      // 法线向量      
 let rayLine = new THREE.Ray(p0, this.getVCenter(v0.clone(), v3.clone()));      // 顶点坐标 
 let vtop = rayLine.at(hLen / rayLine.at(1).distanceTo(p0), vtop); // 位置      
 // 控制点坐标      
 let v1 = this.getLenVcetor(v0.clone(), vtop, aLen);      
 let v2 = this.getLenVcetor(v3.clone(), vtop, aLen);     
 return {        
  v1: v1,        
  v2: v2      
 };    
},

绘制三次贝塞尔曲线

    drawLine(longitude, latitude, longitude2, latitude2) {      
      let geometry = new THREE.Geometry(); //声明一个几何体对象Geometry
      let v0 = this.getPosition(longitude, latitude, this.radius);      
      let v3 = this.getPosition(longitude2, latitude2, this.radius);
      let { v1, v2 } = this.getBezierPoint(v0, v3);           // 三维二次贝赛尔曲线      
      let curve = new THREE.CubicBezierCurve3(v0, v1, v2, v3);
      let curvePoints = curve.getPoints(100);
      geometry.setFromPoints(curvePoints);
      let material = new THREE.LineBasicMaterial({        color0xff7e41      });
      let line = new THREE.Line(geometry, material);
      this.group.add(line);
      this.sport(curvePoints);    
    },

五、小球的运动轨迹

小球的动画我们使用three的帧动画,路径可以直接使用上一步中的曲线;

1、绘制小球

drawSportPoint(position, name) {    
    let box = new THREE.SphereGeometry(666);    
    let material = new THREE.MeshLambertMaterial({      color0x00bfff    });      //材质对象    
let mesh = new THREE.Mesh(box, material);
    mesh.name = name;    
    mesh.position.set(position.x, position.y, position.z);    
    this.groupBall.add(mesh);    
    this.group.add(this.groupBall);    
    return mesh;
},

2、让小球动起来

sport(curvePoints, index) {      
    const Ball = this.drawSportPoint(curvePoints[0]);      
    let arr = Array.from(Array(101), (v, k) => k);      // 生成一个时间序列      
    let times = new Float32Array(arr);
    let posArr = [];      
    curvePoints.forEach(elem => {
         posArr.push(elem.x, elem.y, elem.z);      
    });      // 创建一个和时间序列相对应的位置坐标系列      
    let values = new Float32Array(posArr);      // 创建一个帧动画的关键帧数据,曲线上的位置序列对应一个时间序列      
    let posTrack = new THREE.KeyframeTrack("Ball.position", times, values);      
    let duration = 101;      
    let clip = new THREE.AnimationClip("default", duration, [posTrack]);      
    this.mixer = new THREE.AnimationMixer(Ball);      
    let AnimationAction = this.mixer.clipAction(clip);      
    AnimationAction.timeScale = 20;      
    AnimationAction.play();
},

3、在requestAnimationFrame中添加触发动画

this.mixer.update(this.clock.getDelta());

最后

喜欢的话,欢迎关注公众号 前端Sharing


浏览 61
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报