I Tried Making a 3D Game in JavaScript

Ғылым және технология

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
In this project I tried to build a little a 3d game in JavaScript out of mostly older tutorial code. I took code from the previous boids and 3d world generation projects, bolted on some free assets from Sketchfab and put together some quick gameplay. It wasn't that difficult and could serve as a nice jumping off point for someone else looking to make a similar game.
Just treat this as a jumping off point for your own projects, there's lots of improvements you could make here, adding more weaponry and ship types, customizations, enemies, etc. But this can help you understand how to use Three.js to get started, load a few models, and get the basic bones of a 3d space shooting game underway.
Full source code for the project is available, so if you're interested in fiddling with the code, screwing around with it, or improving it.

Пікірлер: 147

  • @simondev758
    @simondev7584 жыл бұрын

    Like & subscribe!

  • @canaldojp414

    @canaldojp414

    3 жыл бұрын

    which videos I have to watch to create a game like that?

  • @simondev758

    @simondev758

    3 жыл бұрын

    Full source is available, so go through it carefully and learn as much as possible. Probably should learn as much as possible if creating complex games is your goal.

  • @hamzzashaffi

    @hamzzashaffi

    3 жыл бұрын

    Thank you! Liked and subscribed! :)

  • @simondev758

    @simondev758

    3 жыл бұрын

    Awesome!

  • @aarishchill5571

    @aarishchill5571

    3 жыл бұрын

    @@simondev758 bro i need your source code can't find it.

  • @Chadderbox
    @Chadderbox4 жыл бұрын

    This guy is a javascript wizzard. He is here making 3d games with it, and I can't get my website elements to load in in a certain order.

  • @simondev758

    @simondev758

    4 жыл бұрын

    Honestly I have no idea how to make website elements load in a certain order either.

  • @aybak3k

    @aybak3k

    3 жыл бұрын

    @@simondev758 😂😂😂 good to know we r not dumb

  • @Product-Reviews-by-Connor
    @Product-Reviews-by-Connor3 жыл бұрын

    This is seriously awesome. I've spent the past month trying to figure out how to create exactly this. You're basically half way to creating a JS version of No Man's Sky. Would love to see how to generate even more types of celestial objects like nebulas, galaxies, space debris, etc. Keep up the good work!

  • @simondev758

    @simondev758

    3 жыл бұрын

    Hah thanks, glad you enjoyed it!

  • @Christiancabp
    @Christiancabp Жыл бұрын

    Can I just say this is amazing..! thanks for dropping this i recently started learning three.js and i love it im definitely building this.. thank you!

  • @ThatBigGuyAl
    @ThatBigGuyAl3 жыл бұрын

    Dude, you’re a wizard. Just liked and subscribed!

  • @serjmarkelov9915
    @serjmarkelov99153 жыл бұрын

    Your content is pure gold for me! Finally youtube suggested something worthy to me Thanks man ;)

  • @simondev758

    @simondev758

    3 жыл бұрын

    Glad you enjoyed it! Let me know if you've got any ideas for future content.

  • @cmcdonough2
    @cmcdonough23 жыл бұрын

    I enjoy your content straight to the point and very informative. Thanks

  • @simondev758

    @simondev758

    3 жыл бұрын

    Thanks, got any topics in mind for future videos?

  • @DavidCarrizoGuitarra
    @DavidCarrizoGuitarra3 жыл бұрын

    I think you're great and the game looks awesome!

  • @shlemekian
    @shlemekian4 жыл бұрын

    Very impressive work man. Subbed!

  • @simondev758

    @simondev758

    4 жыл бұрын

    Much appreciated!

  • @programmingvault3248
    @programmingvault32484 жыл бұрын

    This is really cool. Nice video!

  • @simondev758

    @simondev758

    3 жыл бұрын

    Thanks man, appreciate it!

  • @davidgordillo9753
    @davidgordillo97532 жыл бұрын

    Youre amazing. Great job. Subscribed.

  • @user-zr7ve3ut5t
    @user-zr7ve3ut5t3 жыл бұрын

    Man, this is awesome. Thumbs up!

  • @simondev758

    @simondev758

    3 жыл бұрын

    Thanks! Any suggestions for future topics?

  • @user-zr7ve3ut5t

    @user-zr7ve3ut5t

    3 жыл бұрын

    @@simondev758 I just discovered your channel yesterday, so I didn't have time to watch a lot of your videos and therefore I don't know what topics you have already covered. But anything related to game development would be cool. :D

  • @RobGregory
    @RobGregory3 жыл бұрын

    Pew Pew Pew, love it, no matter how professional you are... still a kid ;o)

  • @simondev758

    @simondev758

    3 жыл бұрын

    Never gonna grow up!

  • @ndubb100
    @ndubb1004 жыл бұрын

    Whoa pretty awesome that it can be written in js... would be really cool to make that multiplayer. Is that running in the browser? I would imagine running into performance issues but maybe newer engines can handle it?

  • @simondev758

    @simondev758

    4 жыл бұрын

    Yeah, I remember doing this kinda thing in C++ and it would take weeks to get to this level. This is all running in browser, on my desktop from 2014, so it should run fine on pretty much anybody's system.

  • @matthewlian1122
    @matthewlian11223 жыл бұрын

    This is actually insane. 👌

  • @simondev758

    @simondev758

    3 жыл бұрын

    Heh thanks!

  • @thanhtikezaw9982
    @thanhtikezaw99823 жыл бұрын

    i have never thought javascrpt would be powerful that much btw i subscribed

  • @simondev758

    @simondev758

    3 жыл бұрын

    Awesome, yeah JavaScript can do a lot. Got anything you'd like to see in a future video?

  • @simondev758

    @simondev758

    3 жыл бұрын

    @Techno Gamerz Just check out my playlists, stuff should be categorized in there.

  • @ChrisTharpArt
    @ChrisTharpArt4 жыл бұрын

    Looks great! So are you actually working your way to a NMS like game?

  • @simondev758

    @simondev758

    4 жыл бұрын

    I'm.. making random things. I'm not sure where this is headed at the moment, I just had the ingredients for something so decided to try throwing it together.

  • @Tholem98
    @Tholem983 жыл бұрын

    Cool!!! Can you please explain how handle a presentation scene and a game scene. I'm building a game in threejs and I couldn't find any example about that. Thank you, I really like your content

  • @simondev758

    @simondev758

    3 жыл бұрын

    In my latest video, I added a main screen (that happened to have a login screen). Is that along the lines you're thinking of?

  • @Tholem98

    @Tholem98

    3 жыл бұрын

    @@simondev758 I was thinking about that animated scene where whe can know the character and the story. But I'll take a look of that main screen. Thank you

  • @leg8519
    @leg85193 жыл бұрын

    insane. whatever whoever is paying you for whatever you do, it isn't enough. QUESTION though: how can I animate an object (like the starship destroyer) to move or rotate? I'm used to having an 'animate' function which makes it really simple, but I can't find anywhere in the code to throw a position or rotation update in

  • @leg8519

    @leg8519

    3 жыл бұрын

    also, I loaded up a new ship and translated it to be in frame (in main.js), but the axis is screwed up now, anybody know what to do?

  • @simondev758

    @simondev758

    3 жыл бұрын

    I rely mostly on Patreon :) You're trying to animate an object, in this code? You need to look at the main game loop, so check out the "OnStep(timeElapsed)" function. Every entity gets time per frame to perform any updates it needs to do, including animation.

  • @dabawocks1121
    @dabawocks11213 жыл бұрын

    Wow this is awsome just by using js. Btw, how long have you been programming?

  • @simondev758

    @simondev758

    3 жыл бұрын

    Thanks! For a little under 20 years.

  • @fantashio
    @fantashio3 жыл бұрын

    Great! Keep it up!

  • @simondev758

    @simondev758

    3 жыл бұрын

    ty!

  • @AmolDalwai
    @AmolDalwai3 жыл бұрын

    great work ..even i tried making a 3d js game without using any js libraries like three.js on my channel

  • @simondev758

    @simondev758

    3 жыл бұрын

    Nice man, I'll check it out! Have you thought about using something like three.js?

  • @AmolDalwai

    @AmolDalwai

    3 жыл бұрын

    @@simondev758 yes ..I will try it next time

  • @FitnessChaos
    @FitnessChaos3 жыл бұрын

    sick game dude

  • @McWickyyyy
    @McWickyyyy3 жыл бұрын

    I’m having a hard time implementing FPS controls in three.js. I have tried to use their docs but I have no idea how to actually implement the FirstPersonControls.js file. I’m coming over from Babylon.js. I wanted to test three.js out. Babylon is a lot easier for camera controls out of the box. But I really like three.js overall code structure and documentation.

  • @simondev758

    @simondev758

    3 жыл бұрын

    I have a minecraft clone that I did that has fps controls, look for that.

  • @niktopler4250
    @niktopler42503 жыл бұрын

    Thank god I saw your video on Reddit.

  • @simondev758

    @simondev758

    3 жыл бұрын

    Hope you enjoyed it!

  • @niktopler4250

    @niktopler4250

    3 жыл бұрын

    @@simondev758 I definitely did :)

  • @denzell5070
    @denzell50703 жыл бұрын

    Wow this is amazing

  • @simondev758

    @simondev758

    3 жыл бұрын

    Thanks, you work in JS?

  • @denzell5070

    @denzell5070

    3 жыл бұрын

    @@simondev758 No, not yet. It's my main dream. I've been coding since February and finished a Full-Stack (MERN) bootcamp end of August. I'm fascinated with JavaScript. I didn't even know this was possible with it. I enjoy these videos.

  • @simondev758

    @simondev758

    3 жыл бұрын

    @@denzell5070 That's great, happy to hear you're on your way. Let me know if you want any specific topics covered, don't claim to know everything but I've been coding for 20 years (mostly C++/python) so I can give it a shot.

  • @rah4254
    @rah42544 жыл бұрын

    How long did it take for you to do this and figure everything out etc?

  • @simondev758

    @simondev758

    4 жыл бұрын

    Couple hours to get some basic gameplay up and merge in code from previous projects, with a ship firing and things blowing up, and the little hud. Then a couple more to screw around with loading gltf's from sketchfab, try to polish some other things.

  • @akbaruddinkashif
    @akbaruddinkashif3 жыл бұрын

    You're awesome.

  • @ThunderstruckElectronix
    @ThunderstruckElectronix3 жыл бұрын

    How long would it take to Learn js to the point where you can make a proper game. Are we talking senior developer with 5 years of working experience, or a few months learning frome home if you're dedicated?

  • @simondev758

    @simondev758

    3 жыл бұрын

    Guess it depends on how you define "proper" :) I don't think you need to be crazy experienced to make a proper game, I'm sure you can point out a few games with simple mechanics, polished well, that have made a tonne of money. Minecraft and Flappy Bird come to mind. Flappy Bird could be made by anybody. Getting a Minecraft clone out for an experienced dev takes less than a day for basic gameplay, so let's say a couple weeks for an inexperienced one. But you're not making the next "No Man's Sky" as a complete beginner.

  • @ThunderstruckElectronix

    @ThunderstruckElectronix

    3 жыл бұрын

    @@simondev758 ok, ty for answering👍 I guess I'll see for my own soon enough :)

  • @colt-tech
    @colt-tech3 жыл бұрын

    When i open index.html the screen is blank is there some way that you have to start the game?

  • @simondev758

    @simondev758

    3 жыл бұрын

    Unfortunately just opening it directly isn't going to work. These tutorials are generally aimed at development, so you need to actually set yourself up like a developer would. Easiest way is to watch kzread.info/dash/bejne/dZiB1Jecppa2mag.html where I outline my setup, or you can read through this github thread where someone had the same issue: github.com/simondevyoutube/MinecraftClone/issues/1

  • @kanpekiken2481
    @kanpekiken24813 жыл бұрын

    I’m having trouble figuring out how you got yourself a chase camera

  • @simondev758

    @simondev758

    3 жыл бұрын

    Through the magic of forgetting to explain that part :( Coincidentally, I have a camera explainer scheduled for tomorrow, and I go into more depth into a follow/third person camera in the video after that (still editing it).

  • @kanpekiken2481

    @kanpekiken2481

    3 жыл бұрын

    @@simondev758 I got it to work through the magic of trial and error lol but I’d love an explanation !! Looking forward to it

  • @diegodevita5187
    @diegodevita51873 жыл бұрын

    love this , you are a genious, the only down side is that I cant find a mistake that I have made. It ould be great if you could send over the source code so I can see where I went wrong.Y

  • @simondev758

    @simondev758

    3 жыл бұрын

    Full source is in the github link in the description.

  • @aliumar7479
    @aliumar74793 жыл бұрын

    how do i run it i just copy pasted evrything and i dint understood anything as i am not that familiar with javasript plz help!!!!

  • @simondev758

    @simondev758

    3 жыл бұрын

    Hmm you might need to start with some more beginner tutorials on learning JavaScript in general. There's some videos on my channel that can help you if you have 0 experience with programming, check those out first.

  • @valencefootball9740

    @valencefootball9740

    3 жыл бұрын

    On what editor did u paste the code??

  • @aliumar7479

    @aliumar7479

    3 жыл бұрын

    @@valencefootball9740 visual studio code

  • @rosdragneel220
    @rosdragneel2203 жыл бұрын

    Which softwares are used ?

  • @tseries4050
    @tseries40503 жыл бұрын

    Can i make such games in android using this language! Please sir tell me. And if i can ease suggest an app for this purpose.

  • @simondev758

    @simondev758

    3 жыл бұрын

    You can, although I'm not sure what the state of webgl + webview is. I suspect you're better off just using Unity if you want to do android development, but I can look into this.

  • @crusherharv3833
    @crusherharv38333 жыл бұрын

    Did anyone here except me tried out the code U made me a game man

  • @simondev758

    @simondev758

    3 жыл бұрын

    heh

  • @tanzeelrahman6857
    @tanzeelrahman68573 жыл бұрын

    Where can I get the source code? As I do not think I can find it on Github!

  • @simondev758

    @simondev758

    3 жыл бұрын

    Ya sorry I forgot to upload it, I'll make sure to put it up this morning.

  • @simondev758

    @simondev758

    3 жыл бұрын

    Sorry, I thought you were responding to another video, the source for this has been available on github since June: github.com/simondevyoutube/Quick_Game1

  • @tanzeelrahman6857

    @tanzeelrahman6857

    3 жыл бұрын

    @@simondev758 Thanks a lot!

  • @SketchpunkLabs
    @SketchpunkLabs3 жыл бұрын

    I built a ship controller a while ago in webgl/javascript. For anyone who's interested in the source code and demo. Might be a nice addition to this little game since a lot of its movements are attached to springs, including the follow camera. letsbuild.gg/sketchpunk/space-ship-controller-58im

  • @simondev758

    @simondev758

    3 жыл бұрын

    Nice, if I do a followup, mind if I use this? With credit of course.

  • @SketchpunkLabs

    @SketchpunkLabs

    3 жыл бұрын

    @@simondev758 sure. go ahead. me code, es su code. I know Im gonna be picking away at your terrain / world stuff in the future :)

  • @SketchpunkLabs

    @SketchpunkLabs

    3 жыл бұрын

    @@simondev758 If you like the movements based on springs, here's an older prototype you might enjoy. Trying to build a controller for the Fortnite Hamster Ball. Something like this would be fun to drive around in your terrain environments. fungi.sketchpunk.com/demo/baller/baller.html

  • @simondev758

    @simondev758

    3 жыл бұрын

    Sweet! Very neat this hamster ball thing, I like the idea of driving around the terrain.

  • @emapta862
    @emapta8623 жыл бұрын

    Your content is amazing... But its either lagging a lot in browser or not opening.... Please help

  • @simondev758

    @simondev758

    3 жыл бұрын

    How are you hosting it?

  • @emapta862

    @emapta862

    3 жыл бұрын

    @@simondev758 using git bash...in local host..

  • @jordanwillianmarquespereir9316
    @jordanwillianmarquespereir9316 Жыл бұрын

    How download this code?

  • @hechmark
    @hechmark3 жыл бұрын

    "we need things to DIE"

  • @simondev758

    @simondev758

    3 жыл бұрын

    This is true so often.

  • @zenslabrotory9572
    @zenslabrotory95722 жыл бұрын

    Whats the project name I can't see the code?

  • @blaykcz
    @blaykcz Жыл бұрын

    Idk where is the problem, but any of your 3D js projects doesn't work on my pc

  • @simondev758

    @simondev758

    Жыл бұрын

    How are you launching them? They need to be hosted

  • @blaykcz

    @blaykcz

    Жыл бұрын

    @@simondev758 oh, that's the problem😅

  • @GioRob
    @GioRob3 жыл бұрын

    Honestly...I've never before donated to someone's Patreon...but if I had to, you'd be my FIRST CHOICE

  • @simondev758

    @simondev758

    3 жыл бұрын

    I'd happily spend your patreon donation on fancy beers

  • @GioRob

    @GioRob

    3 жыл бұрын

    @@simondev758 I dare you, I double dare you..seriously set it up and take my monthly donation towards an overpriced beer

  • @simondev758

    @simondev758

    3 жыл бұрын

    @@GioRob www.patreon.com/simondevyt :)

  • @GioRob

    @GioRob

    3 жыл бұрын

    @@simondev758 done ;) here's your 'fancy pants beer' 🍺

  • @simondev758

    @simondev758

    3 жыл бұрын

    @@GioRob Wooo, thanks! I'm buying one tonight!

  • @SUBSCRIBERSWITHOUTVIDEOS-dj7vo
    @SUBSCRIBERSWITHOUTVIDEOS-dj7vo3 жыл бұрын

    Is this js or webgl

  • @simondev758

    @simondev758

    3 жыл бұрын

    Both, this is js using the Three.js library, which is a wrapper around webgl.

  • @SUBSCRIBERSWITHOUTVIDEOS-dj7vo

    @SUBSCRIBERSWITHOUTVIDEOS-dj7vo

    3 жыл бұрын

    @@simondev758 ok cool

  • @Will-Eves
    @Will-Eves3 жыл бұрын

    This guy is Sebastian Leauge but JavaScript

  • @simondev758

    @simondev758

    3 жыл бұрын

    Working to improve, creators like Sebastian set a high bar on presentation.

  • @veenak2283
    @veenak22833 жыл бұрын

    Can you pls give the source code for this...

  • @simondev758

    @simondev758

    3 жыл бұрын

    It's all in the github link in the description

  • @bansusharma5330
    @bansusharma53303 жыл бұрын

    I am unable to find the source code plz help.....:)

  • @simondev758

    @simondev758

    3 жыл бұрын

    Github

  • @ehelper8099
    @ehelper80993 жыл бұрын

    Have you been in any gaming company?

  • @simondev758

    @simondev758

    3 жыл бұрын

    Yeah, I've spent quite a few years at various studios 🙂

  • @superstargazer923
    @superstargazer9233 жыл бұрын

    bro please give the code

  • @anyentinh
    @anyentinh3 жыл бұрын

    Can you make a tutorial video of making the galaxy background or enviroment like your video pls Subed

  • @simondev758

    @simondev758

    3 жыл бұрын

    They're just downloaded off a free site, don't recall where now though.

  • @jyotishelar788
    @jyotishelar7883 жыл бұрын

    Can u give code of this

  • @simondev758

    @simondev758

    3 жыл бұрын

    Oops, code coming as soon as I'm at home.

  • @roninentertainment5808
    @roninentertainment58085 ай бұрын

    can i get the code pls

  • @simondev758

    @simondev758

    5 ай бұрын

    It's in github

  • @invictuz4803
    @invictuz48034 жыл бұрын

    Just a couple o hours eh?

  • @simondev758

    @simondev758

    4 жыл бұрын

    Hah although I don't count all the hours that went into the previous tutorials :)

  • @imadelherradi3209
    @imadelherradi32093 жыл бұрын

    nice work man can you send me this code please

  • @simondev758

    @simondev758

    3 жыл бұрын

    Just take it, it's on github

  • @valencefootball9740
    @valencefootball97403 жыл бұрын

    tutorial pls

  • @simondev758

    @simondev758

    3 жыл бұрын

    Like a longer version of this one?

  • @valencefootball9740

    @valencefootball9740

    3 жыл бұрын

    @@simondev758 yeahhhh

  • @valencefootball9740

    @valencefootball9740

    3 жыл бұрын

    @@simondev758 like line by line

  • @aarishchill5571
    @aarishchill55713 жыл бұрын

    where"s the code man!!!

  • @simondev758

    @simondev758

    3 жыл бұрын

    On github.

  • @aarishchill5571

    @aarishchill5571

    3 жыл бұрын

    @@simondev758 what's the name of that source code ??

  • @simondev758

    @simondev758

    3 жыл бұрын

    @@aarishchill5571 github.com/simondevyoutube/Quick_Game1

  • @aarishchill5571

    @aarishchill5571

    3 жыл бұрын

    @@simondev758 Thanks man !! So nice of you thankyou.

  • @superstargazer923
    @superstargazer9233 жыл бұрын

    Bro please give script codes

  • @simondev758

    @simondev758

    3 жыл бұрын

    It's on github.

  • @superstargazer923

    @superstargazer923

    3 жыл бұрын

    @@simondev758 bro but I can’t find the file please give the link to the files (codes).

  • @aarishchill5571
    @aarishchill55713 жыл бұрын

    atleast give a written game code man ?

Келесі