​​Эффект движения волны для картинок с помощью WebGL шейдеров и THREE.js

#threejs #webgl #frontend #webdev #javascript #jsarticle

​​3D меню сайта с физикой на THREE.js и Cannon.js

#threejs #cannojs #3d #frontend #webdev #javascript #jsarticle #webgl

​​drei - набор компонентов и утилит для упрощённой разработки в react-three-fiber

Репозиторий открыт для добавления новых утилит и компонентов

#r3f #threejs #frontend #webdev #jslib #javascript

​​postprocessing - JavaScript библиотека для пост обработки 3D моделей THREE.js

#postprocessing #threejs #frontend #webdev #webgl #jslib #javascript

OGL – минималистичная библиотека для WebGL

Является альтернативной THREE.js

Из фишек:

маленький размер
поддержка ES модулей (в отличие от THREE.js)

Проект находится в альфа версии, но большинство библиотеки уже написано

#javascript #webdev #threejs #3d #webgl #canvas #ogl #jslibs

​​react-postprocessing - набор React компонентов для простого комбинирования и настраивания эффектов постобработки

Является обёрткой над postprocessing и предназначена для использования с react-three-fiber

#jslib #javascript #frontend #webdev #threejs #3d #postprocessing #webgl #react #reactthreefiber

​​Nebula - 3D движок для частиц, основанный на THREE.js

#threejs #3d #frontend #webdev #jslib #javascript

​​THREE.MeshLine - Mesh альтернатива THREE.Line

THREE.Line использует GL_LINE, который накладывает некоторые ограничения. С помощью MeshLine можно использовать более настраиваемые линии со всеми фичами THREE.Mesh

#jslib #threejs #3d #frontend #javascript #webdev #webgl

​​react-three-flex - Flexbox для 3D

Библиотека, позволяющая создавать гибкие макеты внутри THREE.js, тем самым давая возможность делать адаптивные сайты вместе с 3D. Также гораздо легче миксовать DOM и WebGL контент.

Либа написана на React и использует react-three-fiber и Yoga под капотом, так что можно легко писать сайты на React вместе с 3D, при это вставляя куски DOM, причём производительно и адаптивно

Внутри либы находятся два компонента - <Box /> - контейнер для 3D объектов, и <Flex /> - контейнер для <Box />. У каждого из компонентов есть все пропсы из CSS Flexbox + укороченные версии

Внутри README лежит полный гайд о том как пользоваться react-three-flex, и парочка эффектных демок (демо 1 и демо 2)

#jslib #javascript #react #3d #threejs #frontend #webdev #reactthreefiber

​​Вышел react-three-fiber 5

В новой версии 3D библиотеки для React было исправлено много багов, а также было произведено много разных оптимизаций. Из новых фич:

- теперь не нужно писать "attach" в <geometry /> и <material />

- WebGL 2 включён по дефолту

- из useThree теперь возвращается viewport - значения границ и дистанций экрана

- Поддержка XHR и ошибок в useLoader. Теперь когда можно управлять XHR, появилась возможность создавать полосы загрузки для ожидания подгрузки моделей

- в примитивах (<primitive />) теперь не нужно писать dispose={null}

#jsrelease #javascript #frontend #webdev #threejs #reactthreefiber #3d #react

​​three-font-outliner - THREE.js библиотека для создания форм из глифов текста в рантайме

- Шрифт можно загрузить как и из URLа, так и из буфера
- Можно настраивать размер и направление текста

#jslib #threejs #3d #frontend #javascript #webdev

​​component-material - React библиотека для композиции и модификации материалов из THREE.js

Библиотека упрощает написание шейдеров для материалов с помощью специальных React компонентов и настроек

#jslib #frontend #webdev #react #webgl #javascript #reactthreefiber #threejs

​​Trois - 3D библиотека на основе Vue, THREE.js и Vite

Представляет собой аналог react-three-fiber.

#jslib #javascript #frontend #vue #webdev #webgl #3d #threejs #vite