听音乐听小众佳作，开眼界玩有趣小网站。这是“小网站”系列的第 10 篇，关注公众号接收更新，不迷路。
--- 今日介绍 ---
五彩斑斓的泡泡
把玩点：
- 小朋友喜欢的东西；
- 童趣最爱之一；
- 看起来简单做起来难的技术典范；
主观评价：趣味性 2.5 星，技术性 3.5 星
访问地址：
larsberg.github.io/_lsr/2017/2…
--- 使用指北 ---
儿时最喜欢吹泡泡，自己做肥皂泡水。
成年了也梦想着吹泡泡，那五彩斑斓的泡泡在一起，像是在梦中一般美妙。
看着看着，我自己也变成了其中一个泡泡，飞到天空，准备去开始一趟世界旅行。
今天的小网站“非常简单”，一个“炫技”的小网站，就是屏幕上出现一堆五彩斑斓的泡泡，要么它自己破，要么你用手指戳破...
--- 干货知识 ---
本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。
这又是一个看起来简单，技术实现起来超级复杂的小网站。
复杂是指这些泡泡，全部是用程序代码画出来、动起来、消失的，没有用到图片素材。
网页上就一个div元素，其余全部是JavaScript代码，先从基础往上说起：
- three.min.js、ThreeView.js 计算机web绘制3D的不二之选框架；
- OrbitControls.js是一个相当神奇的控件，与three结合使用，用它可以实现场景用鼠标、触摸交互，让场景动起来；
- startAudioContext.js与tone.min.js 进行音乐的控制；
- Tween.js 轨迹曲线控制；
- cannon.min.js 物理引擎,它可以与three.js很好的结合一起使用，引擎包括简单的碰撞检测，各种体形，接触，摩擦和约束，非常轻量级。
- bundle.js 包管理
- BufferGeometryUtils.js : 几何元素缓存工具
- zepto.min.js web前端框架，类似jQuery；
- shader ： 着色器，程序共有七个着色器定义程序；
真正开始工作的脚本是main.js，引用了一堆框架、组件，只为了画出几个逼真的泡泡，害！有一说一，没有三、五年的技术功底，貌似还真画不出这个泡泡。
本系列长期更新！首发公众号：土卫六
