1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > ThreeJS 地球上撒点

ThreeJS 地球上撒点

时间:2023-09-19 12:52:21

相关推荐

ThreeJS 地球上撒点

环境

ThreeJS 107版本three.min.jsOrbitControls.js

说明

撒点功能原理是在地球上根据坐标批量加上圆对象,可以设置颜色和球大小。

解决方案

创建球的过程参见"ThreeJS制作地球"

创建点group,考虑后面会做删除功能,所以把所有的实体都以group组为单位添加,后续方便做删除

// 标记点组合var marking = new THREE.Group();

根据数据,循环添加圆以及材质

for (var i = 0; i < _markData.length; i++) {// 创建标记点球体var mark = new THREE.Mesh(new THREE.SphereGeometry(radius, 30, 30), new THREE.MeshBasicMaterial({color: _style.color ? _style.color : '#1bb4b0'}));// 获取标记点坐标var markPos = this.getPosition(_markData[i].attributes.x + 90, _markData[i].attributes.y, 30);mark.position.set(markPos.x, markPos.y, markPos.z);marking.add(mark);}scene.add(marking);

经纬度转球坐标

this.getPosition = function (_longitude, _latitude, _radius) {var lg = THREE.Math.degToRad(_longitude);var lt = THREE.Math.degToRad(_latitude);var temp = _radius * Math.cos(lt);var x = temp * Math.sin(lg);var y = _radius * Math.sin(lt);var z = temp * Math.cos(lg);return {x: x,y: y,z: z}}

附上效果图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。