Популярное

Музыка Кино и Анимация Автомобили Животные Спорт Путешествия Игры Юмор

Интересные видео

2025 Сериалы Трейлеры Новости Как сделать Видеоуроки Diy своими руками

Топ запросов

смотреть а4 schoolboy runaway турецкий сериал смотреть мультфильмы эдисон
dTub
Скачать

Build a 3D Float Effect using Three.js, Framer Motion, Next.js

Автор: Olivier Larose

Загружено: 2023-10-22

Просмотров: 9452

Описание:

A web animation tutorial that showcases how to create a 3D float effect using Three.js inside a Next.js application. The float is made with React Three Drei and Framer Motion.

Demo / Source code: https://blog.olivierlarose.com/tutori...

00:29 Project structure
01:15 Creating the 3D models
01:55 Importing 3D models
04:54 Adding an environment
07:30 Adding basic floating
08:08 Making a custom float
14:53 Outro

More animations: https://blog.olivierlarose.com/
Follow me on Twitter:   / olivierlarose_  
Discord Channel:   / discord  

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion #svg #morph

Build a 3D Float Effect using Three.js, Framer Motion, Next.js

Поделиться в:

Доступные форматы для скачивания:

Скачать видео mp4

  • Информация по загрузке:

Скачать аудио mp3

Похожие видео

array(10) { [0]=> object(stdClass)#5696 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "UxiLC9XFvuM" ["related_video_title"]=> string(55) "How to Move a Text on an SVG Path on Scroll using React" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> string(14) "Olivier Larose" } [1]=> object(stdClass)#5669 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "9eHEOAn2FOA" ["related_video_title"]=> string(37) "My Top 5 Techniques for Web Animation" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> string(14) "Olivier Larose" } [2]=> object(stdClass)#5694 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "_1QAJaC6Xwc" ["related_video_title"]=> string(31) "GSAP vs Framer Motion for React" ["posted_time"]=> string(28) "11 месяцев назад" ["channelName"]=> string(14) "Olivier Larose" } [3]=> object(stdClass)#5701 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "9XvZ3ChtT9M" ["related_video_title"]=> string(66) "Build a 3D Animated Cube using Three.js, Next.js and Framer Motion" ["posted_time"]=> string(19) "1 год назад" ["channelName"]=> string(14) "Olivier Larose" } [4]=> object(stdClass)#5680 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "sxLMh4-QRg4" ["related_video_title"]=> string(103) "Как сделать сайт с помощью нейросети? (ИИ) 5 способов 👋🏻" ["posted_time"]=> string(25) "2 месяца назад" ["channelName"]=> string(23) "Данил Суслов" } [5]=> object(stdClass)#5698 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "wQA8vi9z5cU" ["related_video_title"]=> string(38) "My Top 10 Resources for Web Animations" ["posted_time"]=> string(28) "11 месяцев назад" ["channelName"]=> string(14) "Olivier Larose" } [6]=> object(stdClass)#5693 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "_YQyGL4fiHg" ["related_video_title"]=> string(96) "Студии — опасны! Что будет с путинками через 20 лет?" ["posted_time"]=> string(23) "8 часов назад" ["channelName"]=> string(16) "Arkadiy Gershman" } [7]=> object(stdClass)#5703 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "p0Ri2tNb-6I" ["related_video_title"]=> string(186) "Человечество навсегда ЗАПЕРТО в Солнечной системе? Астрофизик Борис Штерн раскрыл неприятную правду" ["posted_time"]=> string(20) "21 час назад" ["channelName"]=> string(23) "Глеб Соломин" } [8]=> object(stdClass)#5679 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "8L06tqtg2xI" ["related_video_title"]=> string(107) "Comedy Club: Муж олень | Демис Карибидис, Марина Кравец @ComedyClubRussia" ["posted_time"]=> string(23) "7 часов назад" ["channelName"]=> string(11) "Comedy Club" } [9]=> object(stdClass)#5697 (5) { ["video_id"]=> int(9999999) ["related_video_id"]=> string(11) "WhdRmBOW58M" ["related_video_title"]=> string(204) "«Мы ПОЖАЛЕЕМ о создании искусственного интеллекта»: | Роман Ямпольский, исследователь | «Как теперь»" ["posted_time"]=> string(19) "2 дня назад" ["channelName"]=> string(50) "Как теперь / проект ОВД-Инфо" } }
How to Move a Text on an SVG Path on Scroll using React

How to Move a Text on an SVG Path on Scroll using React

My Top 5 Techniques for Web Animation

My Top 5 Techniques for Web Animation

GSAP vs Framer Motion for React

GSAP vs Framer Motion for React

Build a 3D Animated Cube using Three.js, Next.js and Framer Motion

Build a 3D Animated Cube using Three.js, Next.js and Framer Motion

Как сделать сайт с помощью нейросети? (ИИ) 5 способов 👋🏻

Как сделать сайт с помощью нейросети? (ИИ) 5 способов 👋🏻

My Top 10 Resources for Web Animations

My Top 10 Resources for Web Animations

Студии — опасны! Что будет с путинками через 20 лет?

Студии — опасны! Что будет с путинками через 20 лет?

Человечество навсегда ЗАПЕРТО в Солнечной системе? Астрофизик Борис Штерн раскрыл неприятную правду

Человечество навсегда ЗАПЕРТО в Солнечной системе? Астрофизик Борис Штерн раскрыл неприятную правду

Comedy Club: Муж олень | Демис Карибидис, Марина Кравец @ComedyClubRussia

Comedy Club: Муж олень | Демис Карибидис, Марина Кравец @ComedyClubRussia

«Мы ПОЖАЛЕЕМ о создании искусственного интеллекта»: | Роман Ямпольский, исследователь | «Как теперь»

«Мы ПОЖАЛЕЕМ о создании искусственного интеллекта»: | Роман Ямпольский, исследователь | «Как теперь»

© 2025 dtub. Все права защищены.



  • Контакты
  • О нас
  • Политика конфиденциальности



Контакты для правообладателей: [email protected]