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

[@KenCheungChannal]

Thank you so much! I would going to use it in my wedding website with credit. Hope to see more your amazing works on Three.js.

[@WawaSensei]

Awesome, great idea! I'm getting married next year too! Wish you a happy wedding 😘

[@ebodshojaei4967]

One of the best web tutors. Kudos!

[@WawaSensei]

Thank you very much, cheers!

[@Ibrahim-oc5ql]

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

[@kamisama2426]

26:05 I'm not getting the same transition; some pages are sliding from the back of the book. When using lerp, it worked flawlessly. I'm not really sure what is going wrong.

[@julianvelez6563]

Awesome work bro ❤❤❤

[@Next-Js]

wow I love this content, it's totally worth it, thank you very much for leaving the resources to follow it step by step, I subscribe and I leave like, I will be watching your videos

[@alexandergeorgesquire220]

Can’t wait to use this in my next project! 😊

[@WawaSensei]

Wonderful!

[@azhara.2143]

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

[@WawaSensei]

Thanks, will do!

[@azhara.2143]

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

[@MananPujara666]

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

[@WawaSensei]

Happy to help!

[@bibekbhusansahoo9412]

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

[@WawaSensei]

Thank you!

[@maxencehedouin2212]

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]

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

[@Iamvijaypotnuru]

really great video bro

[@dyego791979]

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]

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

[@mattkettelkamp6670]

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?

[@avmecole3072]

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

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

[@Ritzeeeee]

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

[@WawaSensei]

Hey, check the last part of this video, I'm showing how to do the same: kzbin.info/www/bejne/nXqsh2B8r8mKZpI For frontend-only projects like this one, you can also use Vercel with the same approach

[@AleenDhar]

Sensei is the best. Love your content.

[@WawaSensei]

You are the best!

[@IsaTimur]

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

[@WawaSensei]

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

[@sumitpurohit8849]

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

[@WawaSensei]

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

[@yurirodr]

Asu, buen proyecto, siempre con excelente contenido

[@matheusasilva1170]

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!

[@abishek1808]

bro ur god of three js 👼

[@SinanWP]

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

[@WawaSensei]

Thank you! Miss flash so much!

[@JC-jz6rx]

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

[@remedytee]

Very, very nice!

[@irfansaeedkhan7242]

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

[@WawaSensei]

🫶🫶🫶

[@naim2083]

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

[@heathers.bailey7207]

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

[@cristianosoares2574]

are you using webgpu?

[@WawaSensei]

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]

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

[@synergy_products]

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

[@WawaSensei]

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

[@lamarmohsen9582]

we need in tsx pleaseeee

[@arielelias2413]

wow, my respect

[@WawaSensei]

Thanks ser!

[@naim2083]

awesome

[@OsthirShakib]

Nice

[@mr.fabian8471]

thanks

[@WawaSensei]

Thanks to you more!

[@abhay1446]

Can we start our own business through only these?

[@WawaSensei]

Why not!? 🤑

[@opencode1]

you da best

[@WawaSensei]

only second, you number 1 😍

[@fwdflashwebdesign]

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

[@WawaSensei]

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