ThreeJS 地球上撒点
时间:2020-05-21
本文章向大家介绍ThreeJS 地球上撒点,主要包括ThreeJS 地球上撒点使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
环境
- ThreeJS 107版本
- three.min.js
- OrbitControls.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
}
}
附上效果图
原文地址:https://www.cnblogs.com/giser-s/p/12928595.html
- 使用熔断器设计模式保护软件
- H2 Database入门
- 浅谈UE4引擎
- 无插件仅代码实现 WordPress 分页导航
- 冗余代码检查工具Simian
- “瑞波币”全套三拼域名被同买家收入囊中
- 人们可能会犯的7个数据错误
- java:POI导出excel
- WordPress自定义栏目运用实例III:添加原创/转载文章不同版权声明
- 另一个强大的Visualizers :Mole For Visual Studio
- WordPress自定义栏目运用实例V:为加密文章添加密码提示文字
- java基础:所有参数皆是按值参数
- 使用Hystrix提高系统可用性
- Spring Security笔记:解决CsrfFilter与Rest服务Post方式的矛盾
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 图论——Tarjan 初步 DFS序+时间戳+欧拉序
- POJ 1330 Nearest Common Ancestors(裸LCA)
- 数学--数论--广义欧拉降幂(模板)
- 图论--LCA--在线RMQ ST
- 微信小程序-基于高德地图API实现天气组件(动态效果)
- PG13 B-tree索引去重
- egg中 controller 调用controller如何实现
- CF思维联系– CodeForces -CodeForces - 992C Nastya and a Wardrobe(欧拉降幂+快速幂)
- 数学--数论--欧拉降幂--P5091 欧拉定理
- 重学巩固你的Vuejs知识(上)
- js原生模态登录框
- 客户决策 | 我的代码没有else
- LeetCode 1595 Minimum Cost to Connect Two Groups of Points (动态规划)
- js DOM系统
- css的radial-gradient大详解