Amazing 3D Animation Website with Three.Js So Eazy

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

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

  • @lundeveloper
    @lundeveloper  2 месяца назад +45

    I hear people say they want to learn basic Three Js, but it's not too interesting. So I increased the difficulty a bit.
    If you find the video interesting, please like and subscribe to watch more interesting videos about programming and web design

    • @Crix-X982
      @Crix-X982 2 месяца назад +2

      Yes thanks i want to learn three.js from you cause you tell those things which everyone don't know

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

      mong anh ra series nâng cao hơn nhá, cảm ơn anh

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

      Do you use cap cut for editing

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

      Sick! Great work

    • @Quotes-IIQ
      @Quotes-IIQ 2 месяца назад

      make a css full course

  • @Mr.FranciscodeMiranda
    @Mr.FranciscodeMiranda 2 месяца назад +28

    Uploaded one hour ago, recorded, edited and voiced over 3 hours ago.
    This dude has superpowers!

  • @jimzordstam6338
    @jimzordstam6338 2 месяца назад +11

    Have only watched 3-4 vids, but when faced with extreme quality you can immediately tell this SS-tier content, thanks for your hard work.

  • @faridul.hassan
    @faridul.hassan 2 месяца назад +5

    Just wow!!!
    Please create a full playlist with Three.js Fundamentals and then making some real world projects.
    Best of luck.

  • @yashwanthrocky6311
    @yashwanthrocky6311 2 месяца назад +78

    Please start three.js tutorial from beginning

    • @lundeveloper
      @lundeveloper  2 месяца назад +45

      I agree ☺️❤️

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

      ​@@lundeveloperPlease

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

      ​@@lundeveloper we hope soon❤

    • @krishnarajbhar767
      @krishnarajbhar767 2 месяца назад +1

      ​@@lundeveloperThanks❤

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

      Maybe you make a series especially for three.js (starting at beginner level). This way you can bring your part 1, 2, 3 and so on and in between Master CSS tutorials. I like these also, and even I think I know a lot about CSS, I see new things once in a while.

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

    Words cant describe how useful all this information was. thank you so much

  • @E-finder
    @E-finder Месяц назад +1

    I’m from Cambodia, I’m not good at English but ur speaking make me ez to understand.❤

  • @_cannachris
    @_cannachris 2 месяца назад +1

    Bro, your Tutorials are awesome and let my ideas fly - thanks sooo much!

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

      Thank you for watching my content brother 😘

  • @2difficult2do
    @2difficult2do Месяц назад

    Very interesting project. Thanks for sharing your work

  • @n.h.nayeem-v1b
    @n.h.nayeem-v1b 2 месяца назад +1

    Your videos are mindblowing. 🧠
    Specially , I love your CSS tutorials.

  • @MarcE-n9b
    @MarcE-n9b 2 месяца назад +4

    Gonna watch this later. I just stopped by to give this a like!

  • @lundeveloper
    @lundeveloper  2 месяца назад +22

    Inspired by Figma 3D project (No code), I tried creating with Three Js and the result is this video

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

      Are no codes sustainable ?
      Are no code projects scalable ?
      Nice video by the way.

  • @merion297
    @merion297 2 месяца назад +1

    Incredible concept&tutorial! Every webpage should use 3D these days!

    • @Unknown27-c6b
      @Unknown27-c6b 24 дня назад

      Bro its heavy it will decrease performance

    • @merion297
      @merion297 24 дня назад +1

      @@Unknown27-c6b Absolutely! If you overwhelm the website with 3D. Some reactive 3D text elements, some 3D objects like that bee, or a car, or a house, or a sandwich or pizza, don't kill my $200 PC. (Okay, it'll kill if that pizza is a 3DGS object but it won't if it's just a Polycam-level photogrammetry.)

    • @Unknown27-c6b
      @Unknown27-c6b 24 дня назад +1

      @@merion297 yup 3d object should only used if necessary or client wants it.

    • @merion297
      @merion297 24 дня назад +1

      @@Unknown27-c6b "Every webpage should use 3D these days!" means "Be the client who wants it." 👍
      or:
      "Don't use CRT monitors if you can have LCD monitors just because you know CRT monitors only."
      or:
      "Don't use a cart just because you're used to using a cart. There's the car."

  • @ohhhleonid
    @ohhhleonid 17 дней назад

    Love the video. Super straight forward.

  • @manuelvaal1257
    @manuelvaal1257 14 дней назад

    This guy is a living legend!🤦‍♂️

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

    Amazing 😍 you are best designer and always bring unique style concept content. Keep creating this type of content.

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

    Amazing video. Such clear explanation with real world scenario

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

    This person is a good designer

  • @اريجعيسى-ك4ل
    @اريجعيسى-ك4ل Месяц назад

    Thank you
    You are great 👍👍👍
    Please more video on three js

  • @ArBo-q9x
    @ArBo-q9x Месяц назад +1

    I love your content

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

    Hay quá anh Lùn ơi🎉

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

    Amazing work, absolutely pure gold information.

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

      Thanks for your comment 😍😍

  • @nelsonndukwe7274
    @nelsonndukwe7274 Месяц назад +1

    This is real cool, I was wondering why you didn’t use Gsap scroll trigger to achieve this

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

    Bento design is very fashionable now. Where there is a block... and for example the right quarter is cut out, etc. Please make a video explaining how to lay out such layouts. And preferably, show how to make these blocks in two ways... where the form is placed on the background like SVG, and in the second case where it is cut out with pseudo-elements) If anything, I used Google translator for this message, so forgive me, but I think the gist is clear) Thanks in advance. You are the best.

  • @hamid.developer
    @hamid.developer 2 месяца назад

    i watch your playlist due to this video

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

    Круто, то что хотел узнать 👍

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

    Thanks a lot for this video. Please do another part and show us how to interact with the 3d model with mouse cursor.

  • @masoomsanadi
    @masoomsanadi Месяц назад +1

    excellent.
    but not mobile friendly.
    i was expecting it. 😊

  • @christian-schubert
    @christian-schubert 2 месяца назад

    Well, the positioning choice in the contact section was a ...creative one 😄
    But I get it that this wasn't a tutorial on UX, so, well done! 👍

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

    really compact and easy to follow tutorial, I have seen lots of Three.js tutorials before but I think this one was the most enjoyable to watch. (despite the AI voice) also "Twee vliegen in 1 klap" as they say in my language (dutch) I am also highely interested in experimenting with gsap. it was also a nice surprise that I was in the video :)
    I do however have my concerns for the mobile layout specificly for the design you showed, isn't that going to be to distracting/covering up to much text?

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

    just amazing content as always!

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

    wow nice you made it to easy for me

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

    bro you are doing amazing work!!

  • @status-200-ok
    @status-200-ok 2 месяца назад

    I leave like and sub, very interesting content, hopefully you upload more videos like this, this fun, a hug.

  • @akshupdf
    @akshupdf Месяц назад +1

    cool man. thanks

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

    Amazing Work!!!

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

    Hoangho this example website is stunning. Really a great job, how you deal with the JS looks too easy. I always struggle with things like that or have to read documentations, tutorials or whatsoever to get me close to what I want. Catch you in the next one. Cheers!

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

      Thanks you so much brother ❤❤

  • @GaganDeep-fy3ev
    @GaganDeep-fy3ev Месяц назад

    Hey, a suggestion on three js that their is a particle animation that take particular shapes on scroll of screen it is amazing you might try teaching it.
    If you don’t get tell me I provide you a link to it.

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

    tks for sharing, really useful

  • @SophiaNyuori
    @SophiaNyuori Месяц назад +1

    I love your work and I can say that I am your number one fan. please can you make a video of where you learnt coding so that I can be like you.

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

    You are great I think u should teach 10-11 hour of css course this will boost your channel and go for javascript believe me u will never regret what I said

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

    We want a Three js tutorial please....
    It will help a lot sir ..
    Lun dev Big fan ❤

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

    youuuuuuuuuuuuuuuuuuuuuuu areeeeeeeee soooooo beautiful Sr !!!! Thanks !!!

  • @Deus-lo-Vuilt
    @Deus-lo-Vuilt 2 месяца назад

    Wow , thanks bro ❤

  • @What-vr9sx
    @What-vr9sx 2 месяца назад

    Bro you are mind blowing

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

    pls start three.js tutorial, bcoz you tell those things which no-one knows❤❤

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

      I will consider making more videos about three js if this video has a positive response from the audience ❤❤

  • @MOINKHAN-d7c
    @MOINKHAN-d7c 2 месяца назад +2

    You save my designing time a lot thanks u I request you to make a gsap video🎉🎉😊😊

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

      Thanks for watching my content brother

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

    Super los proyectos en ThreeJs

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

    Please make Basic to Advance 3js Tutoral to understand better ThreeJS properly to use in project. Thanks in advanced

  • @ShehrozeEhsan-i4o
    @ShehrozeEhsan-i4o 2 месяца назад +1

    Please add JavaScript basic to advance course in your playlist

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

    amazing work

  • @Мария-ы4м7у
    @Мария-ы4м7у 2 месяца назад

    Super cool!

  • @m.waseem6616
    @m.waseem6616 2 месяца назад

    Boss need more videos for three js.
    Maybe a start to end crash course.

  • @MustaPha-s4i
    @MustaPha-s4i 2 месяца назад

    I love your vidéo and how explaine i dont learn JS yet byt i Can understund some thing and copy the code and modifier, thanks you ❤❤

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

    What theme are you using its so beautiful!!!

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

    awesome!

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

    absolute fucking killer tutorial

  • @Shubham-fo3md
    @Shubham-fo3md 2 месяца назад

    Hello, I would love to know your vscode configuration and extension you use it looks amazing 😊

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

    Hello, have you ever thought about doing some stuff with some CMS such as wordpress?
    Just curious about it.

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

    Nice tutorial

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

    Thanks bro...I like your videos...I have one small one small note the bee that you used doesn't have eyes😅
    🇸🇩✌️

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

    Wow ..❤❤❤
    How do I create a graphics editor with some commands and shapes using js?

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

    I have questions please highlight my question..
    I learned frontend and still I am working to improve the concept...
    So May I use only Three.js for making more attractive website....

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

    Could be show us some examples with react as well? Ty

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

    love the works, but will like to know how to do this in wordpress

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

    use react three fiber plss, awesome learning

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

    Great stuff

  • @GagandeepSingh-ly1ct
    @GagandeepSingh-ly1ct 2 месяца назад

    hi bro, great work! my concern is if i am trying to change 3d model then the model is not appearing with accurate position and size and not working on scroll too. So do we have to set the values differently for that or am i doing any mistake?

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

    I am looking 👀 more three.js videos. Please upload

  • @r-i-ch
    @r-i-ch 2 месяца назад

    EXCELLENT!
    How does this work with mobile?

  • @SasiKumar-be1yq
    @SasiKumar-be1yq 2 месяца назад

    We want three.js tutorials

  • @caien-t4n
    @caien-t4n 2 месяца назад +1

    Can you make svelte and Gsap tutorial series!?

  • @happyyjourney
    @happyyjourney 2 месяца назад +1

    Can you make video on *inverted border radius*

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

    what theme are you using in vs code its soo coool

  • @iam_bsi
    @iam_bsi 16 дней назад

    Please next version spider, background dark and white

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

    can you create a tutorial of how you styled the page

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

    make a full stack project for beginners please

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

    what are you man!!! 🔥

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

    fire, feel guilty to watch free lol

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

    we need more three.js

  • @Xenadus
    @Xenadus 2 месяца назад +1

    Shouldn't the bee also get smaller when you resize the screen

  • @Meeru-gamming
    @Meeru-gamming 2 месяца назад

    finally Mr Beast Launch a course of Three js

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

    Shader effects next

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

    Bro I have to submit my project after one day , so can you please make a video for a project on HTML AND CSS only
    Please make it, its a humble request.
    I hope that you could understand it because it is for college project marks.

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

    Do you have a way to create a binary rain like The Matrix movie?

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

    amazing

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

      🍭🍭 Thanks brother 😍😍

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

    what VSCode theme and font you are using?

  • @BarfiDevi-f9b
    @BarfiDevi-f9b 2 месяца назад +2

    What are laptop and pc specifications needed for this work asking because want buy laptop in lowest budget

    • @S.R.T-e1i
      @S.R.T-e1i Месяц назад

      30 or 4o thousand minimum

    • @BarfiDevi-f9b
      @BarfiDevi-f9b Месяц назад +1

      @@S.R.T-e1i laptop link?

    • @S.R.T-e1i
      @S.R.T-e1i Месяц назад

      @@BarfiDevi-f9b my laptop name is Acer One14 Backlit Intel Core 11th Gen 1155g7 512 Gb Ssd/Windows 11 Home Z8-415 Thin And Light Laptop you can check this

    • @S.R.T-e1i
      @S.R.T-e1i Месяц назад

      @@BarfiDevi-f9b what's your budget?

    • @BarfiDevi-f9b
      @BarfiDevi-f9b Месяц назад

      @@S.R.T-e1i 30-40 max to max 50-55k

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

    Can you make a video on 3D website more better please 🥺😢

  • @DawoodDawood-px3xp
    @DawoodDawood-px3xp Месяц назад

    can you make the exact animtion in react js?

  • @Supra-q1d
    @Supra-q1d Месяц назад

    can you name the source where you get high quality images

  • @Quotes-IIQ
    @Quotes-IIQ 2 месяца назад

    make a css full course

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

    A design video plzz🤤🤤🤤

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

    Hey Lun , very good video ! I was wondering if I can help you with more Quality Editing in your videos and make Highly Engaging Thumbnails which will help your videos to get more views and engagement . Please let me know what do you think ?

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

    Can I use this code on ReactJS . Please answer

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

    😱

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

    mong anh ra 1 bản tiếng việt ạ

  • @raj-kashyap-developer
    @raj-kashyap-developer 2 месяца назад

    What vs code theme you are using?

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

      Custom. He made a video about it

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

    I tried to follow along but it didn't work. I even got all the code correct but I don't realise what's wrong. Help needed

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

      Do you use live server ?

    • @alsiela3631
      @alsiela3631 29 дней назад

      @@lundeveloper yes I always use live server.

    • @iitsnikk
      @iitsnikk 22 дня назад

      Too ,I downloaded this code everything good but animation not displayed

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

    I downloaded the archive to see the code. For some reason it doesn't work for me. The 3D model isn't displayed at all.

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

      @@hogvarts You need to run the project with the live server extension

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

      @@lundeveloper Thank you very much. It works via the live server. Please tell me why it doesn't work if I open the index right away?

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

      @@hogvarts When opening an HTML file via file://, browsers enforce strict security rules to prevent vulnerabilities. This means the browser does not allow loading JavaScript modules from local files, as it considers them unsafe

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

      @@lundeveloper got it, thank you very much) in general I'm just learning, the java script code is not very clear to me, but it's interesting. thanks again)