技术编程利用JS实现浩瀚的太空群星图，围绕中心点转圈的璀璨行星
【技术编程利用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界面与控件对象是相互影响的 ，控件对象的每一个属性会对应界面一个选项 ， 控件对象属性的属性值影响界面选项的显示效果 ， 界面选项可是可变控件对象属性的属性值 。
推荐阅读
- 烹饪|锡纸烧烤技术，三款酱料配方是关键，制作好酱料锡纸类菜品轻松做
- 芯片|我国开始技术封锁！除量子密码以外，还有一项让美国憋屈十几年
- 上海嘉定|一项专利技术使车库车位增多10%，开发商们要坐不住了
- 上海市科学技术委员会|关于做好制订因公出国（境）培训中期规划的补充通知
- 闲情居|华为云手机发布，真正的5G手机，绕过光刻机的技术壁垒
- 一味宠爱|最全盘点卡中国脖子的35项技术，折射中国工业水平的真实现状
- 映璇汽车工作室|终于知道它为啥难卖了，看完长城WEY内部技术团队做的竞品分析
- Java|计算机专业的本科生，该选择学习Java技术体系还是.NET技术体系
- 人员|计划到期！立昂技术：部分董事、高管人员累计减持约47万股
- 南方PLUS|高新区面向全市征集30项以上技术需求，@佛山企业