音乐品小众佳作，开眼界玩有趣小网站。这是“小网站”系列的第 16篇，关注公众号接收更新，不迷路。

=== 今日介绍 ===

双投影积木 （Somebras）

把玩点：

• 炫酷的交互式3D设计；

• 独特的艺术表现形式；

• 双影锻炼空间想像能力；

• 看起来简单做起来难的技术典范；

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

把玩网址 sombras.app

=== 使用指北 ===

设想一下，有一束强光射向墙壁，如果在光与墙壁的中间放一个字母A，则墙上肯定是字母A的影子。

那如果再有另一束光，跟当前光线垂直90度从另一个方向射向字母A到另一面墙上，阴影是怎样的呢？

今天介绍的小网站就是玩这种双影游戏的，只不过物体换成了「像素积木块」。

展现在眼前的是一个三维空间，可以用鼠标或者手指在屏幕上移动、旋转场景。

一束青绿光、一束粉红光共二束光打在墙壁上，照亮三维空间中的一些方块，左边墙壁上出现「H.」字样,右边墙壁上出现「I.」字样，那组成左右两面墙壁阴影图案的方块是哪样的呢？如下图

屏幕下面有两个小屏，分别对应左右两面墙壁的阴影，点击「B」字样的按钮，输入「AB」两个字母，则网站自动生成对应的方块。

屏幕右边还有一排菜单，其功能分别是：

• Shoot Demo：撞击空间中的三维方块，让他们自由运动；

• More cubes：网站默认是用最少的方块生成阴影，用这个功能还能增加一些方块，但阴影不变；

• Edit Lights：改变两束光的颜色

• Share Design：分享自己的设计；

• Save Image：将当前场景保存为图片

• Download STL：将场景下载为STL格式的文件

功能就介绍完了，操作简单，快来发挥自己的空间想像力；

=== 干货知识 ===

纯技术性干货，非行业人士可忽略本节。

该网站又是一个看起来简单，实现起来技术复杂的网站，复杂点有以下几点：

1、在浏览器中三维空间与平面二维交互设计合理，互相影响；

2、阴影算法有一定的挑战；

3、空间场景可以导出与第三方程序交互；

三维实现采用的Three.js框架，网站提供的STL格式的场景导出（STL是由3D System公司于1988年制定的接口协议，是一种为快速原型制造技术服务的三维图形文件格式）应该是threejs的功能了。

STL文件在最新的Windows11系统中，有一个3D查看器，可以直接查看与预览STL文件，这为与其它工具交互提供了数据互通的可能性。

整个网站最主要JS程序已被加密混淆了，不过仔细看一下参数，a=7RRR7Z，b=NJNXNZ其实是与小空口的平面相对应的，作者自己实现的算法，比如a与b都为333333的情况是这样的。

感兴趣的读者可以继续深入研究。

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

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