技术编程|利用JS实现浩瀚的太空群星图，围绕中心点转圈的璀璨行星
一、Dat.gui
首先 ， 在进入正题之前 ， 先给大家介绍一个十分好用的组件：Dat.gui
dat.gui.js是一个一个轻量级的图形用户界面库 ， 或者说GUI组件 ， 只有几十KB 。
可以用于创建操作控制三维场景的菜单栏 ， 比如渲染的时候通过鼠标调试光照参数 ，要比手动更改参数再刷新浏览器要快捷方便得多 。
看一下最简单的效果：
本文插图
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及其方法属性创建了一个交互界面 ， 控制立方体颜色、长度、旋转速度分别对应一个选项 ， 这三个选项又被归类到一个名为“菜单”的文件夹 ， 通过菜单文件夹可以展开关闭三个选项的界面 。
推荐阅读
- 摄像头|小米截胡中兴屏下摄像头技术，小米研发还是供应链技术？
- 马斯克|马斯克用活猪演示脑机接口技术：实时读取猪脑信息 心灵感应成真了
- 三防|带你了解三防手持终端的秘密
- 第三|原创 小米发布第三代屏下相机技术，或将在Mix 4上首秀？
- 海信|首个新兴显示技术分标委成立 海信牵头制定国标
- 中年|Python编程语言有什么独特的优势呢?
- |马斯克用活猪演示脑机技术，他希望今年年底前能在人体内植入
- 互联网的放大镜|小米截胡中兴屏下摄像头技术，小米研发还是供应链技术？
- 新机发布|原创 小米发布第三代屏下相机技术，或将在Mix 4上首秀？
- 技术|最新《中国禁止出口限制出口技术目录》发布，新增操作系统、密码芯片安全技术