Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者，可以快速地以申明的方式创建自定义的Web3D数据可视化模型，添加数据，并且将其作为一个组件整合到自己的应用中。
这个库的开发是受到Google 2012 Info大会上的某项目可视化的启发，该项目开发者是Google员工Michael Chang。使用Gio.js就可以快速构建这种炫酷的3D模型，并以此为基础进行深入地开发。
在HTML的<head>中引入Three.js和Gio.js依赖， 以下展示了如何使用<script>标签引入依赖:
在引入Three.js和Gio.js在页面之后，已经可以创建3D Gio地球了。在此我们将先展示如何创建基础样式的Gio地球。
创建一个<p>，Gio地球将会被渲染在这个区域中：
添加一下4行Javascript代码在你的HTML中， 用以创建并渲染：
在Gio.js 1.0发布之后，开发者们提出了很多很酷的、很有建设性的建议，比如微信应用开发者希望Gio.js支持微信小程序，有经验的Three.js开发者希望Gio.js提供Three.js编程接口等。在经过仔细研究、综合设计之后，Gio.js 2.0实现了大部分功能，并且添加了有关文档说明。以下列出了主要的2.0新增特性：
Gio.js仅依赖于Three.js。
经过测试，Gio.js在Three.js R90版本下可以很好地运行和使用。
Gio.js可以运行在以下的浏览器环境中:
更多详细的介绍就不在本文中介绍了，官方文档非常详细，感兴趣的小伙伴可以直接移步文档：
Gio.js可以说是Three.js中实践的非常不错的了，官方还提供了非常多的实例，通过一些简单的API配置即可实现非常炫酷的Web3D可视化地球，而且文档非常详细，更多实用和有趣的地方等待你的 探索 ！
今天研究的是利用HTML5的Canvas画图来模拟太阳系运转，首先，在这个太阳系里分为画轨道和画星球两个部分，对于每一个星球我们要知道它的颜色和公转周期，如下图。
采用面向对象编程的思想，代码如下
stars.html
[html] view plain copy
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000">
你的浏览器不支持canvas标签！
</canvas>
<script src="stars.js">
</script>
</body>
</html>
stars.js
[javascript] view plain copy
/******************************************/
/**/
/* 本节代码体现了用JavaScript编写面向对 */
/* 象程序的思想，希望能认真阅读理解。 */
/**/
/******************************************/
//设置2d绘图环境
var ctx = document.getElementById("canvas").getContext("2d")
//画轨道
function drawTrack(){
for(var i = 0i <8i++){
ctx.beginPath()
ctx.arc(500, 500, (i + 1) * 50, 0, 360, false)
ctx.closePath()
ctx.strokeStyle = "#fff"
ctx.stroke()
}
}
//画星球的类
function Star(x, y, radius, cycle, sColor, eColor){
//设置星球类的属性
this.x = x//星球的坐标点
this.y = y
this.radius = radius //星球的半径
this.cycle = cycle//设置周期
this.sColor = sColor //星球的颜色，起始颜色和结束颜色
this.eColor = eColor
this.color = null
//设置一个计时器
this.time = 0
//给星球类定义一个方法
this.draw = function(){
ctx.save() //保存之前的内容
ctx.translate(500, 500) //重置0，0坐标
ctx.rotate(this.time * (360 / this.cycle) * Math.PI / 180) //旋转角度
//画星球
ctx.beginPath()
ctx.arc(this.x, this.y, this.radius, 0, 360, false)
ctx.closePath()
//设置星球的填充颜色
this.color = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius)
this.color.addColorStop(0, this.sColor)
this.color.addColorStop(1, this.eColor)
ctx.fillStyle = this.color
ctx.fill()
//恢复之前画布的内容
ctx.restore()
this.time += 1
}
}
//创建一个太阳的构造函数
function Sun(){
Star.call(this, 0, 0, 20, 0, "#FFFF00", "#FF9900")
}
//创建一个水星的构造函数
function Mercury(){
Star.call(this, 0, -50, 10, 87.70, "#A69697", "#5C3E40")
}
//创建一个金星的构造函数
function Venus(){
Star.call(this, 0, -100, 10, 224.701, "#C4BBAC", "#1F1315")
}
//创建一个地球的构造函数
function Earth(){
Star.call(this, 0, -150, 10, 365.2422, "#78B1E8", "#050C12")
}
//创建一个火星的构造函数
function Mars(){
Star.call(this, 0, -200, 10, 686.98, "#CEC9B6", "#76422D")
}
//创建一个木星的构造函数
function Jupiter(){
Star.call(this, 0, -250, 10, 4332.589, "#C0A48E", "#322222")
}
//创建一个土星的构造函数
function Saturn(){
Star.call(this, 0, -300, 10, 10759.5, "#F7F9E3", "#5C4533")
}
//创建一个天王星的构造函数
function Uranus(){
Star.call(this, 0, -350, 10, 30799.095, "#A7E1E5", "#19243A")
}
//创建一个海王星的构造函数
function Neptune(){
Star.call(this, 0, -400, 10, 60152, "#0661B2", "#1E3B73")
}
var sun = new Sun()
var mercury = new Mercury()
var venus = new Venus()
var earth = new Earth()
var mars = new Mars()
var jupiter = new Jupiter()
var saturn = new Saturn()
var uranus = new Uranus()
var neptune = new Neptune()
function Move(){
ctx.clearRect(0, 0, 1000, 1000)
drawTrack()
sun.draw()
mercury.draw()
venus.draw()
earth.draw()
mars.draw()
jupiter.draw()
saturn.draw()
uranus.draw()
neptune.draw()
}
setInterval(Move,10)
