拆解 Lusion：一家把 3D、动效与 Web 技术变成商业竞争力的创意工作室

发布于 2026年07月25日 22:00 #技术架构 #Three.js #商业模式原文链接

Lusion 的核心业务不是标准化建站，而是面向品牌和广告代理商提供高客单价、强定制的 3D 互动网站与数字 Campaign。
官网本身是一份可运行的销售 Demo，通过实时 3D、滚动叙事和复杂动效直接证明团队的创意与工程能力。
网站技术底座可概括为 Astro + React + Three.js + WebGL + GLSL，并通过 CDN 和对象存储承载大型图片、视频和 3D 资源。
复杂动效的关键不是堆叠动画库，而是建立统一的滚动进度、输入状态和 requestAnimationFrame 渲染循环。
普通 Web 团队最值得借鉴的是业务与技术对齐、内容与交互分层、性能预算前置以及高成本能力的平台化沉淀。

在传统 Web 项目中，网站通常承担信息展示、内容发布、用户转化或者业务操作等职责。

但打开 Lusion 官网会发现，它并不像一个普通企业网站。页面中大量使用实时 3D、滚动叙事、粒子动画、图像扭曲和沉浸式转场，整个网站更像一件运行在浏览器中的数字艺术作品。

如果只从视觉效果看，很容易把它理解为一个“炫技网站”。但进一步分析会发现，Lusion 的网站并不是脱离商业目标的技术 Demo，而是一套高度完整的获客系统：

通过网站直接展示团队的创意、设计、3D 制作和实时图形开发能力，从而吸引品牌客户和广告代理商购买高价值定制服务。

本文将从三个角度拆解 Lusion：

Lusion 的业务模式是什么；
网站背后的技术架构可能如何设计；
普通 Web 项目可以从中借鉴什么。

一、Lusion 是一家什么公司

Lusion 是一家英国数字创意制作工作室，主要为品牌、科技公司和广告代理商提供互动数字体验。

它提供的并不是标准化建站服务，而是围绕品牌传播和产品发布，完成从创意到最终技术交付的一整套工作。

其服务范围主要包括：

品牌官网和产品发布网站；
3D 互动网站；
数字营销 Campaign；
WebGL 实时视觉；
交互动画和动态图形；
3D 建模、动画与资产优化；
WebXR、AR、VR 和互动装置；
CG 影片和数字视觉内容。

从能力构成来看，Lusion 处于多个行业的交叉位置：

品牌设计公司
    +
广告创意公司
    +
3D 制作工作室
    +
Web 技术团队
    +
实时图形研发团队

这也是理解 Lusion 的关键。

它不是在设计完成后，再把设计稿交给传统前端团队进行还原，而是把创意、设计、动画、3D 和程序开发放在同一套生产流程中。

二、Lusion 的业务模式

1. 高度定制的 B2B 项目制服务

Lusion 的核心商业模式，可以概括为：

面向品牌客户和创意代理商，销售高客单价、强定制、强调传播效果的数字体验项目。

它不是 SaaS，也不是模板市场，没有标准化的产品套餐。每个项目都需要根据以下因素单独评估：

创意概念复杂度；
视觉设计工作量；
3D 资产数量；
动画和交互复杂度；
WebGL 场景规模；
音频和视频制作需求；
桌面端与移动端适配范围；
性能优化和浏览器兼容要求；
项目的发布时间和营销节点。

这类公司的收入来源通常是项目服务费，而不是用户订阅费。

客户购买的也不只是一个网站，而是一整套能力：

创意策略
    ↓
视觉设计
    ↓
3D 资产制作
    ↓
动画设计
    ↓
WebGL 实现
    ↓
前端工程
    ↓
性能优化
    ↓
上线交付

因此，Lusion 的直接竞争对手并不是普通外包公司，而是高端数字创意工作室、品牌设计公司和具备技术制作能力的广告代理商。

2. 官网本身就是销售产品

普通公司的官网负责介绍产品，Lusion 的官网则直接展示了它的生产能力。

潜在客户进入网站后，不需要阅读大量宣传文案，就可以直观判断：

团队能否完成高质量视觉设计；
是否具备实时 3D 开发能力；
是否理解动画节奏和交互体验；
能否处理复杂的数字资产；
设计和工程能否真正融合；
最终作品是否具有传播价值。

从这个角度看，Lusion 官网并不仅是企业介绍页面，更接近一份“可运行的技术标书”。

传统企业可能会在官网上写：

我们拥有领先的创意和技术能力。

而 Lusion 的方式是：

不解释，直接让用户体验。

这种方式对于创意服务公司尤其有效，因为客户最终购买的正是视觉品质和技术表现力。

3. 内部实验驱动品牌获客

Lusion 还会持续发布实验性项目，用于探索新的视觉风格、交互方式和实时图形技术。

这些内部项目未必直接产生收入，但可以发挥三个重要作用。

验证技术

通过内部项目，团队可以测试：

新的 Shader 效果；
不同的 3D 资产加载方式；
AI 与互动体验的结合；
新的滚动叙事形式；
浏览器端实时渲染的性能边界。

培养团队能力

客户项目通常受到预算、交付时间和品牌规范限制，而内部实验提供了更自由的技术环境。

团队可以借此积累：

图形算法；
3D Pipeline；
动效组件；
性能优化方案；
可复用的工程基础设施。

形成内容传播

高质量实验项目容易进入设计媒体、WebGL 社区和行业奖项，进一步形成品牌影响力。

它的获客路径可以概括为：

内部实验与技术研发
        ↓
形成高质量作品
        ↓
设计媒体和社区传播
        ↓
建立行业影响力
        ↓
品牌客户主动联系
        ↓
承接高价值商业项目
        ↓
继续沉淀技术与案例

因此，Lusion 的技术研发不是脱离业务的成本中心，而是销售和品牌体系的一部分。

三、Lusion 网站的技术架构

从公开技术检测、官网表现和团队公开分享来看，Lusion 官网的主要技术组合可以概括为：

Astro
+ React
+ Three.js
+ WebGL
+ GLSL Shader
+ Netlify
+ 对象存储与 CDN

需要说明的是，其中 Astro、React、Three.js、WebGL 和 Netlify 等技术有较强的公开依据；更具体的状态管理、滚动库、后处理方案和 3D 压缩工具，则可能因项目版本不同而变化。

1. Astro：负责内容、路由和静态页面

Lusion 官网虽然视觉复杂，但本质上仍然是一个作品集和企业内容网站。

它包含：

首页；
About 页面；
项目列表；
项目详情；
服务介绍；
联系方式；
大量项目标题和描述文本。

这类内容非常适合使用 Astro 进行静态生成。

Astro 可以在构建阶段直接生成 HTML，使项目名称、介绍和服务内容能够被搜索引擎读取，同时减少浏览器必须执行的 JavaScript 数量。

它比较适合承担以下职责：

Astro
├── 页面路由
├── 静态 HTML 生成
├── SEO 元数据
├── 项目内容组织
├── 图片和资源引用
├── React 组件集成
└── 构建与部署

如果整个网站都使用纯 React SPA 实现，页面可能需要等待大量 JavaScript 下载和执行后才能完整显示。

Astro 则允许网站先输出基础内容，再按需加载交互功能。

2. React：承担交互组件和运行时状态

Astro 负责内容外壳，React 则更适合管理需要运行时交互的部分，例如：

导航菜单；
自定义鼠标指针；
页面加载动画；
项目切换状态；
媒体播放控制；
页面转场；
交互按钮；
WebGL 场景的控制面板。

一种可能的页面结构如下：

<Layout>
  <Header />
  <ProjectContent />

  <InteractiveNavigation client:load />
  <WebGLExperience client:only="react" />
</Layout>

这体现了 Astro Islands 架构的核心思路：

静态内容保持静态，只有真正需要交互的区域才在浏览器中运行 JavaScript。

对于同时要求 SEO、内容加载速度和复杂交互的网站，这种架构比完整 SPA 更灵活。

3. Three.js 与 WebGL：负责实时视觉

Lusion 最具识别度的部分来自 Three.js 和 WebGL。

Three.js 是建立在 WebGL 之上的 JavaScript 3D 图形库，它简化了浏览器中操作以下对象的过程：

Scene；
Camera；
Mesh；
Geometry；
Material；
Texture；
Light；
Render Target；
Post-processing。

一个基础 Three.js 场景通常包含：

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  100
);

const renderer = new THREE.WebGLRenderer({
  canvas,
  antialias: true,
  alpha: true
});

renderer.render(scene, camera);

但 Lusion 的效果显然不止是加载模型和旋转相机。

它的真正技术门槛主要体现在：

自定义 Shader；
DOM 与 WebGL 坐标同步；
滚动驱动动画；
图像纹理变形；
粒子和程序化几何；
页面转场；
实时后处理；
大型 3D 资产性能优化。

4. GLSL Shader：实现普通 CSS 无法完成的效果

Lusion 网站中很多效果并不适合通过 CSS 实现，例如：

图片液化；
波纹和流体扭曲；
几何体表面形变；
噪声动画；
纹理融合；
玻璃折射；
粒子扰动；
深度和光照变化。

这些效果通常需要通过 GLSL Shader 在 GPU 中运行。

一个简化的顶点形变逻辑可能类似：

vec3 transformed = position;

float displacement = sin(position.x * 3.0 + uTime);
transformed.z += displacement * uProgress;

这里的变量可能分别表示：

uTime：动画时间；
uProgress：滚动或转场进度；
uMouse：鼠标位置；
uVelocity：鼠标移动速度；
uResolution：屏幕分辨率；
uTexture：图片或视频纹理。

与在 JavaScript 中逐个修改大量 DOM 元素相比，Shader 可以让大量像素和顶点并行运行，更适合实现高密度实时视觉效果。

四、滚动是如何驱动整个动画系统的

Lusion 这类网站通常不会简单监听滚动事件，然后直接修改元素位置。

更合理的方式，是把滚动位置转换成一个统一的归一化进度。

const progress = clamp(
  (scrollY - sectionStart) / sectionLength,
  0,
  1
);

这样，当前区域的滚动状态始终可以用 0～1 表示：

0：动画尚未开始；
0.5：动画进行到一半；
1：动画已经完成。

随后，所有视觉系统都可以订阅这个进度。

camera.position.z = lerp(8, 3, progress);

mesh.rotation.y = lerp(0, Math.PI, progress);

material.uniforms.uProgress.value = progress;

title.style.opacity = 1 - progress;

最终形成一个统一的动画架构：

滚轮、触摸输入
       ↓
目标滚动位置
       ↓
阻尼和平滑插值
       ↓
归一化进度 Progress
       ↓
┌──────┼────────┬─────────┬─────────┐
↓      ↓        ↓         ↓         ↓
DOM   Camera   Mesh      Shader    Audio

这种方式有几个明显优势。

动画天然可逆

用户向下滚动时进度增加，向上滚动时进度减少，不需要单独编写反向动画。

DOM 与 WebGL 可以同步

同一个进度值可以同时控制文字透明度、相机位置和 Shader 参数。

不依赖固定播放时间

动画不再以“播放两秒”为核心，而是由用户的滚动行为决定。

方便划分动画区间

可以使用不同区间控制不同阶段：

const introProgress = range(progress, 0.0, 0.3);
const modelProgress = range(progress, 0.2, 0.7);
const exitProgress = range(progress, 0.7, 1.0);

这类“状态驱动动画”非常值得普通 Web 动效项目借鉴。

五、DOM 与 WebGL 如何组合

Lusion 的页面虽然看起来像完整的 3D 场景，但其中的正文、导航和链接通常仍然由 HTML DOM 提供。

常见结构是把 Canvas 和 DOM 分层叠加：

<body>
  <canvas class="webgl-layer"></canvas>

  <main class="content-layer">
    <section class="project">...</section>
    <section class="project">...</section>
  </main>
</body>

其中 WebGL 层负责：

3D 模型；
粒子效果；
图片扭曲；
Shader 动画；
场景光照；
后处理。

DOM 层负责：

标题；
正文；
按钮；
链接；
导航；
可访问性；
SEO 内容。

部分图片可能只在 DOM 中保留占位区域，真正的图片则作为纹理绘制到 Canvas 中。

程序每一帧读取 DOM 元素位置：

const rect = element.getBoundingClientRect();

再将 WebGL 平面同步到对应的屏幕坐标：

mesh.position.x = screenToWorldX(rect.left);
mesh.position.y = screenToWorldY(rect.top);

mesh.scale.set(
  rect.width,
  rect.height,
  1
);

这样做可以同时获得两方面能力：

使用正常 HTML 进行页面排版；
使用 WebGL 对图片进行实时变形和渲染。

它也是很多创意网站实现“看起来像 DOM 图片，但又能发生复杂 Shader 变化”的核心方法。

六、3D 资产生产管线

Lusion 的技术门槛不仅来自前端代码，还来自浏览器之外的 3D 内容生产流程。

一个高质量 3D 模型通常无法直接放进网页。

影视级模型可能包含：

数百万个面；
多张 4K 或 8K 纹理；
复杂材质节点；
高成本光照；
大量骨骼动画；
浏览器不支持的渲染特性。

因此，需要建立完整的资产优化管线：

Houdini / Blender / Cinema 4D
              ↓
建模、动画、程序化生成
              ↓
减面、UV、材质整理
              ↓
光照和细节烘焙
              ↓
导出 glTF / GLB
              ↓
几何与纹理压缩
              ↓
Three.js 加载
              ↓
WebGL 实时渲染

常见优化手段包括：

降低多边形数量；
合并材质；
减少 Draw Call；
使用 Instanced Mesh；
使用 Draco 或 Meshopt 压缩几何；
使用 KTX2 或 Basis 压缩纹理；
根据设备加载不同质量的资产；
降低移动端粒子数量；
动态调整 Device Pixel Ratio；
延迟加载不可见场景；
在页面切换时复用 WebGL Context。

这说明 Lusion 的核心竞争力并不是某个前端框架，而是从 3D 内容生产到浏览器运行时的完整工程能力。

七、一个可能的整体架构

结合网站的内容属性和视觉特征，其整体架构可以抽象为：

┌───────────────────────────────────────┐
│              Astro 页面层             │
│                                       │
│ 路由 / SEO / HTML / 项目内容 / 元数据 │
└──────────────────┬────────────────────┘
                   │
             局部 Hydration
                   │
┌──────────────────▼────────────────────┐
│              React 交互层             │
│                                       │
│ 菜单 / Loader / Cursor / 页面状态     │
│ 媒体控制 / 页面转场 / 交互组件        │
└──────────────────┬────────────────────┘
                   │
             全局交互状态
                   │
┌──────────────────▼────────────────────┐
│          Three.js / WebGL 渲染层       │
│                                       │
│ Scene / Camera / Mesh / Texture       │
│ Shader / Particle / Post-processing   │
└──────────────────┬────────────────────┘
                   │
┌──────────────────▼────────────────────┐
│             资源与部署层              │
│                                       │
│ Netlify / CDN / 对象存储              │
│ 图片 / 视频 / GLB / 纹理 / 音频       │
└───────────────────────────────────────┘

在状态层面，还需要一个独立的渲染循环：

Pointer / Touch / Scroll
           ↓
      Input Manager
           ↓
       Global State
           ↓
     requestAnimationFrame
           ↓
┌──────────┼──────────┬──────────┐
↓          ↓          ↓          ↓
DOM       Camera     Shader      Audio

这套架构的核心不是“页面上有多少动画”，而是：

是否建立了一个统一、可预测、可同步的动画状态系统。

八、Web 开发可以借鉴什么

Lusion 的视觉效果不适合所有项目，但它背后的很多工程思想具有普遍价值。

1. 让技术架构服从业务目标

Lusion 使用大量 3D 和动画，是因为它的客户正在购买创意、设计和实时图形能力。

因此，复杂视觉本身就是它的销售内容。

普通项目不应该因为 Three.js 很酷，就强行增加 3D 场景。应该先判断：

动画能否帮助用户理解产品；
是否可以增强品牌记忆；
是否可以提高转化；
是否与业务定位一致；
是否值得承担性能和维护成本。

技术复杂度必须能够对应明确的业务价值。

2. 把官网当成产品，而不是宣传册

很多企业官网只是多个静态页面的集合，长期缺少迭代。

Lusion 的做法说明，官网也可以作为一个持续维护的产品：

有明确用户；
有转化目标；
有品牌定位；
有性能指标；
有内容策略；
有交互体验；
有长期技术演进。

对于技术公司而言，官网甚至可以成为展示工程能力、设计能力和产品判断力的重要入口。

3. 内容层与交互层分离

Lusion 可能采用的 Astro 与 React 组合，体现了一个很重要的架构原则：

不是所有页面都应该变成 SPA，也不是所有组件都需要 Hydration。

普通内容网站可以将系统拆成：

静态内容层
    +
局部交互层
    +
重型视觉层

其中：

文章、项目介绍和 SEO 内容使用静态 HTML；
菜单、筛选和表单使用普通 React 组件；
只有真正需要的区域才加载 Canvas 和 WebGL。

这比把所有内容都塞进一个大型前端运行时更容易控制性能。

4. 建立统一的动画状态

很多项目中的动画逻辑分散在不同组件：

一个组件监听 scroll；
一个组件监听 mousemove；
一个组件执行 GSAP Timeline；
另一个组件自己调用 requestAnimationFrame。

最终容易出现状态冲突、动画不同步和性能问题。

更合理的做法是建立统一的动画状态：

const frameState = {
  time,
  deltaTime,
  scroll,
  smoothScroll,
  velocity,
  pointer,
  viewport,
  pageProgress
};

每个动画模块只读取状态，而不是分别管理浏览器事件。

这种架构同样适用于普通 Web 页面中的：

滚动视差；
数字增长动画；
页面转场；
视频播放控制；
Canvas 图表；
复杂动效组件。

5. 将高成本能力沉淀为基础设施

高质量视觉项目如果每次都从零开始，成本会非常高。

可以逐步沉淀：

Loader 系统；
平滑滚动模块；
页面转场状态机；
Canvas 生命周期管理；
资源预加载器；
Shader 公共库；
响应式质量等级；
性能监控；
3D 资产校验脚本；
浏览器兼容降级方案。

Lusion 的长期竞争力，很可能不只是团队会写 Three.js，而是已经形成了一套自己的 Creative Development 基础设施。

6. 性能应该进入设计阶段

在普通项目中，性能优化经常发生在开发完成之后。

但对于 WebGL 和 3D 项目，性能必须在设计和资产制作阶段介入。

例如：

一个场景应该出现多少模型；
是否必须使用透明材质；
是否需要实时阴影；
视频是否可以替代实时渲染；
移动端是否需要完整效果；
纹理最大尺寸是多少；
是否允许加载几十 MB 资源；
低端设备如何降级。

这些决策不是单纯的代码优化，而是产品、设计、3D 和工程共同完成的技术预算管理。

九、不应该盲目模仿的部分

Lusion 的体验非常优秀，但并不意味着所有网站都应该采用相同方案。

以下类型的网站通常不适合大规模使用类似交互：

企业管理后台；
CMS；
电商结算流程；
金融交易页面；
文档网站；
高频操作型工具；
信息密度较高的数据产品。

这些系统的核心目标通常是：

操作效率；
信息可读性；
稳定性；
可访问性；
低学习成本。

如果在此类产品中加入过多转场、滚动劫持和自定义交互，反而会降低体验。

即便是营销网站，也需要注意以下问题：

首屏加载时间；
低端设备卡顿；
移动端发热和耗电；
键盘操作；
屏幕阅读器；
prefers-reduced-motion；
页面滚动习惯；
浏览器兼容性；
内容是否被视觉掩盖。

真正值得学习的不是“把页面做得更炫”，而是：

根据业务目标，选择合适的体验强度，并用工程化方式控制复杂度。

十、总结

Lusion 表面上是一家擅长制作 3D 互动网站的创意工作室，实际上它构建了一套非常完整的商业和技术体系。

在业务层面，它通过高质量官网、案例和内部实验展示能力，吸引品牌客户购买定制化数字体验服务。

在技术层面，它可能采用如下组合：

Astro
+ React
+ Three.js
+ WebGL
+ GLSL
+ CDN 与对象存储

但真正难以复制的并不是这些框架，而是它们背后的综合能力：

创意策略
+ 视觉设计
+ Motion Design
+ 3D 资产制作
+ 图形数学
+ Shader 开发
+ 动画状态管理
+ 性能工程
+ 长期内部研发

对于普通 Web 团队来说，Lusion 最值得借鉴的不是具体视觉风格，而是以下几个原则：

技术必须服务于明确的业务定位；
官网可以成为真正的产品和销售工具；
静态内容、交互组件和重型渲染应该分层；
复杂动画需要统一的状态和渲染循环；
性能优化必须从设计与资产阶段开始；
高成本技术能力要逐步沉淀为可复用基础设施。

最终，Lusion 展示的是一种不同于传统 Web 业务开发的工程方向：

将电影级视觉、游戏式实时渲染和现代前端工程结合起来，让浏览器成为品牌叙事和数字体验的运行平台。