Threejs实现3d地球记录（5）

四、球面标注

1、静态圆点平面mash标注地点

创建矩形平面网格模型（PlaneGeometry），并设置贴图（使用TextureLoader加载器），然后设置该网格模型所在位置,并渲染出来。

function createPointMesh(R, lon, lat) {var geometry1 = new THREE.PlaneGeometry(1, 1);var textureLoader1 = new THREE.TextureLoader();var texture1 = textureLoader1.load(tagImg);var material1 = new THREE.MeshBasicMaterial({color: 0x22ffcc,map: texture1,transparent: true,opacity: 1.0,side: THREE.DoubleSide,depthWrite: false,});var mesh = new THREE.Mesh(geometry1, material1);var size1 = R * 0.05;//矩形平面Mesh的尺寸mesh.scale.set(size1, size1, size1);//设置mesh大小// 经纬度转球面坐标var coord = lon2xyz(R * 1.001, lon, lat)//设置mesh位置mesh.position.set(coord.x, coord.y, coord.z);return mesh;
}

标注的点与飞线段起始点一致，因此可在渲染飞线处，渲染球面标注

var flyArcGroup = new THREE.Group();
var flyArr = [];
Object.keys(data).map(item => {var startmesh = createPointMesh(R, data[item].start.E, data[item].start.N);//起始点标注flyArcGroup.add(startmesh);data[item].end.forEach((coord) => {var arcline = flyArc(data[item].start.E, data[item].start.N, coord.E, coord.N)flyArcGroup.add(arcline);var mesh = createPointMesh(R, coord.E, coord.N);//结束点标注flyArcGroup.add(mesh);flyArr.push(arcline.flyLine);});
})

效果：

上图可看出，由于创建的mash默认平行于xoy平面，因此需使用四元数对mash姿态角度进行调整，使其与地球球面相切
使平面mash与地球球面相切，可简单理解为xoy平面法向量z轴旋转到原点与mash所在位置点形成的方向向量（旋转后的法向量），将mash的四元数设置为这个旋转过程的四元数即可实现平面mash与地球球面相切。

function createPointMesh(R, lon, lat) {...var coordVec3 = new THREE.Vector3(coord.x, coord.y, coord.z).normalize();var meshNormal = new THREE.Vector3(0, 0, 1);mesh.quaternion.setFromUnitVectors(meshNormal, coordVec3);return mesh;
}

效果：

2、标注点波动光圈设置

将波动光圈贴图矩形网格模型渲染出来(同静态球面标注渲染方式)
由于波动光圈与静态球面标注位置，姿态一致，可直接将波动光圈设置为静态球面标注的子元素，继承静态球面标注的属性。此处注意需给波动光圈矩形网格模型一个自定义属性_s用来表示mesh在原始大小基础上放大倍数。

function createPointMesh(R, lon, lat) {...var geometry2 = new THREE.PlaneBufferGeometry(1, 1);var textureLoader2 = new THREE.TextureLoader();var texture2 = textureLoader2.load(waveImg);var material2 = new THREE.MeshBasicMaterial({color: 0x22ffcc,map: texture2,transparent: true,opacity: 1.0,side: THREE.DoubleSide,depthWrite: false,});var waveMesh = new THREE.Mesh(geometry2, material2);var size2 = R * 0.03;waveMesh.size = size2;//自定义一个属性，表示mesh静态大小waveMesh.scale.set(size2, size2, size2);waveMesh._s = Math.random() + 1.0;//光圈在原来mesh.size基础上1~2倍之间变化mesh.add(waveMesh)//将waveMesh设置为mesh的子元素，继承mesh位置及姿态信息...return mesh;
}

在渲染飞线处，渲染波动光圈矩形网格模型，并将得到的波动光圈Mash数组存入WaveMeshArr 中，方便后续在渲染循环中对光圈的波动进行设置。

var flyArcGroup = new THREE.Group();
var flyArr = [];
var WaveMeshArr = [];
Object.keys(data).map(item => {var startmesh = createPointMesh(R, data[item].start.E, data[item].start.N);//起始点静态圆点平面flyArcGroup.add(startmesh);WaveMeshArr.push(startmesh.children[0]);data[item].end.forEach((coord) => {var arcline = flyArc(data[item].start.E, data[item].start.N, coord.E, coord.N)flyArcGroup.add(arcline);if (!(data[item].start.E == coord.E && data[item].start.N == coord.N)) {var mesh = createPointMesh(R, coord.E, coord.N);//终点静态圆点平面flyArcGroup.add(mesh);WaveMeshArr.push(mesh.children[0]);}flyArr.push(arcline.flyLine);});
})

无波动效果：

实现波动效果
要实现波动效果分成两步，首先要使光圈有缩放效果，我这次设置的缩放是在原来大小基础上1~2倍之间变化，其次是使光圈在缩放过程中有个淡入淡出的效果，即刚出现时透明度为0，透明度在缩放倍数1-1.5之间由0变为1，在缩放倍数1.5-2之间又由1变为0。
波动设置需在渲染循环函数中执行：

const animate = function () {...// 一个波动光圈透明度变化过程是：0~1~0反复循环if (WaveMeshArr.length) {WaveMeshArr.forEach(function (mesh) {mesh._s += 0.01;  //可调节波动速度，值越大，波动越快mesh.scale.set(mesh.size * mesh._s, mesh.size * mesh._s, mesh.size * mesh._s);if (mesh._s <= 1.5) {mesh.material.opacity = (mesh._s - 1) * 2;//缩放倍数为1-1.5，保证透明度从0变为1} else if (mesh._s > 1.5 && mesh._s <= 2) {mesh.material.opacity = 1 - (mesh._s - 1.5) * 2;//缩放倍数为1.5-2，保证透明度从1变为0} else {mesh._s = 1.0;//缩放倍数超出2后恢复为1}})}requestAnimationFrame(animate);renderer.render(scene, camera);labelRenderer.render(scene, camera); //渲染HTML标签对象};

效果：

Threejs实现3d地球记录（5）相关推荐

Threejs实现3d地球记录（4）
三.地球信息流可视化(飞线) 1.曲线介绍 Three.js基础曲线函数有三种: 样条曲线:在三维空间中设置5个顶点,输入三维样条曲线CatmullRomCurve3函数作为参数,然后返回更多个顶点, ...
Threejs实现3d地球记录（3）
(2).对等距点集进行三角剖分生成Mash 我将三角剖分可以简单理解为以最接近的三点形成三角形,且各线段(三角形的边)皆不相交:这里使用开源库delaunator进行点的三角剖分 // polygon ...
threejs开发3d地球酷炫效果
代码如下,详情:https://gitee.com/XiaoHu12685/three-demo/blob/master/examples/earth_tiger.html <!DOCTYPE ...
threejs 绘制球体_实战：用 threejs 创建一个地球
原标题:实战:用 threejs 创建一个地球提示: 讲座前端大型免费公开课讲座教程从零基础学前端教程,都在这~ 上个月底,在朋友圈看到一个号称"这可能是地球上最美的h5" ...
3D地球的生成（一）——生成全球的3D图
原文发布时间:2010-07-03 作者:毛毛虫这一部分内容是演示如何生成一个全球的3D图. 这篇文章中的例子显示了一个以经纬度表示的2D地图如何被转换为3D地球. 我们首先需要创建一个全球范围的矩 ...
threejs生成3d地图所需
threejs生成3d地图所需 1.threejs,郭龙邦弄的教程熟悉形状.线绘制,绘制白模楼宇熟悉sprite,用以做POI标注熟悉光照熟悉LOD,用以远近不同时加载不同物体.地面熟悉漫游 ...
threejs和3d各种效果的学习
写给即将开始threejs学习的自己,各种尝试,各种记忆.不要怕,灰色的年华终会过去. 一个技术学习的快慢,以及你的深刻程度,还有你的以后遇到这个东西的时候的反应速度,很大程度上,取决于你的博客的深刻 ...
使用threejs 实现3D物体展示，平移实现类似百度地图功能
为了实现类似百度地图功能使用threejs 实现3D物体,通过鼠标平移,缩放,键盘箭头按钮左右移动的功能展示. <!DOCTYPE html> <html> <head ...
【实战篇】40 # 如何实现3D地球可视化？
说明 [跟月影学可视化]学习笔记. 如何实现一个 3D 地球学习笔记源码实现:https://github.com/kaimo313/visual-learning-demo 整体实现效果如下: 1 ...
3d地球散点图加路径lines3D的实现，带有散点即路径的立体地球
一. globe+lines3D+scatter3D 效果图: 安装 npm install echarts echarts-gl 代码 <template><div id=&quo ...

Threejs实现3d地球记录（5）

四、球面标注

1、静态圆点平面mash标注地点

2、标注点波动光圈设置

Threejs实现3d地球记录（5）相关推荐

最新文章

热门文章