六十帧记录：一款 Three.js 游戏、七次飞越与一面 CRT 显示器墙

I make music under two names. LXSTNGHT is the dark one, future garage and downtempo. F/MEMORY runs hardwave and chill. And I build for the web. The music matters to this story because of what it forced: connecting the different things I make (tracks, modeled geometry, real-time code) into single pieces. The connective tissue is a lab, an experiments gallery built in Three.js and React Three Fiber, where every piece exists to give the music somewhere to live.

我以两个名字制作音乐。LXSTNGHT 是偏暗黑风格的那一个，主打 future garage 和 downtempo。F/MEMORY 则主打 hardwave 和 chill。同时我也为 web 进行开发。音乐对这个故事之所以重要，是因为它迫使我做了一件事：将我制作的不同事物（音轨、建模几何体、实时代码）连接成完整的作品。连接它们的纽带是一个实验室，一个使用 Three.js 和 React Three Fiber 构建的实验画廊，这里的每一件作品都是为了给音乐提供一个栖身之所。

That constraint turned out to be the whole method. A demo can be a tech showcase; a release has to hold a mood for three and a half minutes at 60 fps on whatever machine the listener owns. The goal is always the same: cinematic pictures running in a browser. Real light, real atmosphere, and a frame budget that survives contact with other people’s hardware. So the lab became a place where the renderer gets interrogated: what does this effect actually cost, what is this frame actually made of, why did that one frame die.

事实证明，这个限制就是整个方法。Demo 可以是技术展示；但发布版本必须在观众拥有的任何机器上，以 60 fps 的帧率维持三分半钟的氛围。目标始终如一：在浏览器中运行的电影级画面。真实的光影，真实的氛围，以及能够经受住他人硬件考验的帧预算。因此，实验室成了一个拷问渲染器的地方：这个效果实际消耗了多少，这一帧究竟由什么构成，为什么那一帧会掉帧。

This article is a tour of three bodies of work and the Three.js lessons they cost me: FRONTIER, a 3D Space Invaders with my songs in the jukebox; the LXSTNGHT series, seven fly-through worlds running on one shared engine; and /fm, a wall of failing CRT monitors that plays the F/MEMORY record. The geometry is modeled in Blender, that’s a house rule, nothing here is a primitive wearing a clever shader. But this piece is about the other half of the pipeline: what happens after useGLTF resolves.

本文是对三个作品系列及其让我付出的Three.js经验教训的巡礼：FRONTIER，一个点唱机里放着我歌曲的3D版《太空侵略者》；LXSTNGHT系列，七个在同一个共享引擎上运行的飞越世界；以及/fm，一面播放着F/MEMORY唱片的故障CRT显示器墙。几何体是在Blender中建模...