Что такое Three.JS?

Three.JS — это кроссбраузерная библиотека JavaScript и API, используемые для создания и отображения анимированной 3D-графики в веб-браузерах.

Three.JS позволяет создавать 3D-анимации с ускорением на графическом процессоре с использованием языка JavaScript, не полагаясь на плагины.

Что такое React Three Fiber?

react-three-fiber — это средство рендеринга React для Three.JS, не имеющее дополнительных накладных расходов. Компоненты участвуют в едином цикле рендеринга вне React. Он превосходит Three.JS в масштабе благодаря возможностям планирования React.

Настраивать

Для этого существует множество зависимостей:

yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing

Объект Canvas— это место, где вы начинаете определять свою сцену React Three Fiber.

В приведенном выше коде я только что создал холст с настроенной камерой и тенями.

Свет и тени

Внутри холста нам нужны свет и тени, поэтому у наших моделей будут свои тени, и они будут выглядеть яркими.

Создайте сердца

Во-первых, мы должны создать форму сердца:

Затем умножьте его на разные коэффициенты и скорость:

Поскольку мы хотим, чтобы наши сердца плавали, мы установим их положение сuseFrame

Наконец, мы отлили сердечки Instancesи поместили их Canvasвыше .

Наконец, нам нужны некоторые эффекты

Вывод

Результаты, достижения

Живая демонстрация:https://threejs-floating-hearts.vercel.app/

Исходный код:https://github.com/leduc1901/threejs-floating-hearts

Последние слова

Хотя мой контент бесплатен для всех, но если вы найдете эту статью полезной, вы можете угостить меня кофе здесь.