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

Поделиться
HTML-код
  • Опубликовано: 25 дек 2024

Комментарии • 88

  • @jonzer3028
    @jonzer3028 Год назад +6

    Man, I’m honestly so happy I found your channel.
    This (and your other videos) are the exact type of projects I am trying to get better at building.
    Thank you!

  • @NeCo-uu6nk
    @NeCo-uu6nk 10 месяцев назад +1

    Thank you! I couldn't build THREE.js on next.js, but now I can.

  • @unhealthytomato3219
    @unhealthytomato3219 9 месяцев назад +2

    Extremely underrated

  • @hamedbahram
    @hamedbahram Год назад +1

    Super slick! love your content Oli!

    • @olivierlarose1
      @olivierlarose1  Год назад +2

      Appreciate it! You’re doing great work on your side too💯

    • @hamedbahram
      @hamedbahram Год назад +1

      @@olivierlarose1 Thanks! Would you like to collaborate?

  • @leonardocarvalho4111
    @leonardocarvalho4111 Год назад +2

    🔥🔥🔥🔥 You're content is amazing! Thank You so much
    .

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt Год назад +1

    Thanks for the videos of react, nextjs and framer motion, I hope you upload more so I can learn a hug

  • @YakshithKulal-t1o
    @YakshithKulal-t1o 11 месяцев назад +1

    Thank you for teaching all these for free 🥳amazing content

  • @voldemortvi4264
    @voldemortvi4264 Год назад +1

    thank you for taking the time to make such a tutorial !

  • @WoxPillar
    @WoxPillar Год назад +2

    Thank You !!! At last I am going to learn some ThreeJs.

  • @abricoshka
    @abricoshka Год назад +1

    Thank you. Your content is unique! I didn't find any videos with three.js and next.js.

  • @rodrigosalmeron7216
    @rodrigosalmeron7216 Год назад +2

    Once again a great video explained incredibly easy. That's pure talent bro, every week im waiting for a new video. Keep going on the three js approaches with framer motion or even with gsap. Respect bro 🥳🥳🥳

  • @sohambhosale5780
    @sohambhosale5780 Год назад +1

    Once again osm video bro♥

  • @bjgjuiuguoojpoo
    @bjgjuiuguoojpoo Год назад +1

    AWESOME! It is all that I literally need at this moment! :) Thanks Bro! :)

  • @MuhammadHamid-r6o
    @MuhammadHamid-r6o Год назад +1

    guy you really deserve millions of subscribers i found your channel accidentally but u subscribe your channel because your content are spectacular

  • @nellymotion
    @nellymotion Год назад +2

    Thank you so much for the tutorial !!

  • @berkeylmaz4488
    @berkeylmaz4488 Год назад +1

    This is an amazing video man. GG's

  • @hrsikeisa
    @hrsikeisa Год назад +1

    Very well explained 🙌

  • @expl0de100
    @expl0de100 11 месяцев назад +1

    Wow, You are explaining everything You do very clearly! Also good pace of the tutorial. I dont have to speed it up to 1.25 or 1.5 like others :D

  • @mazwrld
    @mazwrld Год назад +1

    yo this is so sick thanks! ive a cool use case for this

  • @testingtesting-d3t
    @testingtesting-d3t Год назад +1

    Hello Oli, I use Angular and I had to learn react to understand what you do and thus migrate all the components that I like to Angular, I hope I can do this too. I recently joined your discord, I am very happy to learn from your videos. Thanks for sharing this content

  • @AliyAkhbar
    @AliyAkhbar Год назад +1

    Awesome as always 😊

  • @DMZT_dhruv
    @DMZT_dhruv 11 месяцев назад +1

    man you deserve 1 million+ subscribers

  • @HuynhLuong227
    @HuynhLuong227 Год назад +1

    thanks for sharing, hope see you next video.

  • @SheriffKoder9
    @SheriffKoder9 10 месяцев назад +1

    Thanks a lot my friend ! this video helped me a lot

  • @codebymohsine
    @codebymohsine Год назад +1

    it's fire bro 🔥🔥🔥

  • @eduardosantos3516
    @eduardosantos3516 11 месяцев назад +1

    Very good, amazing!!

  • @yohnnyy
    @yohnnyy Год назад +1

    Thanks for this!!!

  • @Houseofstartup
    @Houseofstartup Год назад +1

    Thank you so much

  • @ashuu9257
    @ashuu9257 Год назад +1

    When is the course coming, eagerly waiting!!!!!

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 Год назад +1

    GRACIAS!! You are the best!

  • @_codesan
    @_codesan Год назад +1

    thanks for sharing, you great bang

  • @lucho1695
    @lucho1695 Год назад +1

    Thank you so much for your works! Your channel is a real gem! By any chance could you make a tutorial or give us some insights how to make smooth transitions between pages with meshes. E.g on /works page select a plane, play some fancy async animations and then seamlessly navigate to /works/:id. I would really love to see your approach on this.

  • @FarhanAhmed1360
    @FarhanAhmed1360 Год назад +1

    Nice 👍

  • @chrisw.1252
    @chrisw.1252 Год назад +1

    dope!

  • @sahadevdahit
    @sahadevdahit 11 месяцев назад +1

    ❤❤❤❤❤ brother

  • @andrewii23
    @andrewii23 Год назад +2

    I want road map to study to be like you 😢

  • @taszidizaz4079
    @taszidizaz4079 Год назад +1

    First comment. Thanks as always ❤

  • @dorji-dev
    @dorji-dev 7 месяцев назад

    Thank you so much for the content. I also want ask if it is possible to progressively draw the cube as the user scrolls starting from a square structure and slowly transition to cube as well? Initially as the user scrolls, the user should see a line which represents the cube vertex which progresses and the next vertex and after four vertex should slowly rotate transitioning to a cube. I wonder if it is possible and will give it a go. Your response will be much appreciated!

  • @leiyin1998
    @leiyin1998 11 месяцев назад +1

    hi bro! thank you. By the way, may I ask if you have any good ways to learn web 3D development?

  • @ha-rrykim2147
    @ha-rrykim2147 Год назад +1

    By any chance did anyone have issues with images? unable to render them. I'm getting an runtime error for images. `Uncaught Error: Could not load [object Object]: undefined` I
    Thanks Olivier for the tutorial!~

  • @himanshukamal1
    @himanshukamal1 7 месяцев назад

    can you show a typescript version also. I am getting too many errors

  • @keymoment
    @keymoment Год назад +1

    Could you create a portfolio website I want to learn Three.js from these channels.

  • @v.demchenko
    @v.demchenko Год назад +1

    😎cool

  • @cjlebios4900
    @cjlebios4900 Год назад +1

    Man what a timing Vid, I'm currently frustrated in learning to add 3d models into Nextjs. any tips?

    • @olivierlarose1
      @olivierlarose1  Год назад +1

      Really? How come? Personall7 difficulty I had was using React Suspense and I fixed it using next Dynamic import

  • @GameDevForLife
    @GameDevForLife Год назад

    did someone have the problem with saas even when installing it it still don't work

  • @lisas.2815
    @lisas.2815 4 месяца назад

    If anyone is trying this, this is the framer-motion and framer-motion-3d version that is used in this video: 10.16.4
    The current versions do not work together for me. Try downgrading to that version if you encounter weird errors.

  • @mazwrld
    @mazwrld Год назад +1

    hol up why does it change the saturation of assets?? like it's doing something to the images

    • @olivierlarose1
      @olivierlarose1  Год назад +2

      Yes the Plaiceholder library actually applies an edit on the images, but all of that is adjustable if you look at the docs. Enjoy

  • @akhilankola9256
    @akhilankola9256 Месяц назад

    Nice but how can i do same using vanila js

  • @ruizxzx
    @ruizxzx Год назад +1

    !!once again

  • @mazwrld
    @mazwrld Год назад +1

    4:46 no prettier is itching me