Needlessly 3D Chrome Dinosaur Game (JavaScript/Three.js)

Follow me on:
Twitter: / iced_coffee_dev
Github: github.com/simondevyoutube/
In this project I tried making the Google Chrome Dinosaur Game in 3D and JavaScript/Three.js. I took a bit of code from previous tutorials, like the model loading code, the rest like gameplay is all from scratch.
We build the game pretty much from scratch, starting with a basic empty scene, building out the endless runner gameplay to match the original Chrome Dinosaur Game. Add scores, some background assets, scenery, load a few GLTF assets, and polish it a bit using some examples from the three.js examples site. This isn't perfect, but hopefully will give you a basic understanding of putting together a small game using three.js.
What I'll cover:
* Getting basic t-rex run gameplay up and running.
* Loading GLTF and FBX model assets
* Detecting collisions using Box3
* Using HTML as UI
Like always, full source is available, just check the github repo. Go ahead and do whatever you want with it.
Various clips/assets from:
Quaternius has a lot of free 3d model assets on their site, check them out!
quaternius.com/
Fonts from Google
fonts.google.com/

[@pandawoan]

this channel is so underated! I love this channel!

[@simondev758]

Thx! Let me know if you have suggestions for future vids too.

[@valencefootball9740]

ikr!

[@weaver3636]

Your voice is kinda soothing idk why. I know this is not a tutorial but I still managed to learn something despite being a complete beginner so thanks.

[@saylilad1261]

Just found this gem of a channel for 3.js. loved it and now gotta try it thanks a ton 🙋‍♀️

[@anthonytonev1357]

Amazing content. Very happy to get it in my recommendations. I'm watching everything now and I love the algorithm analysis in the videos. Keep it up.

[@BROZILLATV]

best channel recommendation this year, hands down

[@creaky2436]

Please do more of the hands on games and coding ones with javascript. You’re an animal! 😊

[@tehraptor1621]

your casual javascript wizardy is amazing. I am obviously also partial to this video for your taste in dinosaurs as well.

[@simondev758]

😀

[@kanpekiken2481]

You’re making the greatest videos. I was just thinking about creating this and you just code it with all these other videos 😂 I hope to get to your level one day.

[@simondev758]

No reason you can't, and hopefully I can help you get there.

[@kanpekiken2481]

@@simondev758 I just have no idea how you can just code it all like that. Any tips? I often get stuck because of my lack of experience and am not sure how to tackle road bumps

[@simondev758]

Time, practice, experience. Despite the proliferation of youtube videos and "learn JS in 5 minutes" type of stuff, it's just that. I mean, most of the time I see those kind of videos or articles, they're by people I would barely consider intern level. Take on small projects, learn not just to code but to design and plan. Need a t-rex game, what goes into that? You need to build a game loop, you need to build abstractions around objects in the scene, you need a way to capture input, you need to check collisions, etc. Mash it all together, even if its ugly. Make it work. Then go back, build it again using what you learned the first time. Then build something else. Learn some new patterns, fail a few times. Failing isn't bad. Then come back, build it yet again, even better this time. Repeat until dead or retired. I've known a lot of engineers from my time in game development and being a tech lead at Google. I can't say I can point at one who didn't put in years and years of time and effort to build up their skills. It takes time. Sorry, this was a bit of a ramble/brain dump.

[@kanpekiken2481]

@@simondev758 no no don’t apologize for these long replies. I really appreciate them. I just feel like school failed me when it came to building projects. Everything was always planned out for us with assignments. I’m starting projects and doing all the planning but I’ll get stuck on actual creating the chase camera for example, it wasn’t until you made the video that I was able to implement it.

[@simondev758]

What kind of school are we talking about here? High school? College?

[@amitmatalon]

Great as always! That pixel dragon though 😍

[@simondev758]

Hah yeah not my best work...

[@armanzanjani9545]

I don't know anything about game development but I enjoy watching your videos:)

[@merahabdelhafid8586]

That so good . Just wow professional man

[@sweetelena]

Normal dev: Making this look better SimonDev: Making this still look even more less bad

[@simondev758]

Can I... use that line

[@mRWiil]

awesome works!! amazing

[@huydh]

Fantastic! I learned a lot, thank you :)

[@simondev758]

Awesome, great to hear :)

[@seanlowe7443]

Love watching these videos, watched the RPG one recently and had an idea: why not throw it into one of the quick JS desktop app frameworks. I used Tauri. It was minimal work to throw your JS code into a Tauri app and then I had a working standalone application running off pure JS. If you wanted to make small apps for fun and release them as such, that would be an easy way to do it!

[@ElijahIsMe]

Great video! Underated channel for sure. I love seeing the things people can make with three.js. I'm still a complete beginner when it comes to programming. Im self taught, and I know some javascript, python, c#, css and html, enough to make a basic unity game or basic website, but when I see some of the things people can do with three.js I feel like im still so far away from that skill level. Ive been fortunate enough to have the time and ability to practice coding for 11-13 hours a day the last 2 weeks and hopefully into the future, and ive already learned more than I had in the last 2 years of very rare coding practice, with long breaks, so I know its just about time, but its overwhelming how much there is to learn, (especially when you kind of suck at math because you didnt pay attention in high school). How did you learn to code? And do you have any advice for a learning plan, or is it all about putting in the time? Again, I love the videos, keep it up!

[@simondev758]

I can put together a super rough learning plan, if you let me know what you've studied thus far. But in reality, it's just time spent. There's no secret. You sound like you're on the right track.

[@ElijahIsMe]

@@simondev758Thanks for the reply, so far ive been studying front end web development, i havent been jumping too far ahead, just practicing the basics and learning/relearning some javascript, html, css etc. Three.js is something id love to use to do some cool front end design but I know its too far from my skill set right now. The only thing I wonder is if im learning things in the correct order, I began learning bootstrap to help me keep the elements in order when resizing the browser but right after I came across a video saying that you shouldnt use frameworks like bootstrap to make it any easier or more efficient. So im starting to feel kind of lost as to what my next step should be.

[@alvarolloret948]

Thanks for the video! Really cool 💜

[@simondev758]

Glad you liked it!

[@your-the-tech-talks]

This is awesome !!!

[@simondev758]

ty!

[@Hari983]

That was incredible

[@EvOrz0]

i realy love this channel

[@irfanmehmood3352]

Keep up your great work! Thanks

[@simondev758]

Thx, will do! Let me know if you have suggestions for future vids too

[@TheSairenSA]

if you also want to make it more performant and less resource intensive, you can implement LODs for the models that you've used.

[@simondev758]

That's a good idea, although for this project I used Quaternius's assets, which are already low poly. But a great suggestion in general and something I've implemented in bigger projects and major games I've worked on.

[@ihaznoname7446]

Hey SimonDev, great content! Do you plan to setup some kind of patreon or trello board and take requests for topics? I'm willing to pay to learn more about topics related to procedural world generation and performance optimisations. Trying to learn game dev in my free time and I found your videos really helpful. Also do you plan to stay with Javascript and Three.js or would you consider building something in Unreal Engine or C++? Loved your 3D World Generation series!

[@simondev758]

I've been thinking of ways to solicit feedback better, right now it's mostly through comments here. Patreon or something similar might be good, I'll have to look into it. Came to the right place for performance optimizations, I specialized in that in games and at Google. I have more topics in that general area queued up, along with continuing on with the procedural world generation serieis. I'm not incredibly attached to JavaScript. Have been meaning to try out Unity and Unreal for some projects. Mostly waiting for this pandemic to end so I actually have free time at home to work on things.

[@ihaznoname7446]

@@simondev758 Thanks, looking forward!

[@TheBilal354]

awesome video

[@zdenkoklain6386]

Nice! started working on it myself but never managed to finish it 😅

[@simondev758]

Heh, let me know if you go back to it!

[@TheoParis]

You deserve more subscribers :D

[@simondev758]

Heh thx!

[@FadlySansan]

@@simondev758 just subscribed. Want to be a part of a great journey. Trust me, you're going big, at least 10k next month

[@iercan1234]

ok now this is epic

[@simondev758]

ty!

[@andrazvene7004]

Awesome stuff Simon! I was wondering if you could make a video about something you mention at the beginning - "instead of a sensible choice of using a Game engine". Sorry the the bit long text, I tried to keep it concise :D Could you elaborate on when choosing to use Three.js to make a game would be sensible, over using one of the other engines? I.e. some common things I'd expect would be "when you're doing a simple game, with little 3d rendering needed, or you need to interact with web/html, or when game is UI heavy and HTML/Css can be great to combine with it rendering". But I'm really wondering what your opinion/thoughts on this are with your expertise? Main reason I'm wondering about this is because we've been working on a few commercial JS/HTML games - main reasons for those are that we're from web background, and worked on some JS slot games, and it was a smooth transition for us. Also our games were very UI heavy (incremental games), and there was no need for complex object interactions to handle for any game logic, other than some simple top down 2D collisions, which were easy to optimize. Lastly, our games had a ton of frequent UI updates, where we were able to separate logic and UI code easily, to update only specific DOM, and make extensions of features very lightweight and quick to expand on, and generally our main focus was to be able to host the game on web easily. So far it's served us great, and we can re-use a lot of code, but as we're looking into more graphics/animation heavy games in the future, we have to make a decision of if we should stick to vanilla JS and add Three.js into the mix for better rendering, or just make the step to using some Engine (i.e. Godot). Any advice/thoughts on this would be amazing - what are the "general" circumstances/goals of a company to keep using custom code + a rendered like Three.js, vs "just make the damn move towards an Engine"?

[@simondev758]

Wow! Long post heh. Let me dump some random thoughts. So to summarize, your question is what would make me choose web over Unity/Unreal and vice versa? This is a tough question. Random brain dump, may not be in a coherent order. I think your reasoning seems solid. UI heavy games, easy deployment, mostly free tools, no barrier to entry for participants. The web as a platform is powerful and can support quite a bit. There's downsides too, support for features can be sketchy, cross browser support can be painful, browser vendors move slow as hell, you know the drill. What API's do you need, and what level of support are they at in various browsers, those kind of questions. Deciding to build here in 3d also means committing to building out more of the underlying tech and/or tooling, since any "free" engine like Three.js or Babylon.js isn't going to be as feature rich, and likely not as well supported either. For example, I tried to add motion blur to this demo, found one through the three.js forums, only to find it mangled the characters. Why? Who knows. I'd have to look into it myself. Unity (and other game engines), their strengths lie in their tools, on-going support, the (at least the idea) fact you can mostly focus on the game without thinking too heavily about the platform. Getting your stuff compiled into a native format for ios, android, the steam store, whatever is going to be a hell of a lot easier with one of the existing game engines that are basically purpose built for that. For me, I'd probably look at the proposed game design and future direction of development, and see which tech stack it more closely aligns with. If your game and direction line up with the strengths of the web, I see no reason to stick to it.

[@andrazvene7004]

@@simondev758 Yeah sorry, I've got a tendency for making those :D Thanks so much for your equally long reply, much appreciated! Just to clear up one thing, at the end I suppose you meant to say "I see no reason not to stick to it" - as in, if we have good reasons to use web, we should stick to it? I think cross browser support is generally not a big issue anymore - as long as you use a few year old features - i.e. We've recently tried to stick with ES5, but ended up using ES6 anyway, because it didn't affect our biggest market for our newest game - Steam. Which also I was surprised to not run into any bigger issues in building for Win/Mac/linux when using electron to pack, nor have we received any general problems from users. It was a bit steep learning curve when under time pressure, but once you figure it out it's really straightforward. Besides our web tech reasons, the next biggest one is code familiarity, building off old projects, and generally not currently being able to risk a few months switching to new tech. So probably, when we have to make the decision might be best we just try an engine on two, and compare making some simple games with them vs our current practices. Maybe we're overestimating efficiency of our current productivity working off old/tested codebase, so that would be a good test :D Keep up the great videos - you make complicated topics sound so easy and you touch on the essential topics useful for most games. Breath of fresh air vs a ton of "how I made my unity game and am using dev logs to promote it" - nothing against those, but your style is so much more educational, love it! Honestly, I could binge watch the vids!

[@nauvalalzidane8235]

Do you have any ideas how a character runs over infinite tiles in threejs?

[@tomg0]

Very cool!

[@simondev758]

thx

[@swoorp]

Hey Simon, you can go as a guest creator on the Traversy Media channel so more and more people will start to know you...

[@simondev758]

Oh that's awesome, I had no idea. Have you done that before?

[@swoorp]

@@simondev758 I asked Brad Traversy who is the owner of it, but I was not able to upload the videos so I wasn't able to be on his channel. You can email him and ask if he would let you be a guest creator (he will). And I am super hyped to see you there and see your channel grow!!!

[@philippalbrecht9023]

Thats such a good suggestoins. Travesy media is awesome and I think you and Brad would get along

[@hasanusllu]

Thanks! How can run this project on my local and what program can we use it for run?

[@ciomio3703]

sweet !

[@BusinessWolf1]

So.. chrome lets you make an extension to run locally in dev mode. Which means you can have an extension check for the 'offline' message, then on detection replace the page with your game.

[@sonihidayatulloh9242]

Sir, in my computer's browser doesn't work properly, it feels stuck, does it require high specifications for computer ?

[@personofsomething6205]

bro why did you destroy cacti as soon as you jump over them? I felt like they should be destroyed when they are outside of the screen

[@francescotagliavento8081]

could you make a tutorial on it?

[@matthewpalermo4957]

When in doubt: Flex box.

[@simondev758]

I feel like after I learned flexbox, I didn't need to learn any other html. So I didn't.

[@matthewpalermo4957]

While I got your attention, one video topic that I'd love to see explored is order independent transparency, especially in javascript. I've been curious about it ever since i once tried to draw 2 overlapping semi-transparent spheres. Have you ever come across this problem?

[@simondev758]

@@matthewpalermo4957 jcgt.org/published/0002/02/09/

[@skytea2]

Hey man do you think javascript games will ever have a successful future or if you arent using unity/unreal its never gonna work out?

[@simondev758]

To me, JavaScript games inherit the primary strength of the web, which is virtually zero barrier to entry. But those game engines, they have amazing tooling and support. I don't think either are going away in the short term.

[@johnnysunset2740]

Hi SimonDev, I love your tutorials and your content, aren't you considering creating a Patreon account? I've been learning Three.js for two weeks, and with your help, I've been able to code half of my interactive 3D portfolio world during this time! I would like to see and support growth of your channel :)

[@simondev758]

Thx! That's awesome, is it hosted somewhere? I'm happy you're getting so much out of these. Yeah, been meaning to do "something". Not sure what, Patreon has been thrown around a few times in comments. I apparently also quality for KZbin channel memberships now, whatever those are. I'll definitely add something at some point, a little extra cash to buy coffee wouldn't hurt hah,

[@andrazvene7004]

@@simondev758 I'd be happy to support via Patreon as well! Plus, with it you could later easily choose to get a few extra beers by potential project reviews or chats for i.e. higher patreon levels. Not sure if that's your cup of tea, but if you were, and I ran into some issues in the future or was looking to have some special tips on a topic, your style of presentation/teaching would sell it to me immediately!

[@johnnysunset2740]

It's not hosted yet, but I'm going to release it in a month. I'll be happy to add a link here then. :) And I totally agree with @Andrez Vene!

[@dydufjfbfnddhbxnddj83]

What's the GitHub repo name for this project?

[@merlinmonro6764]

🔥

[@simondev758]

heh

[@victorisrael6191]

Also pro at copying and pasting😫😫.............I want to be like you!!!

[@Prosony1]

5:58 what title book on this time?

[@DnKZone]

Link to play?

[@sumanboi]

noicee

[@simondev758]

thx!

[@mr.gullible2506]

When I downloaded the zip and tried to launch the index HTM, it comes up with the starter screen saying no internet but when I try and click it doesn't go into the game. Why would this be

[@simondev758]

Did you just directly open the index.html or did you host the files?

[@mr.gullible2506]

@@simondev758 don’t really remember but I got it to work. I’m very new to JavaScript so this video was helpful although I’ll be trying to make a mobile application with react native and expo. Trying to make a mobile app with three.js and react native could be a cool video idea especially if it implemented user gestures and inputs. I’d be curious to see how complicated something like that would be. I’ve seen some demos/examples and articles about how but I don’t think I’ve seen anyone make a video creating a mobile application like this.

[@P8860]

Nice! github link for this demo?

[@simondev758]

Was lazy, code is up now.

[@P8860]

@@simondev758 How would you go about linking the jumping physics to a character that jumps? Would the jump animation time be based on the jumping input? Or do I adjust the jumping input based on the animation time?

[@gfdgdfgdfgdfggfdgdfgdfgdfg9709]

Not sure why you use three for this project. This is so simple I would rather write it from a scratch. Much more flexible

[@simondev758]

I don't really enjoy writing all the boilerplate to get things going, webgl, loaders, etc. Three is great for that.

[@gfdgdfgdfgdfggfdgdfgdfgdfg9709]

@@simondev758 Indeed if you want to use 3d models you are right. I would just have placed sprites perspectively and zoomed them into the view. In the past I made 3D games, but as a single person team 3D takes too much time and I can be much more creative and fast with 2D. Anyway, very good tutorials you've got here. Digital gold

[@Abdullah080]

why the game looks lagy?

[@inesbenjazia4417]

where i can find this project it doesn't exit on github

[@simondev758]

github.com/simondevyoutube/Tutorial_ChromeDinosaurGame3D

[@hund1267]

Why you make the underscore on the members?

[@simondev758]

I use a mix of naming conventions, trying to be more consistent.

[@Soremwar]

We'd be leaving in 2050 if web devs used more flexbox, no need to be modest

[@piltonswrangbrahma5140]

Js God

[@cmtg461]

3:46 looks like mobile games when you play them

[@hackedxd2813]

Start tutorials like this

[@simondev758]

like what?

[@hackedxd2813]

@@simondev758 I just loved your tutorial series on the basics of three js but nowhere on the web have I seen a full fledged game tutorial, sure I’ve seen videos like this explaining what you did, but for slight beginners like me, could you do an entire walkthrough or like a live stream on this code

[@Sirbearisweird]

1089 points absolutely destroyed the game

[@asadrahman5210]

hey simon . Is there any source code for this game?

[@simondev758]

github.com/simondevyoutube/Tutorial_ChromeDinosaurGame3D

[@atharvagamerz6414]

Where do we get code

[@simondev758]

github.com/simondevyoutube/Tutorial_ChromeDinosaurGame3D

[@atharvagamerz6414]

Can you make a game for me pls

[@mohammeda4872]

If I had a computer I would litrally not understand ANY OF THIS I would just watch some KZbin

[@simondev758]

Err wait, so does that mean because you don't have a computer, you DO understand this?

[@coding-sp]

Minecraft clone not working

[@DonkeyPlanet]

Hello SimonDev, I would like to ask for your advice. I'm making a PS2 Bios "remake" (those spinning, glowing balls) for my website. Reference: kzbin.info/www/bejne/eanOYpp_Z9iaadk How would you do those light trails? I tried the "afterimage postprocessing" but it didn't provide the result that I want. Looking forward to your answer, thank you in advance!

[@simondev758]

First thought would be it's some sort of particle trail. I could do a tutorial on them, but it would be a while before it's out. Found a quick demo online that you can probably dig the source code out of: twitter.com/mrmaxm/status/620590157306142720

[@crimsongaze3303]

Lol. You are funny...

[@simondev758]

🙂

[@Devel0_pers]

src

[@illegallyapollo1637]

The way you say "or even godot" makes it seem like godot is worse than unity and unreal, *OFFENDED*

[@simondev758]

Wouldn't read too much into anything I say. I'm decent at code, but not so great at wording.

[@mrpedrobraga]

I love Godot but I wouldn't say it's the best for a small 3D game. 2D is where it shines!

[@IdealIdeas100]

You said you would fix how the raptor keeps running while being in the air but you never did that! LIAR!

[@simondev758]

Aw man, I did, didn't I?