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.

[@simondev758]

Like & subscribe!

[@canaldojp414]

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

[@simondev758]

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]

Thank you! Liked and subscribed! :)

[@simondev758]

Awesome!

[@aarishchill5571]

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

[@Chadderbox]

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]

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

[@aybak3k]

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

[@Product-Reviews-by-Connor]

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]

Hah thanks, glad you enjoyed it!

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

[@serjmarkelov9915]

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

[@simondev758]

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

[@ThatBigGuyAl]

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

[@cmcdonough2]

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

[@simondev758]

Thanks, got any topics in mind for future videos?

[@DavidCarrizoGuitarra]

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

[@shlemekian]

Very impressive work man. Subbed!

[@simondev758]

Much appreciated!

[@programmingvault3248]

This is really cool. Nice video!

[@simondev758]

Thanks man, appreciate it!

[@davidgordillo9753]

Youre amazing. Great job. Subscribed.

[@RobGregory]

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

[@simondev758]

Never gonna grow up!

[@user-zr7ve3ut5t]

Man, this is awesome. Thumbs up!

[@simondev758]

Thanks! Any suggestions for future topics?

[@user-zr7ve3ut5t]

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

[@matthewlian1122]

This is actually insane. 👌

[@simondev758]

Heh thanks!

[@thanhtikezaw9982]

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

[@simondev758]

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

[@simondev758]

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

[@fantashio]

Great! Keep it up!

[@simondev758]

ty!

[@AmolDalwai]

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

[@simondev758]

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

[@AmolDalwai]

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

[@FitnessChaos]

sick game dude

[@ndubb100]

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]

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.

[@rosdragneel220]

Which softwares are used ?

[@colt-tech]

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

[@simondev758]

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 kzbin.info/www/bejne/eZWwo2iZq5iDn6c 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

[@Tholem98]

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]

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]

@@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]

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]

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]

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.

[@niktopler4250]

Thank god I saw your video on Reddit.

[@simondev758]

Hope you enjoyed it!

[@niktopler4250]

@@simondev758 I definitely did :)

[@denzell5070]

Wow this is amazing

[@simondev758]

Thanks, you work in JS?

[@denzell5070]

@@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]

@@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.

[@ChrisTharpArt]

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

[@simondev758]

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.

[@dabawocks1121]

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

[@simondev758]

Thanks! For a little under 20 years.

[@McWickyyyy]

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]

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

[@rah4254]

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

[@simondev758]

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.

[@zenslabrotory9572]

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

[@akbaruddinkashif]

You're awesome.

[@aliumar7479]

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]

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]

On what editor did u paste the code??

[@aliumar7479]

@@valencefootball9740 visual studio code

[@tanzeelrahman6857]

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

[@simondev758]

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

[@simondev758]

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]

@@simondev758 Thanks a lot!

[@ThunderstruckElectronix]

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]

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]

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

[@kanpekiken2481]

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

[@simondev758]

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]

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

[@jordanwillianmarquespereir9316]

How download this code?

[@SketchpunkLabs]

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]

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

[@SketchpunkLabs]

@@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]

@@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]

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

[@diegodevita5187]

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]

Full source is in the github link in the description.

[@crusherharv3833]

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

[@simondev758]

heh

[@hechmark]

"we need things to DIE"

[@simondev758]

This is true so often.

[@blaykcz]

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

[@simondev758]

How are you launching them? They need to be hosted

[@blaykcz]

@@simondev758 oh, that's the problem😅

[@SUBSCRIBERSWITHOUTVIDEOS-dj7vo]

Is this js or webgl

[@simondev758]

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

[@SUBSCRIBERSWITHOUTVIDEOS-dj7vo]

@@simondev758 ok cool

[@emapta862]

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

[@simondev758]

How are you hosting it?

[@emapta862]

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

[@tseries4050]

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]

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.

[@GioRob]

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

[@simondev758]

I'd happily spend your patreon donation on fancy beers

[@GioRob]

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

[@simondev758]

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

[@GioRob]

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

[@simondev758]

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

[@ehelper8099]

Have you been in any gaming company?

[@simondev758]

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

[@Will-Eves]

This guy is Sebastian Leauge but JavaScript

[@simondev758]

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

[@bansusharma5330]

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

[@simondev758]

Github

[@anyentinh]

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

[@simondev758]

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

[@veenak2283]

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

[@simondev758]

It's all in the github link in the description

[@superstargazer923]

bro please give the code

[@roninentertainment5808]

can i get the code pls

[@simondev758]

It's in github

[@jyotishelar788]

Can u give code of this

[@simondev758]

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

[@invictuz4803]

Just a couple o hours eh?

[@simondev758]

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

[@imadelherradi3209]

nice work man can you send me this code please

[@simondev758]

Just take it, it's on github

[@valencefootball9740]

tutorial pls

[@simondev758]

Like a longer version of this one?

[@valencefootball9740]

@@simondev758 yeahhhh

[@valencefootball9740]

@@simondev758 like line by line

[@aarishchill5571]

where"s the code man!!!

[@simondev758]

On github.

[@aarishchill5571]

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

[@simondev758]

@@aarishchill5571 github.com/simondevyoutube/Quick_Game1

[@aarishchill5571]

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

[@superstargazer923]

Bro please give script codes

[@simondev758]

It's on github.

[@superstargazer923]

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

[@aarishchill5571]

atleast give a written game code man ?