今天无意间发现一个可以制作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，从该链接中获取测试数据: https://github.com/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>
效果图
上述代码效果图
来张动态的
加了点抖音的效果
网友评论