Learn Three.js for Games using TypeScript (modern way)

Поділитися
Вставка
  • Опубліковано 30 тра 2024
  • This is a repost from the main ourcade channel: / ourcadehq
    Three.js is a mature 3D rendering library for the web that we can use to make 3D games! 😎 3D game development can be more complex so this video tutorial will go through the basics by recreating the movement controls of the original DOOM.
    Chapters:
    00:00 Introduction
    00:20 Three.js release notation
    00:45 Create the project with Vite.js
    01:43 Three.js app basics
    02:22 Create a Perspective Camera
    03:27 Adding a Cube
    04:29 Organizing with a Scene Class
    05:02 The Game Loop
    05:50 Loading 3D Models
    07:45 Adding a Blaster Gun
    08:24 Scene Graph Explained
    09:11 Keyboard Input & DOOM Controls
    11:00 Firing Bullets
    13:04 Simple Collisions
    13:40 The Final Result
    Example source code: github.com/ourcade/threejs-ge...
    Next, take a look at the Fundamentals of Bitmasks for Game Dev: • How to use Bitmasks fo...
    Check out the Ourcade blog for more on game development on the web: blog.ourcade.co
    Get started with TypeScript and 2D games with Phaser 3 using this free ebook: ourcade.co/books/infinite-run...
    👾👾👾
    Follow us on Twitter: / ourcadehq
    Ourcade is a playful #gamedev community for open-minded and optimistic learners and developers. 🎮🕹👾🤗 ourcade.co
    #threejs #typescript

КОМЕНТАРІ • 16

  • @harshavarma3269
    @harshavarma3269 2 роки тому +10

    WOW. Thanks for such great tutorial.
    thanks for showing the very beginning setup for project. but the video is super fast at times which i struggled to even pause the video and tried to do it at 0.25x speed. but it is super great for providing such awesome content

  • @tedwardtiny
    @tedwardtiny Рік тому +2

    This is so great. Most comprehensive tutorials. Thank u!

  • @nikitabalakin1498
    @nikitabalakin1498 Рік тому

    Thanks! Very interesting! Great overview!

  • @HuynhLuong227
    @HuynhLuong227 Рік тому

    amazing, thank you. Hope you make more game with threejs

  • @syntheticperson
    @syntheticperson Рік тому +2

    Very insightful.

  • @gohchi
    @gohchi Рік тому +1

    Amazing!

  • @HarpreetSingh-cz2zh
    @HarpreetSingh-cz2zh Рік тому +7

    do you have a course? This content is going too fast. Would love to learn to make a game with Three.js with a proper course.

  • @basepasandhai1906
    @basepasandhai1906 Рік тому

    What's the vscode theme? Is it Atom One dark?

  • @weslleymatheus3643
    @weslleymatheus3643 Рік тому

    hello man, i'm brazilian and i don't think much about Three.js. Could you tell me small codes for me to study?? I can't understand your videos in english, because I'm not fluent. if you can help,

    • @inanitas
      @inanitas Рік тому

      Just learn english. You won't get far with programming anyways if you don't know english properly.

  • @HashLipsAcademy
    @HashLipsAcademy Рік тому +1

    Hey man would love to reach out.

  • @drewatkison4127
    @drewatkison4127 Рік тому

    THis isn't a "game" this is just rendering objects on screen.
    Can you make a tutorial on creating a full on game loop?
    I am having many issues with destroying three.js "groups" from a scene

  • @user-ft1ym8lg7v
    @user-ft1ym8lg7v Рік тому

    Really nice video. One small note- please remove the background sound. It is super distracting when trying to follow your instructions.

  • @Tyrone-Ward
    @Tyrone-Ward Рік тому +1

    Good content, but the music and sound effects are too loud.