本文是“小网站”系列的第 5 篇。本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。

--- 今日介绍 ---

让我脉动 （Make me pulse）

把玩点：

• 适合休闲、无聊、发呆;
• 适合启迪创意，激发灵感;
• 技术上乘佳作，学习的样板;

网址    2017.makemepulse.com

主观评价：趣味性 4 星，技术性 4.5 星

--- 使用指北 ---

国外有这么一家“交互产品公司”——MakeMePulse简称MMP，办公室在法国巴黎与英国伦敦，号称是"全球互动制作工作室"(Global Interactive Production Studio)，就俩办公室就号称全球了，这水吹的...

当然吹水是人家的事儿，不过这公司在2016至2019年间，每到新年的时候都会做了一个带交互功能的动画网页，以表达对企业前景的畅想（不知道现在是不是因为疫情中断了！）。

以2017年的为例，口号是“伟大的想法是用来体验的（greate ideas are made to be experienced）”，这次介绍的“小网站”做的是3D风格，非常精美的，加载稍慢，交互设计的优秀范本，甚至还有些好玩。

做交互体验的，在手机上效果肯定是棒棒的，推荐你在手机上面进行体验（支持横屏喔）。打开“小网站”界面非常的朴素，在电脑上鼠标变成了圆圈，而手机上没有鼠标，靠滑动、长按、点击来实现。

像老式的iphone的解锁效果，向右滑动，开始体验

一共有五个交互体验场景把玩，分别是：

• 电灯泡

• 拍立得

• 漂浮的机器人

• 小灰机

• 喷气小火箭

每个场景都有一些特别细节的点值得品味，比如小灰机场景，灰机什么时候左边出现？什么时候右边出现？怎么控制飞行方向？一共可以放飞几架同时飞？飞机远近的安排......值得把玩一番。

小彩蛋：你看了2017年的网址，猜到其它年份的网址了么？

打开声音，配合着BGM，休闲的时候体验一下吧！

--- 干货知识 ---

本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。

分析了一下，发现还是有不少干货的，常规js、css、html不表，甚至图片素材、雪碧图、字体、mp3声音也不是什么难事，手机兼容性做的很细但也不消多说，还有些含“技”量的：

• 小的SVG动画;

• 大的Canvas-3D动画;

这也是主观性技术评分4.5的原因。

SVG动画按下不表，仅说Canvas-3D，前文介绍过（出门左转），网页世界的3D目前来看是WebGL的天下，也就是实现非three.js莫属，但这么精美的3D，且能精确元素控制，显然不是仅凭代码写得出来的。

看一下资源文件，发现有大量的.awd后缀的文件，其实这是使用三维软件制作的三维场景的二进制文件格式，three.js是可以加载这些场景文件的，加载到Canvas后模型是没有色彩的，而又没有发现素材图片，原来是开发人员将图片转换成了dds格式的纹理，图片转换成dds格式，占用磁盘会变大，但是转换成dds格式之后架加载到内存和显存的占用量会变小。

为了获得满意的拟真效果，一个dds还不行，得有NRM格式的、有DIFF格式的，还得有shadow格式的。等拼凑出了"真实"的场景、物体元素还是不得行，物体需要动起来啊。

用three.js控制物体动起来不难，难的是让物体呈像出模拟现实世界中物体动起来的样子，于是物理引擎就出现了。前面介绍过2D的物理引擎，而3D的物理引擎就是用来模拟现实世界里的重力、摩擦力、碰撞等过程，我们只要将飞机、火箭、地面...告诉物理引擎，至于它们之间是如何相互作用的，物理引擎会帮我们计算好一切。

该网页使用的物理引擎是cannon.js,它可以与three.js很好的结合一起使用，引擎包括简单的碰撞检测，各种体形，接触，摩擦和约束，非常轻量级，仅不到400KB，有兴趣研究的同学，可前往schteppe.github.io/cannon.js 深入。

且看，虽然是一个“小网站”，其需要产品构思、艺术设计、建模师、纹理设计师、三维程序员这么多角色且技艺精湛的人，协力配合，最后才能呈现出“完美的形态”。

本系列长期更新！首发于公众号：土卫六

喜欢的朋友，感谢点赞、分享、收藏三连！