![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ThreeJS
文章平均质量分 92
ThreeJS相关文章
guzicheng1990
这个作者很懒,什么都没留下…
展开
-
ThreeJS 查看版本号
最近项目中有需求,大屏上要造地球,所以又开始研究ThreeJS了网上看到一个地球的demo示例,就开始研究起来了,直接用的是示例中的已压缩的Three.min.js后续要在地球上扩展功能,需要继续学习,故想知道ThreeJS的版本方法很简单,用记事本打开Three.min.js查看源码,全文搜索’REVISION’...原创 2020-05-22 14:14:53 · 1851 阅读 · 0 评论 -
ThreeJS 跨域
环境ThreeJS 107版本three.min.js说明给地球贴图片材质时,发现报错图片跨域了。解决方案方案一网上找到方法修改threejs.module.js文件中的ImageLoader.prototype参考原文地址:https://blog.csdn.net/qq_41923622/article/details/103756549在return之前加上image.crossOrigin=’’方案二方案一是用源码的情形下,我这是直接用的压缩包three.mi.原创 2020-05-22 14:10:23 · 1808 阅读 · 0 评论 -
ThreeJS 移除group
环境ThreeJS 107版本three.min.jsOrbitControls.js说明z在地球上添加了各种功能(参加其他博文),我在添加的时候都创建了一个group,把所有的对象添加到group里,这样一方面减小了浏览器压力,另一方面方便组织数据,方便删除。后面迭代考虑定向删除(比如只删除点、只删除柱状图等)解决方案附上接口代码var allChildren = scene.children;for (var i = allChildren.length - 1; i >.原创 2020-05-21 14:11:47 · 2523 阅读 · 0 评论 -
ThreeJS 重刷地球配置
环境ThreeJS 107版本three.min.jsOrbitControls.js说明为满足地球在构造完成以后,需要调整配置(如转速、大小等),其实方法很简单,只要改完参数,重新render渲染即可。地球在创造的时候会不断的执行渲染(因为有自转功能),所以只需更改参数值即可。解决方案附上接口代码this.resetEarth = function (_newEarthOptions) {if (!_newEarthOptions) {_newEarthOptions = {.原创 2020-05-21 14:11:13 · 393 阅读 · 0 评论 -
ThreeJS 热力图
环境ThreeJS 107版本three.min.jsOrbitControls.jsheatmap.min.js说明地球上添加热力图的原理是先生成平面的热力图,绘制在canvas上,再将canvas作为材质贴到地球球体上。可以实现色带配置,以及辐射范围。解决方案创建球的过程参见"ThreeJS制作地球"创建热力图groupvar gHeatmap = new THREE.Group();使用heatmap.js库,创建heatmap对象var heatmap.原创 2020-05-21 14:10:12 · 2136 阅读 · 1 评论 -
ThreeJS 高亮地球
环境ThreeJS 107版本three.min.jsOrbitControls.js说明网上地球高亮和辉光的效果很多,这里用GLSL做(没学明白,网上东拼西凑拿来用了)。还有尝试过用Render渲染,但是render生成的canvas会覆盖整个浏览器窗口,把背景遮盖住。解决方案创建球的过程参见"ThreeJS制作地球"创建定点着色器和片元着色器var vertexShader = ['varying vec3 vNormal;','void main()','{'.原创 2020-05-21 14:08:49 · 915 阅读 · 0 评论 -
ThreeJS 地球上添加标注
环境ThreeJS 107版本three.min.jsOrbitControls.js说明添加标注的原理是利用在场景中添加canvas实现,要标注的文字绘制在canvas中。解决方案创建球的过程参见"ThreeJS制作地球"创建点group,考虑后面会做删除功能,所以把所有的实体都以group组为单位添加,后续方便做删除// 标记点组合var gLabel = new THREE.Group();获取canvas对应球坐标var average = getAv.原创 2020-05-21 14:08:03 · 7011 阅读 · 10 评论 -
ThreeJS 地球上撒点
环境ThreeJS 107版本three.min.jsOrbitControls.js说明撒点功能原理是在地球上根据坐标批量加上圆对象,可以设置颜色和球大小。解决方案创建球的过程参见"ThreeJS制作地球"创建点group,考虑后面会做删除功能,所以把所有的实体都以group组为单位添加,后续方便做删除// 标记点组合var marking = new THREE.Group();根据数据,循环添加圆以及材质for (var i = 0; i < _m.原创 2020-05-21 14:07:21 · 1201 阅读 · 2 评论 -
ThreeJS 地球添加柱状图
环境ThreeJS 107版本three.min.jsOrbitControls.js说明柱状图功能原理是在地球上加上圆柱对象,颜色和高度分别代表分类和值大小。解决方案创建球的过程参见"ThreeJS制作地球"创建柱子group,考虑后面会做删除功能,所以把所有的实体都以group组为单位添加,后续方便做删除// 标记点组合var columnGroup = new THREE.Group();根据数据,定义柱子颜色// 获取柱体值对应颜色var color.原创 2020-05-21 11:37:17 · 1595 阅读 · 0 评论 -
ThreeJS 地球添加迁徙图
环境ThreeJS 107版本three.min.jsOrbitControls.jsTHREE.MeshLine.js说明迁徙图参考了网上大大们的方法做的,但是效果不太理想,迁徙飞行效果原理是生成50个小球循环飞,数据量一大有点卡,需要优化。解决方案创建球的过程参见"ThreeJS制作地球"创建点位group,考虑后面会做删除功能,所以把所有的实体都以group组为单位添加,后续方便做删除// 标记点组合var marking = new THREE.Group().原创 2020-05-21 11:36:42 · 1768 阅读 · 4 评论 -
ThreeJS 制作地球
环境ThreeJS 107版本three.min.jsOrbitControls.js深空背景图片 大小4036*1808地球贴图 大小2048*1024 边幅以东西经180度为界限说明原本我们GIS使用的是cesiumJS开发的三维,但如果仅仅作为前端,大屏展示三维地球效果,cesiumJS显得过于厚重。故非强GIS功能,我们探索了ThreeJS。解决方案获取地球容器//获取地球容器dom = document.getElementById('divEarth');dom.原创 2020-05-21 11:34:47 · 3125 阅读 · 1 评论