Gio.js | 带你做一个酷炫的3D地球去装逼
今天无意间发现一个可以制作3D地球的开源组件库 Gio.js，看着效果很酷炫，于是自己动手去实验一下。Gio.js 是基于Three.js的web3D地球数据可视化的开源组件库，仅使用4行Javascript就可创立3D地球数据可视化模型。[1]
直接上代码[2]
<!DOCTYPE HTML><html><head><meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" /><script src="three.min.js"></script><script src="gio.min.js"></script><title>3d-earth</title></head><body> <!-- 创立一个div座位Gio的绘制容器 --> <div id="globalArea" style="height:500px;"></div> <script> // 取得用来来承载您的IO地球的容器 var container = document.getElementById( "globalArea" ); // 创立Gio控制器 var controller = new GIO.Controller( container ); /** * 增加数据 * 理解更多有关Gio.js数据格式，查看文档：http://giojs.org/html/docs/dataIntro_zh.html * 我们提供了测试数据以供快速上手Gio.js，从该链接中获取测试数据: syt123450/giojs/blob/master/examples/data/sampleData.json */ var data = [ { "e": "CN", "i": "US", "v": 3300000 }, { "e": "CN", "i": "RU", "v": 10000 }, { "e": "RU", "i": "US", "v": 3123 }, { "e": "FR", "i": "CN", "v": 2 }, { "e": "US", "i": "FR", "v": 5 }]; controller.addData( data ); // 初始化并渲染地球 controller.init();</script></body></html>效果图
上述代码效果图
来张动态的
加了点抖音的效果
Gio.js中文官网 ?
https://giojs.org/html/docs/startFirst_zh.html ?
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Gio.js | 带你做一个酷炫的3D地球去装逼
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » Gio.js | 带你做一个酷炫的3D地球去装逼
