No video

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

A website tutorial on how to create a Glass looking Material with distortion by using the MeshTransmissionMaterial with Three.js, React, React Three Fiber and Next.js.
Source Code / Live demo:
blog.olivierla...
00:00 Intro
00:19 Asset Preparation
3:01 Rendering the Canvas
5:16 Rendering the mesh
6:47 Adding lights
8:25 Adding responsiveness
8:49 Rotating the mesh
9:33 Adding the text
11:14 Adding the Transmission Material
13:30 Outro
More animations: blog.olivierla...
Follow me on Twitter: / olivierlarose_
Discord Channel: / discord
Thanks for watching!
#react #nextjs #awwwards #gsap #framer #motion

Пікірлер: 84

  • @user-dn4lr7fl2m
    @user-dn4lr7fl2m5 ай бұрын

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

  • @mirjalol49
    @mirjalol495 ай бұрын

    this channel is sick... keep spreading joy

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Cheers

  • @gadoosher

    @gadoosher

    5 ай бұрын

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

  • @mirjalol49

    @mirjalol49

    5 ай бұрын

    @@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

    5 ай бұрын

    @@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

    5 ай бұрын

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

  • @KristianTheDesigner
    @KristianTheDesigner2 ай бұрын

    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.

  • @kohta3826
    @kohta38265 ай бұрын

    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
    @HenryBabbage5 ай бұрын

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

  • @juicer_777
    @juicer_7775 ай бұрын

    Those textures can really make minimalist designs stand out

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    For sure!

  • @marcelsdev
    @marcelsdev4 ай бұрын

    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!

  • @Joerdodd
    @Joerdodd3 ай бұрын

    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!

  • @noahgsolomon
    @noahgsolomon5 ай бұрын

    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 :)

  • @joshreynolds4164
    @joshreynolds41645 ай бұрын

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

  • @GOPUBLICIDADEstudioCreativo
    @GOPUBLICIDADEstudioCreativo5 ай бұрын

    pff ..this channel is gold..

  • @LucasGuillemette
    @LucasGuillemette5 ай бұрын

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

  • @keyboardbasher5769
    @keyboardbasher57693 ай бұрын

    youre the goat.

  • @akashkumawatt
    @akashkumawatt5 ай бұрын

    Love it ❤🔥

  • @quebuena111
    @quebuena111Ай бұрын

    Thank you very much for this!

  • @abhinav.sharma
    @abhinav.sharma2 ай бұрын

    BEAUTIFUL!

  • @alvarobyrne
    @alvarobyrne4 ай бұрын

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

  • @Way_Of_The_Light
    @Way_Of_The_Light5 ай бұрын

    Amazing tutorial as always 🤩

  • @juanm512
    @juanm5125 ай бұрын

    i love your videos man! Great work!

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Cheers my friend!

  • @rockylikespocky
    @rockylikespocky5 ай бұрын

    Great tutorial as usual!

  • @J.E.GTECH-3
    @J.E.GTECH-33 ай бұрын

    loveit men really helps a lot😉

  • @rudrokhan4355
    @rudrokhan43555 ай бұрын

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

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Thanks for the heads up! I've added it

  • @NYProductions
    @NYProductions5 ай бұрын

    Great Tutorial. Thanks. Subscribed.

  • @aminebouzaid5971
    @aminebouzaid59715 ай бұрын

    Amazing man , thank you ❤️🎉

  • @mazwrld
    @mazwrld5 ай бұрын

    BANGER VIDEO

  • @jason.zubiate
    @jason.zubiate5 ай бұрын

    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

  • @nellymotion
    @nellymotion5 ай бұрын

    Much aprriciated video!

  • @lvan_studio
    @lvan_studio14 күн бұрын

    👏👏👏

  • @Yesterday_i_ate_rat
    @Yesterday_i_ate_rat5 ай бұрын

    ❤❤ Thanks for this tutorial

  • @spb26
    @spb263 ай бұрын

    Thank you!

  • @leiyin1998
    @leiyin19985 ай бұрын

    i need this, cheers, bro

  • @ilmanmanarulqori5632
    @ilmanmanarulqori56325 ай бұрын

    This is dope 🎉🎉🎉🎉

  • @mirothedjplaylist
    @mirothedjplaylist4 ай бұрын

    Awesome inwas about to start a similar project. Ty

  • @akashkumawatt
    @akashkumawatt5 ай бұрын

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

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Noted!

  • @wallacesilva6087
    @wallacesilva60875 ай бұрын

    Very good!!

  • @niiko7356
    @niiko735628 күн бұрын

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

  • @majormajor4636
    @majormajor46365 ай бұрын

    Great tutorials - keep cooking

  • @CoryTheSimmons
    @CoryTheSimmons5 ай бұрын

    Only cool channel

  • @teflonhav
    @teflonhav5 ай бұрын

    thank you

  • @arielelias2413
    @arielelias24135 ай бұрын

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

  • @ArturGuedes
    @ArturGuedes5 ай бұрын

    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

    5 ай бұрын

    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

  • @hype8248
    @hype82485 ай бұрын

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

  • @CarlWicker
    @CarlWicker5 ай бұрын

    kewl ❤💯

  • @fiha_khair_yt
    @fiha_khair_yt5 ай бұрын

    🔥🔥🔥

  • @AdityaRaj-lj5wf
    @AdityaRaj-lj5wf5 ай бұрын

    niceee

  • @user-ql8nw1dn4r
    @user-ql8nw1dn4r5 ай бұрын

    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? 😢😢

  • @abdoillahahdad3575
    @abdoillahahdad35755 ай бұрын

    nice

  • @kasper369
    @kasper3692 ай бұрын

    Is there a way to do glass effect with baking ?

  • @Teslabull
    @Teslabull2 ай бұрын

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

  • @charlesxavier77
    @charlesxavier775 ай бұрын

  • @ashuu9257
    @ashuu92574 ай бұрын

    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

    10 күн бұрын

    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

  • @abdoillahahdad3575
    @abdoillahahdad35755 ай бұрын

    I want to have an impact in everything I can

  • @jheanbrizadao2429
    @jheanbrizadao24295 ай бұрын

    🎉🎉🎉🎉🎉🎉🎉🎉

  • @deepak8586
    @deepak85865 ай бұрын

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

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Yes!

  • @deepak8586

    @deepak8586

    5 ай бұрын

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

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Noted!

  • @vertas.y
    @vertas.y4 ай бұрын

    how can i hide the leva controlls?

  • @user-jq8ov3rv1c

    @user-jq8ov3rv1c

    2 ай бұрын

    There exists a attribute for that

  • @abdoillahahdad3575
    @abdoillahahdad35755 ай бұрын

    Can I do this h1 instead of

  • @olivierlarose1

    @olivierlarose1

    5 ай бұрын

    Not if you want the distortion to work

  • @abdoillahahdad3575

    @abdoillahahdad3575

    5 ай бұрын

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

  • @abdoillahahdad3575

    @abdoillahahdad3575

    5 ай бұрын

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

  • @mazwrld
    @mazwrld5 ай бұрын

    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

    5 ай бұрын

    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

  • @ComfyCosi
    @ComfyCosi5 ай бұрын

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

  • @SajanSingh-mj8eh

    @SajanSingh-mj8eh

    4 ай бұрын

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

  • @BojanKnezevic
    @BojanKnezevic5 ай бұрын

    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

    5 ай бұрын

    Good point! I've adjusted the title

  • @ParaZumir
    @ParaZumir2 ай бұрын

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

  • @ParaZumir

    @ParaZumir

    2 ай бұрын

    i got it :) lol

  • @ParaZumir
    @ParaZumir2 ай бұрын

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