Об’єкт Three.js, який можна облетіти

Я вже писала, коли брала б Three.js замість Pixi.js, і чому canvas на бізнес-URL — це рахунок, не декор. Та стаття була рішенням. Ця — об’єкт. Сцена над цим абзацом — той самий патерн, який я б здала на сторінці продукту: острів, лінивий, знищуваний, а речення, яке ви читаєте, лишається в документі.

Тягніть, щоб облетіти. Змініть вузол на кристал або каблучку. Скло, хром, жар. Це комерційна робота: SKU, який клієнт може потримати, а не карусель PNG з трьох ракурсів. Без GLTF. Без дивана на 40 МБ. Процедурна геометрія, фізичний матеріал, environment map, bloom у бюджеті, частинки, які зупиняються, щойно ви йдете з в’юпорта.

1. На що ви насправді дивитеся

Тор вузол, ікосаедр, тор. Three.js малює їх як меші. Скло — MeshPhysicalMaterial: transmission, thickness, IOR, iridescence. Хром — metalness 1 і тугий roughness. Жар — emissive, дешевий спосіб зробити нічний SKU гарячим без ще одного світла. Навколо — хмара точок на ShaderMaterial: не DOM-крапки, не бібліотека частинок. Один draw call.

Скло без environment — сіра пляма. RoomEnvironment плюс PMREM дає мешу що заломлювати, тож transmission читається як об’єм, а не як баг. Bloom — UnrealBloomPass на composer, слабший у світлій темі, слабший на телефоні. Обмежую devicePixelRatio. Ріжу кількість частинок, коли hardwareConcurrency низький. Це різниця між демо, яке виживе на ноутбуці рекрутера, і тим, яке смажить середній Android у метро.

2. Острів, не головна

На сервері немає WebGL. Ця сторінка — static export. HTML статті в першому пейнті. Сцена — клієнтський острів: IntersectionObserver з root margin, потім dynamic import three, потім рендерер. Якщо сюди не долистати, рушій не скачається. Якщо піти — цикл поступається. На unmount я dispose геометрії, матеріали, composer, PMREM, рендерер. Підете з цієї статті в застосунку — GPU-контекст не потече в наступну.

Я не поставила це на головну. Нетерплячий 3D-hero б’ється з LCP, потім краде INP. Рекрутер може зачекати один скрол. Клієнт на URL продукту може зачекати об’єкт, по який прийшов. Не може чекати canvas, який заблокував заголовок. Reduced motion зупиняє автооберт і дрейф частинок; drag лишається, бо це вибір, не анімація.

• Текст і заголовок у серверному HTML. Canvas — не поверхня для crawler.
• Старт на intersection, не на завантаженні роута.
• Dispose на unmount. Пауза поза екраном. Шанувати prefers-reduced-motion.

3. Тут сирий Three.js. У продукті — React Three Fiber

На цій сторінці я підключила рушій сама, щоб острів лишився одним чанком, а цикл був очевидний: create, tick, dispose. У Next.js-застосунку, де сцена має говорити зі станом кошика, пікером кольору і прапорцем стоку, я б взяла React Three Fiber. Той самий GPU, граф сцени в дереві React, менше мін на unmount. Помилка — тягнути R3F, щоб покрутити куб, або уникати його, коли десять мешів мають синхронізуватися з Redux. Обгортку беріть, коли продукт уже мислить компонентами.

4. Коли я б здала це клієнту

Ювелірний SKU. Пляшка. Пристрій, у якого кольори — це продаж. Архітектура, якою треба пройтися, а не чотири JPEG. Не маркетингова головна, якій треба було «відчуватися преміально» — той бриф і досі CSS і GSAP. Не слот: це Pixi. Якщо об’єкт — GLTF із заводу, тримаю худим, додаю LOD і ставлю постер, доки заводиться. Якщо WebGL не стартував — на сторінці лишаються фото і ціна. Canvas — найкращий шлях до SKU, ніколи єдиний.

Висновок: покажіть об’єкт, збережіть документ

Команди наймають Three.js, коли клієнт конвертується облітом, не читанням. Документ усе одно треба найняти: заголовок, ціна, юридичне, запасне зображення. Я здаю цей розкол як senior web engineer — острови Next.js, обмежений GPU-бюджет, GSAP там, де сторінка ще сторінка. Якщо бриф — SKU, який треба потримати у вкладці, напишіть через форму об’єкт, мікс пристроїв і чи той самий URL має ранжуватися. Ми не почнемо з canvas на головній, «щоб портфоліо вистрілило».