How to Make a 3D Glass Effect using Three.js and Next.js

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

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

  • @mirjalol49
    @mirjalol49 10 месяцев назад +15

    this channel is sick... keep spreading joy

    • @olivierlarose1
      @olivierlarose1  10 месяцев назад

      Cheers

    • @gadoosher
      @gadoosher 10 месяцев назад

      Wait, did you make Josh's graphics???

    • @mirjalol49
      @mirjalol49 10 месяцев назад

      @@gadoosher oh hey, i love Josh as a programmer, so i didnt make it. i am his fan. i got his animated charecter from google and edited in Canva

    • @gadoosher
      @gadoosher 10 месяцев назад

      @@mirjalol49 Oh gotcha! His graphics are so dope I was going to geek out haha. Honestly everything he does is so dope. Cheers!

    • @mirjalol49
      @mirjalol49 10 месяцев назад

      @@gadoosher yes he is next level person. everything he does is dope as u said

  • @HagglR56
    @HagglR56 10 месяцев назад +4

    You share so much more than is required in your videos, providing excellent context - thank you so much Olivier

  • @juicer_777
    @juicer_777 10 месяцев назад +6

    Those textures can really make minimalist designs stand out

  • @kohta3826
    @kohta3826 10 месяцев назад

    I'm a college student aspiring to become an engineer in Japan and I'm always able to catch up on the great content on your blog and youtube! I will continue to support you!

  • @HenryBabbage
    @HenryBabbage 10 месяцев назад

    So great to have this intro to ThreeJS/drei. Would love to see more on this subject of 3D effects / particle animations etc

  • @KristianTheDesigner
    @KristianTheDesigner 7 месяцев назад +1

    THANK YOU for using Blender, and not Spline! What can i say? great video once again Olivier. Never dissapoints, always valuable tips and tricks. Class A for sure.

  • @joshreynolds4164
    @joshreynolds4164 10 месяцев назад

    So appreciate to have such great content in this space. Looking forward to your course man!

  • @noahgsolomon
    @noahgsolomon 10 месяцев назад

    This is great! As someone who is familiar with R3F and Three.js but not as familiar with R3F dynamics with Next.js I'd love a video on that :)

  • @LucasMakes
    @LucasMakes 10 месяцев назад

    Beautiful work man. I checked out your website and blog. Love your work!

  • @marcelsdev
    @marcelsdev 9 месяцев назад

    Thanks for this, and well done on creating such awesome content! I've recently jumped back in Blender doing some designs and animations for a Next.js website of a start-up, and one of the ideas was to replace a video file with Three.js. At the time I had too much to do, but after seeing this I know I can do it in a day or two. Keep it up!

  • @GOPUBLICIDADEstudioCreativo
    @GOPUBLICIDADEstudioCreativo 10 месяцев назад

    pff ..this channel is gold..

  • @JoeMayk3D
    @JoeMayk3D 8 месяцев назад

    Thank you! would love a starter tutorial which shows us how you got to the initial state - not sure on how to set this up by myself with the intial folder structures. Amazing stuff though!

  • @rockylikespocky
    @rockylikespocky 10 месяцев назад

    Great tutorial as usual!

  • @cirtey29
    @cirtey29 4 месяца назад

    Nice. More videos on react/three within nextjs please.

  • @Way_Of_The_Light
    @Way_Of_The_Light 10 месяцев назад

    Amazing tutorial as always 🤩

  • @juanm512
    @juanm512 10 месяцев назад

    i love your videos man! Great work!

  • @NYProductions
    @NYProductions 10 месяцев назад

    Great Tutorial. Thanks. Subscribed.

  • @mirothedjmusic
    @mirothedjmusic 9 месяцев назад

    Awesome inwas about to start a similar project. Ty

  • @J.E.GTECH-3
    @J.E.GTECH-3 8 месяцев назад +1

    loveit men really helps a lot😉

  • @jason.zubiate
    @jason.zubiate 10 месяцев назад

    hey man the content has been fire. do you think you can do a video or two on some preloader screens you like using next and framer motion

  • @aminebouzaid5971
    @aminebouzaid5971 10 месяцев назад

    Amazing man , thank you ❤️🎉

  • @rudrokhan4355
    @rudrokhan4355 10 месяцев назад

    Hi! Loved the video. It seems that you forgot to include the demo link in the description. Keep up the great work ❤

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

      Thanks for the heads up! I've added it

  • @abhinav.sharma
    @abhinav.sharma 7 месяцев назад

    BEAUTIFUL!

  • @nellymotion
    @nellymotion 10 месяцев назад

    Much aprriciated video!

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

    Love it ❤🔥

  • @leiyin1998
    @leiyin1998 10 месяцев назад

    i need this, cheers, bro

  • @mr.tipton
    @mr.tipton 2 месяца назад

    Have a question: can the canvas be transparent and overlay another canvas or html beneath it and still refract what is under it, or does the refraction only work with other objects in the same canvas?

  • @Jishanthegodev
    @Jishanthegodev 10 месяцев назад

    ❤❤ Thanks for this tutorial

  • @tomfer4499
    @tomfer4499 2 месяца назад

    top Video Olivier, merci beaucoup... je crois qu'on prononce "Draïe" pour Drei (Three en allemand), à vérifier...

  • @majormajor4636
    @majormajor4636 10 месяцев назад

    Great tutorials - keep cooking

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

    Bro please make a video or add a blog post on
    How to use Locomotive scroll and GSAP scrolltriger both in React.js

  • @arielelias2413
    @arielelias2413 10 месяцев назад

    Hiiiii Oliver! Im expecting your Framer Motion course! When it would be able to start???

  • @niiko7356
    @niiko7356 5 месяцев назад

    Hey ! Thanks for the tutorial, its awesome ! On white background my torus looks black, do you know how to change its color ?

  • @wallacesilva6087
    @wallacesilva6087 10 месяцев назад

    Very good!!

  • @ԴավիթՄաթոսյան
    @ԴավիթՄաթոսյան 10 месяцев назад

    Olieeee, can u please show how to make share image transition, like we are in one page, then when we go to another, the image is animating ang appears in other page, how is it done? 😢😢

  • @ilmanmanarulqori5632
    @ilmanmanarulqori5632 10 месяцев назад

    This is dope 🎉🎉🎉🎉

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

    10:15 anyone know how to fix the in next 14, the bug still exists

  • @mazwrld
    @mazwrld 10 месяцев назад

    BANGER VIDEO

  • @spb26
    @spb26 8 месяцев назад

    Thank you!

  • @hype8248
    @hype8248 10 месяцев назад

    How does it work with typescript? Because in a .tsx file the doesnt work and the mesh.current might be equal null

  • @ravigupta5481
    @ravigupta5481 4 месяца назад

    hi, i dont have any knowledge of 3d or blender, can you provide that 3d torus object

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

    Is it possible to make this using spline and webflow?

  • @kasper369
    @kasper369 8 месяцев назад

    Is there a way to do glass effect with baking ?

  • @keyboardbasher5769
    @keyboardbasher5769 8 месяцев назад

    youre the goat.

  • @ashuu9257
    @ashuu9257 9 месяцев назад

    One question , why don't you use no code toolss for these kind of cool animated websites , i am really confused :') what to choose

    • @sanvedbhoyar
      @sanvedbhoyar 5 месяцев назад +1

      Probably cuz he wants to create these animations himself from scratch... And also, many no-code tools don't have optimized code which slows down the website

  • @ArturGuedes
    @ArturGuedes 10 месяцев назад

    Very good job! Your way of explaining was simple and direct, I loved it.
    But, I have a question. Is it possible to replace Text with Html and keep the same effect? I've been trying for hours and I can't.
    The reason I try to use Html is that it allows browser translation.
    Once again, great channel!

    • @olivierlarose1
      @olivierlarose1  10 месяцев назад

      Hey! Glad you liked the video. Unfortunately your text needs to be inside the webGL context if you want it to be distorted by the shader

  • @teflonhav
    @teflonhav 10 месяцев назад

    thank you

  • @CarlWicker
    @CarlWicker 10 месяцев назад

    kewl ❤💯

  • @deepak8586
    @deepak8586 10 месяцев назад

    can I have separate group for text and the model??

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

      Yes!

    • @deepak8586
      @deepak8586 10 месяцев назад

      @@olivierlarose1 thanks!! and also could make tutorial where we can move the model based on the movement of the mouse ??

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

      Noted!

  • @vertas.y
    @vertas.y 9 месяцев назад

    how can i hide the leva controlls?

    • @DhwaniJain-j6x
      @DhwaniJain-j6x 7 месяцев назад

      There exists a attribute for that

  • @lvan_studio
    @lvan_studio 5 месяцев назад

    👏👏👏

  • @fiha_khair_yt
    @fiha_khair_yt 10 месяцев назад

    🔥🔥🔥

  • @looppp
    @looppp 3 месяца назад

    Hey mate - sent you an email about the possibilities of hiring you for a task! Thanks man.

  • @abdoillahahdad3575
    @abdoillahahdad3575 10 месяцев назад

    Can I do this h1 instead of

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

      Not if you want the distortion to work

    • @abdoillahahdad3575
      @abdoillahahdad3575 10 месяцев назад

      I don't know why he doesn't want to work in nextjs@@olivierlarose1

    • @abdoillahahdad3575
      @abdoillahahdad3575 10 месяцев назад

      I don't know why he doesn't want to work in nextjs@@olivierlarose1

  • @alvarobyrne
    @alvarobyrne 9 месяцев назад

    dynamic import from next.js THANK YOU! @rect-three/fiber + @react-three/drei is an admirable universe

  • @abdoillahahdad3575
    @abdoillahahdad3575 10 месяцев назад

    nice

  • @CoryTheSimmons
    @CoryTheSimmons 10 месяцев назад

    Only cool channel

  • @mazwrld
    @mazwrld 10 месяцев назад

    I’m starting to notice that even though these designs are nice and the functional aspect of them are lacking..
    Are they even functional to begin with?

    • @olivierlarose1
      @olivierlarose1  10 месяцев назад +2

      Most awwwards type websites are not meant to be “functional”. They definitely put form over function and are meant to have an artistic and visual impact rather than be something functional that you use repeatedly like a product

  • @AdityaRaj-lj5wf
    @AdityaRaj-lj5wf 10 месяцев назад

    niceee

  • @ComfyCosi
    @ComfyCosi 10 месяцев назад

    Why don't we want these components rendered on the server?

    • @SajanSingh-mj8eh
      @SajanSingh-mj8eh 9 месяцев назад

      Because you don't want unnecessary load on your servers 😂, it's gpu processing on client side

  • @abdoillahahdad3575
    @abdoillahahdad3575 10 месяцев назад

    I want to have an impact in everything I can

  • @Jhean_Perdido
    @Jhean_Perdido 10 месяцев назад

    🎉🎉🎉🎉🎉🎉🎉🎉

  • @BojanKnezevic
    @BojanKnezevic 10 месяцев назад

    ugh i dont know next... title should be Next not react, you lost some time going back and forth because of nextjs not focusing on resault

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

      Good point! I've adjusted the title

  • @fwdflashwebdesign
    @fwdflashwebdesign 3 месяца назад

    I really don't like react... it makes thigs easier but somehow more complicated...

  • @charlesxavier77
    @charlesxavier77 10 месяцев назад

  • @vir2plus
    @vir2plus 4 месяца назад

    damn girl, why you gotta bring Next.js into this :(

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

    1:55 Waht visualizer? where can i find this visualizer? im noob and confused pls hepl

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

      i got it :) lol

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

    1 time a tutorial without asking questions, where evrything is explained.... i cant even type so much. very sad

  • @quebuena111
    @quebuena111 6 месяцев назад

    Thank you very much for this!