给网页一点空间感，不止是加一个 3D 模型

空间感并不只存在于 WebGL 场景里。透视、遮挡、光影和物体之间的相对尺度，已经能让一个普通页面有了前后关系。对于以文字为主的网站，先用最少的元素试出这种关系，通常比直接搭建复杂场景更合适。

先理解眼睛站在哪里

CSS 的 perspective 可以理解为观察者到屏幕的距离。数值越小，近大远小越明显；数值越大，画面越接近平行投影。把它放在父容器上，子元素就共享同一个观察空间。

下面的示例用三个面构成一个静态立方体。保存为 HTML 文件即可运行，不需要安装任何依赖。

<div class="scene" aria-hidden="true">
  <div class="cube">
    <i class="front"></i><i class="right"></i><i class="top"></i>
  </div>
</div>
<style>
  .scene {
    height: 280px; display: grid; place-items: center;
    perspective: 700px; background: #eef5fa;
  }
  .cube {
    position: relative; width: 120px; height: 120px;
    transform-style: preserve-3d;
    transform: rotateX(-25deg) rotateY(-35deg);
  }
  .cube i {
    position: absolute; inset: 0;
    border: 1px solid #7196b7;
    background: #b5d7ee99;
    box-sizing: border-box;
  }
  .front { transform: translateZ(60px); }
  .right { transform: rotateY(90deg) translateZ(60px); }
  .top { transform: rotateX(90deg) translateZ(60px); }
</style>

preserve-3d 保留了各个面的空间关系。每个面先旋转，再沿自身的 Z 轴移动半个边长，就会落到立方体的外侧。这里仅绘制当前角度能看到的三个面，适合固定视角的装饰。

有层次，不代表一直运动

一个静止的三维物体已经可以提供视觉焦点。持续旋转会不断拉走注意力，尤其当它紧挨长篇正文时。首页可以有一点轻微的漂浮，进入文章后则让画面安定下来。

指针视差也需要边界：移动幅度宜小，触屏应有稳定状态，减少动态效果的系统设置应被尊重。交互越轻，越应该让人觉得自然，而不是要求人专门发现它。

把复杂度花在值得的地方

如果只是一个简单的几何装饰，CSS 或 SVG 可能已经足够。需要真实材质、复杂模型、环境光照或场景交互时，再考虑 WebGL 渲染器。

同时准备加载前的占位和渲染失败后的静态替代，给画布限定合理尺寸，在页面不可见时暂停渲染。三维是页面的一个层次，不应成为读到正文的前置条件。