rgb(Math.random()*255,Math.random()*255,Math.random()*255)
但是随机出来的颜色可能比较难看
Gio.js 是一个基于Three.js的web 3D地球数据可视化的开源组件库。使用Gio.js的网页应用开发者,可以快速地以申明的方式创建自定义的Web3D数据可视化模型,添加数据,并且将其作为一个组件整合到自己的应用中。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可视化地球,而且文档非常详细,更多实用和有趣的地方等待你的 探索 !
var center = {x:200,y:200}//中心坐标var r = 50//半径
//dg是角度
function cycle(dg){
var out = {}
var dis1 = Math.PI/180 //1度的计算参数
out.x = center.x + Math.cos(dis1 * dg)*r
out.y = center.y - Math.sin(dis1 * dg)*r
return out
}
for(var i = 0 , elem , cyc i <361 i = i +20){
cyc = cycle(i)
elem = document.createElement("div")
elem.setAttribute("style","position:absoluteleft:"+cyc.x+"pxtop:"+cyc.y+"px")
elem.innerText="字"
document.body.appendChild(elem)
}
具体代码实现在这里,原理就是通过临边斜边的函数来进行坐标计算
另外建议楼主问之前先自己多思考,才能得到提高