ThreeJS Displacement & AlphaMaps - Create a 3D Terrain!

แชร์
ฝัง
  • เผยแพร่เมื่อ 21 ธ.ค. 2024

ความคิดเห็น •

  • @DesignCourse
    @DesignCourse  3 ปีที่แล้ว +105

    Enjoying the Threejs content? I hope you are. EXPECT MORE!

    • @elfatnianass3005
      @elfatnianass3005 3 ปีที่แล้ว +1

      So coooooool thank you

    • @khandoor7228
      @khandoor7228 3 ปีที่แล้ว

      really digging it, ty!

    • @rukkiecodes
      @rukkiecodes 3 ปีที่แล้ว +1

      I love this. Expect more 💯😁

    • @hugabuga-il6125
      @hugabuga-il6125 3 ปีที่แล้ว +1

      Yesssss!!!!! Thank you so much❤❤❤

    • @kevadiyasmart
      @kevadiyasmart 3 ปีที่แล้ว

      hey can you please bring a tutorial on 3d character controlling/movement using keyboard with 3rd person camera view.

  • @TheAgent056
    @TheAgent056 3 ปีที่แล้ว +104

    There's a serious lack of videos on intermediate/advanced threejs on TH-cam, and this man out here filling that void. Absolutely brilliant.

    • @DesignCourse
      @DesignCourse  3 ปีที่แล้ว +25

      This is still beginner level stuff. I can't wait until I can personally learn more and share it!

    • @parthjohar2273
      @parthjohar2273 3 ปีที่แล้ว +1

      Are there any videos at all except the ones from design course?

    • @SergeyNeskhodovskiy
      @SergeyNeskhodovskiy 3 ปีที่แล้ว +2

      Agreed there's a lot of beginner level stuff "create a scene, create a mesh, animate from right to left" but when you want to go advanced and say create your own mesh from scratch, vertex by vertex, create a twist or bend modifier, create morph animations, tweening and inverse kinematics, learn about gimbal lock / quaternion rotation, learn about local / world coordinate system and how they play in nested / child objects, different types of lighting, importing objects, textures and animations from Blender, particle systems, hair and fabric animation, because three.js really has all this stuff and I could go on and on oh and I don't even touch FPS optimization! You're pretty much on your own... An advanced three.js course would be an immediate "shut up and take my money" for me because I seriously need it for my next project but I fail to find one! Learning it the hard way by trial and error so far...

    • @varunbhatt35
      @varunbhatt35 3 ปีที่แล้ว +2

      @@SergeyNeskhodovskiy there is a course named three js journey by bruno simon .. that is an advanced course ..check that out
      Also gary is already in that course and learning from that course and pushing out content here

    • @SergeyNeskhodovskiy
      @SergeyNeskhodovskiy 3 ปีที่แล้ว

      @@varunbhatt35 thank you! Will check it out

  • @zero-id5jr
    @zero-id5jr 2 ปีที่แล้ว

    I usually prefer written content over video but I actually really liked this presentation and got a good feel of how to navigate three.js from this, and I liked that you are too the point and not over the top thanks.

  • @OleksandrDanylchenko2k
    @OleksandrDanylchenko2k 3 ปีที่แล้ว +7

    Could you please add height and alpha maps to the description?

  • @pr0st00
    @pr0st00 3 ปีที่แล้ว +1

    Thanks Gary, I was waiting for more Three.js videos :D

  • @tristangieler
    @tristangieler 2 ปีที่แล้ว

    great tutorial. covered so much stuff that I need to learn to build my landing page in one go. I decided to take the hard route and learn javascript and threejs from scratch to build my website, and your tutorials are a huge help. thanks a lot

  • @ulysse-2029
    @ulysse-2029 3 ปีที่แล้ว +1

    Remember me FLASH AS3 and threeJS , 10 years ago, miss it :D

  • @parthjohar2273
    @parthjohar2273 3 ปีที่แล้ว +2

    Keep sharing next level content brother!

  • @alifarifin8114
    @alifarifin8114 3 ปีที่แล้ว +2

    Thank you so much for these videos... expecting more like these please!!

  • @idku698
    @idku698 3 ปีที่แล้ว +4

    Honestly I've been delaying learning three js but these videos are pushing me to learn...

    • @ormroda
      @ormroda 3 ปีที่แล้ว

      Hello me

  • @mudrank4184
    @mudrank4184 3 ปีที่แล้ว +5

    damnn love it hoping for more content like this

  • @dhruvsharma-l037
    @dhruvsharma-l037 3 ปีที่แล้ว +2

    bro.. where was the height.png
    which you have used in your project

  • @TheRealJuggaloJoel
    @TheRealJuggaloJoel 3 ปีที่แล้ว

    Another great video. Thank you for sharing threejs content.

  • @alvarobyrne
    @alvarobyrne 3 ปีที่แล้ว

    The white background version wasn't that bad! Nice set of tutorials

  • @nadjemtech4963
    @nadjemtech4963 3 ปีที่แล้ว

    I love three.js .now all love 3D
    I support this content
    Please more courses like this
    And how setup 2 scene or more

  • @whoami-so2hy
    @whoami-so2hy 3 ปีที่แล้ว +1

    thanks for sharing this 😁

  • @mohaiminulislamshishir9361
    @mohaiminulislamshishir9361 2 ปีที่แล้ว

    Can you please share all the images that you used her???

  • @jimmyj.6792
    @jimmyj.6792 3 ปีที่แล้ว

    Awesome effect, looks so cool 👍

  • @Asuuri
    @Asuuri 3 ปีที่แล้ว +1

    Damnnn😍😍 I will definitely try this!!

  • @rukkiecodes
    @rukkiecodes 3 ปีที่แล้ว +1

    maybe you can do a video of three.js and vue

  • @ledlogic2
    @ledlogic2 2 ปีที่แล้ว

    Had to go back down to node 16 for run cmds to work.

  • @Raj__001
    @Raj__001 2 ปีที่แล้ว +1

    Thankyou ❤️❤️❤️❤️

  • @Janman81
    @Janman81 3 ปีที่แล้ว +1

    Really cool demo. It would be interesting to try a grayscale version of the texture map as the displacement map.

  • @李源-r2u
    @李源-r2u ปีที่แล้ว

    good share for threejs

  • @kerrykreiter445
    @kerrykreiter445 11 หลายเดือนก่อน

    Very cool effect

  • @eugenioavallone8762
    @eugenioavallone8762 3 ปีที่แล้ว

    Nice tutorial. Is there any tutorial to put online the project? I did a project with three js but i can't put it online on a hosting

  • @shekhargogoi7435
    @shekhargogoi7435 ปีที่แล้ว

    How to fix the 3d model aint working at last its not loading

  • @astitva5002
    @astitva5002 2 ปีที่แล้ว

    is it possible to do this procedurally

  • @CristianAlexandruRadu
    @CristianAlexandruRadu 3 ปีที่แล้ว

    8:32 I guessed the RED color before you applied it (first time when I see this, I didn't scroll back&forth) :))
    a few seconds before, I was absolutely sure you're gonna use red :))

  • @urssounds
    @urssounds 2 ปีที่แล้ว

    Great stuff! 🙏

  • @volkanongun1112
    @volkanongun1112 2 ปีที่แล้ว

    Gary can you send the alpha and height maps to a repo? I'm stuck, dont have the bucks for photoshop :(

  • @alexisgraff2049
    @alexisgraff2049 2 ปีที่แล้ว

    Hello !! One question, there's a way to put an image in each face of a cube?

  • @limuelmendoza5356
    @limuelmendoza5356 3 ปีที่แล้ว

    Keep this going please!

  • @niteshkrsah2222
    @niteshkrsah2222 3 ปีที่แล้ว

    Please make video on admin pannel

  • @param888
    @param888 2 ปีที่แล้ว

    How can I add a plane move with camera so that it always looks same, a square plane appears same as square no matter how much user tweak (mouse move) the mesh or scene?

    • @FuadJalil
      @FuadJalil 2 ปีที่แล้ว

      You will need to use an orthographic camera instead of perspective.

  • @dj2bahador
    @dj2bahador 2 ปีที่แล้ว

    Hey, thank you for the great tutorial, However im hitting an error while trying to load the starter project.
    any ideas how to fix it?
    Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
    ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
    Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /Users/amir/Desktop/threejs-webpack-starter-master/node_modules/postcss/package.json

  • @tatesknights
    @tatesknights ปีที่แล้ว

    i cant delete the node_modules file. please help!!!

  • @leobello3326
    @leobello3326 3 ปีที่แล้ว

    Thank's for this amazing tutorial, do you know why it doesn't work when i try to display it on react project? i put the JS code on function componentDidMount() and nothing appears, i don't have any error on a console

  • @jolls4676
    @jolls4676 3 ปีที่แล้ว

    Looks awesome

  • @thinginthenorth
    @thinginthenorth 3 ปีที่แล้ว

    So awesome.. thanks!

  • @MrSprinklecupcake86
    @MrSprinklecupcake86 3 ปีที่แล้ว

    Hi! Just came across your video while learning Three.JS and it's amazing! Quick question, for the canvas that you're rendering the terrain on, how are you having that not take up the entire window? I'm unable to set the width and height for it... any tips? Thanks in advance!

  • @jianbinhuang9800
    @jianbinhuang9800 3 ปีที่แล้ว

    Can you provide some pictures?

  • @sameerpatelxyz
    @sameerpatelxyz 3 ปีที่แล้ว

    How can I use 3js in wordpress or webflow?

  • @Oss1992swe
    @Oss1992swe 3 ปีที่แล้ว

    Love your videos! Have had such a joy learning THREE.js with your help. Do you plan to make any videos with React Three Fiber? Would love to get more familiar working with THREE in react.

  • @some666some
    @some666some 3 ปีที่แล้ว

    Awsome Threejs tutorials! Thank you! Would love to see some content with multiple scenes in the future.
    Also, I got a bug(?) making this project. Got like a fringe or wave of slices(best I can come up with) going through the textures when the plane rotates to a certain point. It occurred only with material {transparent:true}. After some research and experimenting only fix I could find is moving the camera away from the "wave" location.

  • @doob4611
    @doob4611 3 ปีที่แล้ว

    These videos are great! How do I add a three.js tutorial to my project (html,css) or how do I add the html and css to the three.js and put it all on a local server? I’d like to use what I’ve learnt in tutorials and use them for portfolio projects. Could someone please help. I’m relatively new. TIA 🙂

  • @cliptsix
    @cliptsix 3 ปีที่แล้ว

    I got question if you doing shop design in figma For website and phone you need to do 2 projects 1 for web and 2 one for phone ? @DesignCourse

  • @chidubemgerald8611
    @chidubemgerald8611 3 ปีที่แล้ว

    How do I load 3D meshes and scenes from a mongodb

    • @iagobarretoc8194
      @iagobarretoc8194 3 ปีที่แล้ว

      you probably want to setup a node.js server first. the THREE part is easy, just load the model with Loaders and then add it to the THREE scene itself

  • @sdeske
    @sdeske 2 ปีที่แล้ว

    Very good

  • @veneziagreg21
    @veneziagreg21 2 ปีที่แล้ว

    I can't seem to find PlaneBufferGeometry. I can only find a BufferGeometry, and a PlaneGeometry.

  • @yerco75
    @yerco75 3 ปีที่แล้ว

    Awesome!

  • @bleepblabloop
    @bleepblabloop 3 ปีที่แล้ว

    You’re a boss!

  • @danielradosa
    @danielradosa 3 ปีที่แล้ว +1

    i think we will see Blender tutorial soon XD

  • @gradientO
    @gradientO 3 ปีที่แล้ว

    New haircut is nice

  • @hadjchaibabdelkrim2973
    @hadjchaibabdelkrim2973 3 ปีที่แล้ว

    how to solve vulnerability node js

  • @maazshariff9309
    @maazshariff9309 ปีที่แล้ว

    The best part about him is he makes mistakes while teaching and corrects it then and there

  • @mg-ht9ir
    @mg-ht9ir 3 ปีที่แล้ว +1

    Mobile dev need some one like you plz make some video on adobe Xd and figma for mobile dev

  • @gobajoseph5064
    @gobajoseph5064 3 ปีที่แล้ว +1

    Merci même si je ne comprend pas l'anglais ça m'aide quand mm

    • @cog969
      @cog969 2 ปีที่แล้ว

      Bonjour, j'ai vu ton com. tu as réussi à faire ? tu as Gimp ou Photoshop ? Merci à toi

  • @HuynhLuong227
    @HuynhLuong227 3 ปีที่แล้ว

    Thank you,

  • @jameshagooddesigndevelopme7819
    @jameshagooddesigndevelopme7819 3 ปีที่แล้ว

    is using threejs bad for SEO?

  • @imerycdasilva
    @imerycdasilva 3 ปีที่แล้ว

    How do you get your fonts to render so well on a Windows Device? Are you using a high-resolution monitor? 5K? 4K? Retina-like? What's your secret..? :O

  • @arturlomakin3555
    @arturlomakin3555 3 ปีที่แล้ว

    Cool!

  • @sirwanjaff1050
    @sirwanjaff1050 3 ปีที่แล้ว

    Good sir
    But i need to help please!

  • @jonathanvandenberg3571
    @jonathanvandenberg3571 2 ปีที่แล้ว

    no-one seems to want to try tackle making the canvas responsive for mobile.

  • @metanevis
    @metanevis 7 หลายเดือนก่อน

    Like Again

  • @midoman6659
    @midoman6659 3 ปีที่แล้ว

    Click play.. like the vid.. watch

  • @kttalkZ
    @kttalkZ 3 ปีที่แล้ว

    Hi Gray, I emailed you about a gig, can you check and please reply?

  • @CuriousBehruz
    @CuriousBehruz 3 ปีที่แล้ว

    Hello there my gorgeus Harry why u do dis

  • @Jennifer-ju8de
    @Jennifer-ju8de 3 ปีที่แล้ว +1

    Euhm

  • @erickabryan8959
    @erickabryan8959 3 ปีที่แล้ว

    The melted lunge climatologically clap because teller behaviourally coil out a lean spinach. spurious, dizzy gallon

  • @hoaluu9842
    @hoaluu9842 3 ปีที่แล้ว

    The future futuristic love hemperly increase because israel tellingly glue of a low pillow. infamous, wacky slipper

  • @philliam111
    @philliam111 ปีที่แล้ว

    a lot of the stuff here is deprecated... no more planebuffergeo.. just planegeo, and if you follow this tutorial youll notice a lot of flickering when you change the dislpacementScale values

  • @pittherichkid
    @pittherichkid 3 ปีที่แล้ว +1

    Awesome!