Weisdevice：在2D、3D和声音之间打造故障艺术世界

在这篇案例研究中，我将带你了解创建我的作品集网站的完整过程——从早期原型和技术实验，到最终成为Weisdevice的故障风格3D世界。这个项目最初只是对形式、声音和运动的小型个人探索，逐渐演变成对我创作过程的反思：一个用户友好、不会让访客困惑，同时拥抱不完美和偶尔混乱风格的网站，深度聚焦于设计、技术和情感的交汇点。

概念

这个3D世界围绕一个不完美的老旧机器人展开。她并不先进，偶尔会故障，但始终在她孤独的岛屿上专注于实验。这个项目的灵感来源于我自身的经历——长时间专注于所爱之事，与他人极少互动，以及大量的试错。在技术风格的设计之下，蕴含着微妙忧郁和困惑感，但也关乎专注、韧性和些许混乱。

两个被放弃的原型

使用无代码工具构建了两个原型，嵌入画布中，并通过外部JavaScript函数管理嵌入式补丁与网站界面之间的交互。这些原型探索了实时几何、粒子系统、自定义着色器和复杂节点网络，但设计和性能均未达预期。这些实验最终被搁置，转而使用Three.js，在那里项目被完全重新设计和重建，采用了新模型。

构建体验

在收集音频和各种3D模型资源后，3D世界在Blender中设计，并在两周内为这个作品集网站实现了网页版。此后，过程变得长期化：完善设计、添加功能和改进代码。

技术栈：

• HTML
• CSS
• Vanilla JavaScript
• Three.js
• GSAP
• GLSL
• Howler.js

使用纹理和材质模拟实时光照

本项目中没有实时光照，所有光照都是模拟的。

除了用于烘焙明暗模式纹理的Blender光照设置外，还对烘焙纹理进行了手动绘制以增强视觉效果。

所有对象都使用THREE.MeshBasicMaterial。然而，gamebody对象使用THREE.MeshStandardMaterial，将天空盒纹理作为envMap与其基础颜色纹理结合，创造出金属反射效果，突出其作为主要角色的地位。

smokeMaterial在从明模式切换到暗模式时将烟雾（由gameboy对象过热引起）从白色变为红色，模拟红色街灯的效果。

云朵使用THREE.MeshBasicMaterial，不透明度为0.7。它们的烘焙纹理经过手动修改——如果仔细观察，你会发现云影并不完全符合逻辑。

主题切换的自适应场景更新

当主题切换时，CSS应用不同的颜色根，Three.js场景中会发生若干更新：

• 网格颜色在中灰色和深灰色之间变化
• 烟雾颜色在白色和红色之间切换
• 一系列烘焙纹理被更新
• 场景背景颜色被更改

2D中的故障卡通方法（CSS）

在两个原型期间测试了各种CSS技术来模拟后期处理效果，但最终都被放弃。出乎意料的是，“wobble"效果后来被优化并应用于模态框和切换按钮等元素，为2D界面提供了统一的故障美学，与3D世界相得益彰。

1
2
3

.modal, #music-toggle, #theme-toggle, #camera-toggle {
  filter: url(#wobble);
}

3D中的故障卡通方法

为了实现最短加载时间，模型被优化至仅0.76MB，所有纹理都刻意保持小尺寸，一些创意扭曲被有意呈现为故障视觉元素。

卡通、复古且略显破旧的3D世界在Blender中设计、烘焙和手绘，然后进行重度压缩以获得磨损、不完美的外观。两组三个烘焙纹理——用于明暗模式——总共仅3MB。

老旧显示器上的故障卡通方法

显示器有五个纹理——四个静态图像和一个15秒的视频纹理——总大小仅为1.4MB。

静态图像纹理通过三个步骤创建：

1. 在Photoshop中创建
2. 在Blender中使用光照烘焙
3. 与色差着色器结合并在每次切换时混合

显示器的功能被有意编程为略微不稳定——点击可能不总是正常响应，反映了故障主题。

视频纹理是我自己项目的简短汇编。它是超低分辨率，并预先在TouchDesigner中制作为音频反应式。视频的宽高比与网格故意不匹配，在左右两侧产生故障边缘。水平故障增强了显示器的复古、磨损外观。

GSAP动画

许多动画使用GSAP实现——没有从Blender导出的动画。这些包括：

• DOM动画
• 三个介绍动画（一个在页面进入时，两个由相机切换触发）以引导用户并突出交互对象
• 在const render = () => {}中：显示器缓慢旋转和随机云朵移动
• 3D悬停和点击交互

音频交互

使用Howler.js为UI、Gameboy和DJ设备添加了音效，创造音频交互体验。DJ设备不播放通常干净的DJ样本——而是提供略微混乱的声音景观，与项目的不拘一格氛围相匹配。

性能优化和响应式设计

项目的目标是在大多数设备上创建性能良好的3D世界。除了最小文件大小、懒加载和响应式CSS外：

• 当用户在作品部分点击"更多"打开项目页面时，使用cancelAnimationFrame(renderReq)暂停渲染
• 射线投射以30FPS检查对象交互，而不是每帧检查

一些思考

我非常感谢Codrops给我撰写这篇案例研究的机会——我从设计和技术艺术的角度来处理它。这个网站深受我在创意编程和生成艺术方面背景的影响。

设计 我通常从不成形的想法开始，边做边塑造设计——很像生成艺术，即使是"bug"也能成为特性。

开发 这对我来说绝对是一个挑战——我的第一个Three.js网站！ 使用AI节省了寻找资源或文档中所需部分的时间，而无需知道确切的词语。但我花了很多时间解开我意大利面条式main.js中的隐藏问题，痛苦地在代码行之间跳转像蚂蚁一样。这是学习编写干净、可维护代码的重要一课。

你可以在GitHub上找到代码。

致谢

这个网站是我设计硕士课程的最终项目，感谢Frank Jacob教授（设计反馈）。感谢Andrew Woan（YouTube教程和反馈）、开发者Vladimir Nariadov（性能反馈）；3D资源由：FuneralClown、Vanya Dzhus、Eh、Yana Melnyk提供；音乐由XtremeFreddy和frankum提供；音效来自Freesound.org。特别感谢Three.js和Web Dev社区中的Reddit用户，他们的宝贵反馈帮助改进了UX设计和测试。