SimonDev | Needlessly 3D Chrome Dinosaur Game (JavaScript/Three.js) @simondev758 | Uploaded 3 years ago | Updated 3 hours ago
Follow me on:
Twitter: https://twitter.com/iced_coffee_dev
Github: https://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!
http://quaternius.com/

Fonts from Google
https://fonts.google.com/

$I made an EVEN BETTER Minecraft I tried to make Minecraft even better than I did before. 🛒 Recommended books (on Amazon): https://www.amazon.com/hz/wishlist/ls/1IMV0IR3QIZMQ?type=wishlist&tag=simondev01-20&sort=priority&viewType=grid ❤️ Support me on Patreon: https://www.patreon.com/simondevyt 🌍 My Gamedev Courses: https://simondev.teachable.com/ Disclaimer: Commission is earned from qualifying purchases on Amazon links. Follow me on: Twitter: https://twitter.com/iced_coffee_dev Instagram: https://www.instagram.com/beer_and_code/ Github: https://github.com/simondevyoutube/ Here I tried to code Minecraft using JavaScript and Three.js, completely from scratch, to try to fix the problems from the previous implementation. The goal was to try to improve on the previous version, was was mostly a start project to learn JavaScript and three.js. In the previous implementation, I used instancing to get around draw call limits and complexity around merging geometry, but this time I just bit the bullet and did the actual work. I move from there by integrating chunking in the world, followed by multithreading using Chromes module workers extension, which dramatically improved performance. I investigated various ways to texture, wrote custom shaders to atlas all the textures together in a simple way using texture arrays. From there I moved on to using perlin noise for a full, infinite procedural world. Standard perlin noise works great for basic rolling hills, but you need to do operations on it like looping for fractal brownian motion in order to get that detail and different environments. That gives us a procedural world, from there we covered how to procedurally create foliage using signed distance functions and l-systems, which was covered in a previous tutorial. Finally, we went ahead and used layers of perlin noise to create biomes and different areas in the world, as you see in the video. Source will is available on github, or will be when I clean it up. If its not there by the time this is posted, look for an announcement from me either on my community posts or twitter for when the source is available. Various resources: Music: www.bensound.com Inigo Quilezs site is THE reference for stuff like SDFs: https://www.iquilezles.org/www/articles/distfunctions/distfunctions.htm Demo was a horribly modified version of: https://www.shadertoy.com/view/lt3BW2 Model from: https://sketchfab.com/3d-models/minecraft-diamond-pickaxe-b1bc7d6a3db246d5b47449ae2b2706fd AO: https://0fps.net/2013/07/03/ambient-occlusion-for-minecraft-like-worlds/$

I Made a 3D Engine in 1 Day (WebGL/JavaScript)

Wait, so comparisons in floating point only just KINDA work? What DOES work?

Hash Tables, Associative Arrays, and Dictionaries (Data Structures and Optimization)

I Tried Making a 3D RPG Game in JavaScript

Three.js Lighting Tutorial (JavaScript) | Light Types Explained!

Simple Third Person Camera (using Three.js/JavaScript)

How Slow is JavaScript Really? JavaScript vs C++ (Data Structures & Optimization)

I Tried to Make Star Wars Battlefront II in JavaScript

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