Build a 3D Book Slider Landing Page with Three.js & React

Поділитися
Вставка
  • Опубліковано 18 жов 2024

КОМЕНТАРІ • 57

  • @Ibrahim-oc5ql
    @Ibrahim-oc5ql 2 місяці тому +3

    Sensei you're creating a new generation of 3d builders! Thanks for your contribution!

  • @ebodshojaei4967
    @ebodshojaei4967 2 місяці тому +2

    One of the best web tutors. Kudos!

    • @WawaSensei
      @WawaSensei  2 місяці тому

      Thank you very much, cheers!

  • @julianvelez6563
    @julianvelez6563 2 місяці тому +3

    Awesome work bro ❤❤❤

  • @JC-jz6rx
    @JC-jz6rx 3 дні тому +1

    Code aside. Did I see pics of shinjukus gyoen garden ?
    Edit: golden pavilion second guess. Or maybe pics of both.

  • @dyego791979
    @dyego791979 Місяць тому +1

    Incredible tutorial! I'm going to try to do something similar. Thanks for inspiration! If I wanted the book to stay still, what variables should I adjust?

    • @WawaSensei
      @WawaSensei  Місяць тому

      Thank you!! What do you mean by still? To not float? (remove the float component wrapping the book if that's your question)

  • @mattkettelkamp6670
    @mattkettelkamp6670 2 місяці тому

    Such an amazing tutorial like always! Thank you Sensei! How do you make your texture with the roughness map for the front and back cover? Blender?

  • @MananPujara666
    @MananPujara666 2 місяці тому

    Thanks for this tutorial, man! This will really help me with my online library project. : )

  • @IsaTimur
    @IsaTimur 14 днів тому

    Amazing, thx a lot! Will reuse it for selling book, cool!

    • @WawaSensei
      @WawaSensei  14 днів тому +1

      Wonderful! Go for it, my pleasure to see it used on other projects 🔥

  • @AleenDhar
    @AleenDhar Місяць тому

    Sensei is the best. Love your content.

  • @matheusasilva1170
    @matheusasilva1170 8 днів тому

    Your videos are awesome! I'm picking up a lot from them, thanks a ton.
    I have a question: I'm a bit lost on how the "eafc kit creator" website generates the kits. Could you explain how it works?
    Thanks!

  • @yurirodr
    @yurirodr 4 дні тому

    Asu, buen proyecto, siempre con excelente contenido

  • @azhara.2143
    @azhara.2143 2 місяці тому +1

    Cool, very insightfull. Please, more tutorial like this...

    • @WawaSensei
      @WawaSensei  2 місяці тому

      Thanks, will do!

    • @azhara.2143
      @azhara.2143 2 місяці тому

      ​@@WawaSensei Could you please share any discount coupons available for college students for your courses?

  • @bibekbhusansahoo9412
    @bibekbhusansahoo9412 2 місяці тому

    I love you videos❤, please add more content and projects to your ultimate guide course

  • @abishek1808
    @abishek1808 2 місяці тому

    bro ur god of three js 👼

  • @maxencehedouin2212
    @maxencehedouin2212 2 місяці тому

    Sans rire, ça fait 2 heures que je suis entrain de réfléchir à un portfolio avec une navigation au travers d'un livre ... tu viens de sortir ta vidéo... c'est le DESTIN

    • @WawaSensei
      @WawaSensei  2 місяці тому

      Haha c'est un signe, let's go!

  • @Iamvijaypotnuru
    @Iamvijaypotnuru 2 місяці тому +1

    really great video bro

  • @avmecole3072
    @avmecole3072 Місяць тому

    Always very clear and efficient !
    Is it possible to put text instead of images, or a html div ?
    Thanks

    • @WawaSensei
      @WawaSensei  Місяць тому

      Thank you!
      As it's the mesh that folds, you'd need to generate a texture with text or HTML content, so unfortunately not "ultra easily" (text is simpler than HTML content in this case)

  • @remedytee
    @remedytee 2 місяці тому

    Very, very nice!

  • @naim2083
    @naim2083 26 днів тому

    awesome

  • @SinanWP
    @SinanWP 2 місяці тому

    nice 👍
    I remember making lots lots lots lots flash magazines in the past like this 🤣🤣

    • @WawaSensei
      @WawaSensei  2 місяці тому

      Thank you! Miss flash so much!

  • @irfansaeedkhan7242
    @irfansaeedkhan7242 2 місяці тому +1

    bro is not coming slow, every new video is setting up high benchmark

  • @heathers.bailey7207
    @heathers.bailey7207 2 місяці тому

    I love your work! I’d love to clone you 😂

  • @arielelias2413
    @arielelias2413 2 місяці тому

    wow, my respect

  • @synergy_products
    @synergy_products 2 місяці тому +1

    マジでクールなチャンネルですな

    • @WawaSensei
      @WawaSensei  2 місяці тому

      本当にありがとうございます!

  • @naim2083
    @naim2083 12 днів тому

    const skinIndex = Math.max(0, Math.floor(x / SEGMENT_WIDTH)); // calculate the skin index
    Math.max is not necessary because the value of Math.floor(x / SEGMENT_WIDTH) is never negative

  • @sumitpurohit8849
    @sumitpurohit8849 2 місяці тому

    Have you tried using typescript with react three fiber. It makes things difficult because of inconsistencies.

    • @WawaSensei
      @WawaSensei  2 місяці тому

      Sure I use it on a few projects. Which one is making it difficult for you? JS or TS?

  • @OsthirShakib
    @OsthirShakib 2 місяці тому

    Nice

  • @mr.fabian8471
    @mr.fabian8471 2 місяці тому

    thanks

  • @Ritzeeeee
    @Ritzeeeee Місяць тому

    How can i deploy this like can you please tell me in 2-3 main steps

    • @WawaSensei
      @WawaSensei  Місяць тому +1

      Hey, check the last part of this video, I'm showing how to do the same:
      ua-cam.com/video/gIIV-FzdW00/v-deo.html
      For frontend-only projects like this one, you can also use Vercel with the same approach

  • @opencode1
    @opencode1 2 місяці тому

    you da best

    • @WawaSensei
      @WawaSensei  2 місяці тому

      only second, you number 1 😍

  • @abhay1446
    @abhay1446 2 місяці тому

    Can we start our own business through only these?

  • @cristianosoares2574
    @cristianosoares2574 2 місяці тому

    are you using webgpu?

    • @WawaSensei
      @WawaSensei  2 місяці тому +1

      I don't but WebGPU will come automatically with the new versions of threejs once its validated for production.
      The changes in our code will only apply when we use shaders (as we will have to use TSL, more info here github.com/mrdoob/three.js/wiki/Three.js-Shading-Language) the rest be the same as before with the improvements of performance of WebGPU

    • @cristianosoares2574
      @cristianosoares2574 2 місяці тому

      @@WawaSensei Nice! looking forward to it! as always very insightful content, love how you make 3D look easy :P

  • @fwdflashwebdesign
    @fwdflashwebdesign Місяць тому

    I really hate react go native mam threejs ....

    • @WawaSensei
      @WawaSensei  Місяць тому

      This tutorial is like 90% Threejs and a few React component wrapping it.
      Why so much hate with React dear sir?