打开 basement.studio 的官网，你的第一反应不会是"这是一个网站"，而是"我进了一个游戏"。

黑色的低多边形空间里，像素粒子缓慢漂浮，墙壁由白色线框勾勒——这是一间被搬进浏览器的"地下室"（basement 即地下室）。没有传统的首屏 Banner，没有滚动的营销文案，你直接站在一个 3D 空间里，用鼠标拖动视角去探索这个工作室的每一个角落。

这个官网"不务正业"在哪

传统的公司官网，本质是信息陈列：首屏讲清业务、中间罗列案例、底部放联系方式。basement.studio 反其道而行——它的官网是一座品牌体验装置。

你能在里面做的不是"阅读"，而是"探索"：拖动鼠标转动视角，在线框搭成的楼梯间穿梭，看粒子光点在黑暗里缓慢漂移。导航栏极简到只有 Home / Services / Showcase / People / Blog / Lab，连 logo 都低调地缩在左上角一个 basement.。

这种设计的潜台词是：我们是做体验设计的，官网本身就是最好的作品。不需要用文字说服你"我们很有创意"，让你亲手在这个 3D 空间里转一圈，说服力胜过千言万语。

技术上怎么做到的

basement.studio 官网的核心是 WebGL（网页 3D 渲染技术），通过浏览器的 GPU 加速能力直接渲染 3D 场景，不需要任何插件。

几个关键的技术决策：

• 线框渲染：3D 模型只渲染边缘线条而不填充表面，既降低了渲染性能开销，又形成了独特的"蓝图感"视觉风格——像建筑图纸，也像游戏《纪念碑谷》的美学
• 粒子系统：空间中漂浮的光点是典型的粒子系统，用 GPU 并行计算上千个粒子的位置和运动，营造出数字世界的"空气感"
• 第一人称视角：用 Pointer Lock API 捕获鼠标移动，把鼠标位移映射为相机旋转，让用户产生"我在这个空间里走动"的沉浸感

这套技术栈的核心库通常是 Three.js（JavaScript 的 WebGL 封装库），配合自定义的 shader（着色器）实现线框材质和粒子效果。

品牌逻辑的闭环

basement.studio 是一家做品牌体验和数字产品设计的工作室，客户包括 Vercel、KidSuper 这类科技公司。它的官网设计逻辑非常自洽：

我们卖的是"数字体验设计"，那我们的官网就必须是最极致的数字体验。

从首页的 3D 空间一路向下滚动，你会看到 Featured Projects 的项目列表——Vercel Ship、Daylight、KidSuper——每个项目配有极简的黑白缩略图和一句话描述。这种"3D 沉浸 + 极简列表"的对比节奏很有讲究：先用视觉冲击抓住你，再用克制的信息密度让你快速理解他们的能力范围。

我们能学到什么

对于做网站开发的人来说，basement.studio 的官网给了三个启发：

1. 官网可以是产品本身。 如果你做的是体验相关的工作（设计/开发/营销），官网不应该只是介绍页，而应该是能力的现场演示。

2. 技术要为品牌叙事服务。 WebGL、粒子系统、3D 空间——这些技术不是为了炫技，而是为了传递"我们是数字世界的建造者"这个信息。技术选型必须服务于品牌故事。

3. 少即是多。 整个官网的文字内容加起来可能不超过 500 字，但信息传递效率极高。在信息过载的时代，克制反而成了稀缺品。

页脚同样克制：一个邮件订阅输入框（“Roll Me In →"）、一组站点地图链接、一排社交媒体图标。没有冗长的公司介绍，没有堆叠的联系方式——和整个官网的调性保持高度一致。

basement.studio 的官网证明了一件事：一个好官网不需要"看起来很贵”，但需要"让人记住"。当用户在几百个工作室的官网里转了一圈之后，能留在记忆里的，往往就是那个让他拖动鼠标在 3D 空间里逛了一分钟的网站。

复刻提示词：让 AI 帮你做一个同款官网

想把这套 3D 空间官网用在自己的项目上？把下面这段提示词丢给 Claude / v0 / Cursor，直接生成可运行的初版：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

用 Three.js (r160+, ES Module) 做一个"线框+粒子"风格的沉浸式官网，要求：

1. 场景：一个低多边形风格的虚拟空间（仓库/工作室内部），
   所有 3D 物体用 WireframeGeometry 线框材质渲染，只描边不填充，线色 #ffffff，透明度 0.35
2. 粒子系统：3000+ 个小方块粒子（Points + BufferGeometry），
   在空间内缓慢漂浮，亮度随机分布在 0.2-0.8，靠近光源区域的粒子用暖橙色 #ff8c42
3. 相机：PerspectiveCamera + PointerLockControls，
   鼠标拖动控制视角（yaw/pitch 阻尼 0.08），滚轮前后移动，不做 WASD（降低使用门槛）
4. UI 层：3D 画布之上叠 HTML 导航栏——左上 logo、居中菜单
   (Home/Services/Showcase/People/Blog)、右上 Contact Us 按钮，
   字体 Inter，导航背景 rgba(0,0,0,0.4) + backdrop-filter: blur(8px)
5. 光照：环境光 0.15 + 一个 PointLight 暖橙色在空间深处，营造"黑暗中被吸引"的视觉焦点
6. 性能：pixelRatio 上限 2，粒子用单个 draw call，移动端降级到 800 粒子
7. 首屏加载：显示线框 logo 动画直到 Three.js 场景 ready，避免白屏

技术栈：Vite + Three.js + 原生 JS，不用框架。代码分场景初始化/粒子系统/控制器/UI 四个模块。

复刻要点：线框+粒子的组合成本极低（不需要建模），但视觉记忆度直逼 3A 游戏开场。真正花时间的反而是相机阻尼手感和 UI 层的毛玻璃质感——这两个细节决定"廉价 demo"和"作品"的差距。

本文基于对 basement.studio 官网录屏的逐帧分析，收录于凌序科技「网站赏析」系列。我们专注网站开发，擅长把创意和技术落地为高性能的现代官网。