你在网上看一双鞋。商店给你一张正面照和一张侧面照。你放大试图看清皮革的纹理,但图像变成了像素马赛克。你翻到下一张照片。还是同一双鞋,只是换了个脚。看了十张照片后,你还是无法判断鞋底是硬的还是软的,或者颜色是真正的藏青色还是褪色的黑色。结账时,你犹豫了。然后你关掉了标签页。

这种情况每天都在发生数百万次。扁平的图像要求客户通过脑补来完成对真实物体的想象。这种工作产生了摩擦,而摩擦会扼杀购买欲望。

现在想象另一个标签页。同一双鞋作为 3D 模型直接加载在页面中。你可以点击并拖动来旋转它。你放大观察,几何形状依然清晰,因为你看到的是网格(mesh),而不是拉伸后的位图(bitmap)。你可以实时切换配色。你可以从底部检查后跟处的缝线,这是一个产品摄影师都不屑于拍摄的角度。物体在屏幕上的呈现方式,就像它在空间中的存在方式一样。你把它加入购物车,因为你感觉自己已经触摸过它了。

产品本身没有任何变化。改变的只是体验。

为什么是浏览器?

直到最近,这种交互还需要专门的应用程序或大多数用户拒绝安装的插件。Three.js 改变了这一点。它是一个 JavaScript 库,构建在浏览器内置的 WebGL 渲染器之上,让开发者可以使用驱动网页其余部分的相同代码来构建 3D 场景。用户不需要下载特殊软件。没有独立的窗口,没有可执行文件,没有权限对话框。Canvas 的渲染就像任何其他 HTML 元素一样。

这很重要,因为可访问性决定了普及程度。如果客户可以在通勤途中、在旧笔记本电脑上,或者在被 IT 部门锁定的公司台式机上查看 3D 产品,这项技术才能真正触达人们。Three.js 将浏览器变成了一个通用的视口(viewport)。

3D 何时物有所值

添加三维图形并非没有代价。它需要开发时间、性能预算,通常还需要资产本身的制作预算。只有当回报是真实的时候,你才应该支付这些成本。关于 Web 3D 的四个常见论点,每一个都值得比简单的要点更深入的探讨。

更高的参与度听起来像是一个营销指标,但它有一个机械性的原因。当访问者可以与场景进行交互——旋转、缩放、触发动画——他们就在生成自己的内容。他们不再是被动地接受推销,而是在探索。这种主动状态让他们在页面停留更久,因为他们对模型还有“未竟之事”。他们想看背面,想看内部。这种交互创造了静态网格无法复制的好奇心循环。

更好的理解在电子商务中最为明显。以二维形式列出的沙发迫使购物者从规格表中读取尺寸,并从阴影中想象深度。3D 模型让他们可以绕着家具旋转,观察扶手的锥度。他们可以使用基于同一 Three.js 场景构建的增强现实(AR)将其放置在房间里,无需拿出卷尺即可检查窗户下的空间是否足够。当客户从各个角度观察产品时,他们会更有信心地做出决定。

叙事能力超越了产品本身。制造商可以展示发动机如何进行燃烧循环,而无需寄送实物演示模型。建筑师可以在地基浇筑之前,带领客户查看平面图。运动解释了文字和静态帧难以