技术编程|利用JS实现浩瀚的太空群星图，围绕中心点转圈的璀璨行星
一、Dat.gui
首先 ， 在进入正题之前 ， 先给大家介绍一个十分好用的组件：Dat.gui
dat.gui.js是一个一个轻量级的图形用户界面库 ， 或者说GUI组件 ， 只有几十KB 。
可以用于创建操作控制三维场景的菜单栏 ， 比如渲染的时候通过鼠标调试光照参数 ，要比手动更改参数再刷新浏览器要快捷方便得多 。
看一下最简单的效果：
【技术编程|利用JS实现浩瀚的太空群星图，围绕中心点转圈的璀璨行星】
本文插图
dat.gui
上述效果只用了简单的几句js代码进行了设置：
本文插图
js设置dat.gui
来看一看动态效果：
本文插图
dat.gui效果二、浩瀚星空
首先同样来看一下
效果：
本文插图
行星
本文插图
星空
自己动手看起来的效果比动图好看得太多 ， 大家可以将代码拿去 ， 自己试试 。
本文插图
图1
本文插图
图2
本文插图
图3
本文插图
图4
本文插图
图5
该动画使用了dat.gui.js ， 几乎所有的效果都是用js实现的 。
这里用到的HTML技术是canvas ， 所有的图像 ， 都在canvas上呈现 ， html页面上只有这么点内容：
本文插图
HTML
一个canvas ， 以及引入js的两个script 。
至于CSS代码 ， 也同样的没有几行 ， 甚至可以不需要css 。
重点是js 。
本文插图
js
如果你用过其它的Javascript组件或框架 ， 会学习到一些关于设计模式的知{!-- PGC_COLUMN --}
识 。
dat.gui.js基本思路是先创建一个对象 ， 也就是一个控件 ， 对象包含一系列的属性 ， 这些属性用来存储一系列的数据 。
本文插图
一方面dat.gui.js会根据控件对象的属性值类型 ， 来生成交互界面 ， 同时通过键鼠与可视化界面的交互 ， 可以实时动态改变控件中的数据 。
大家可以看到GUI界面与控件对象是相互影响的 ，控件对象的每一个属性会对应界面一个选项 ， 控件对象属性的属性值影响界面选项的显示效果 ， 界面选项可是可变控件对象属性的属性值 。
本文插图
使用 gui = new dat.GUI及其方法属性创建了一个交互界面 ， 控制立方体颜色、长度、旋转速度分别对应一个选项 ， 这三个选项又被归类到一个名为“菜单”的文件夹 ， 通过菜单文件夹可以展开关闭三个选项的界面 。
本文插图
通过add()方法创建一个菜单选项 ， 作为一个控制命令使用 ， 菜单选项的显示效果、交互方式与控件对象属性值的数据类型和参数设置有关 。
推荐阅读
- 小龙虾|三农探析：池塘养殖小龙虾如何高产？高产养殖技术全解析
- 大棚蔬菜|早春大棚蔬菜病虫害防治技术要点，老农讲得太实用了
- 松树|松烂皮病的发生规律和防治技术-松树枯梢病防治技术
- 中煤科工集团|中煤科工集团西安研究院研发煤层气（瓦斯）地面抽采新技术
- 航空航天|医学和航空航天跨专业碰撞，胡盛寿院士团队打破pVAD技术海外垄断
- 四川|解码四川科技丨打破国外垄断！这项技术每年救治上万名甲状腺癌患者
- 番茄|每平方米产量达到70公斤？五大技术特点解密荷兰的温室番茄高产原因！
- 芒果|村宝网-芒果抽穗期和开花期怎么管理，芒果开花期技术要点，要注意什么
- 人工智能|科学家利用人工智能改进假肢：可实现“自主行走”
- 智慧农业|物联网技术如何风驰智慧农业？