Стендап Сьогодні 📢 Канал в Telegram @stendap_sogodni

🤖🚫 AI-free content. This post is 100% written by a human, as is everything on my blog. Enjoy!

16.05.2023

Текст у Three.js

Як додати до сцени текстові мітки? Я очікував, що є якась складна специфічна технологія. Але виявилось все набагато простіше. В Three.js є спеціальний рендерер CSS2DRenderer, який замість малювання 3D обʼєктів позиціює елементи HTML. Тобто до сцени додаються спеціальні “маркери” - CSS2DObject - до кожного з яких приєднаний елемент DOM.

Це працює в поєднанні зі базовим рендерером; в документі <canvas> для обʼєктів та <div> для міток є сусідами та ділять один та той самий простір (що, звісно, необхідно, щоб мітки поєднувались з іншими 3D обʼєктами.)

Так до сцени легко додати не тільки текст, а й будь-який зміст HTML - наприклад, світлину. Зручно. Єдине, чого не вистачає — це відтинання міток, які закриті за іншими предметами. Для того треба вручну робити raycasting, тобто перевіряти, чи не перетинається відрізок від камери до мітки з чимось іншим. Ну, принаймні, напіввручну, бо клас Raycaster бере на себе складну частину.

Поки шукав, як ховати текст “під обʼєкти”, знайшов таку скажену річ, як React для three.js @react-three/fiber. Сенс в тому, що не треба вручну та процедурно оновлювати зміст сцени — можна задати її декларативно. Тобто так само як і для HTML. А ще інтеграція зі звичайним HTML там вбудована, що уможливлює круті штуки. Проте мені зараз React не потрібний, бо для анімації за сценарієм від нього більше перешкод, ніж користі.