3D action browser game made with three.js: Savanna Sam!

Showcase
, ,
1

Hey,

I have spent over a year creating a 3D action game you can play in your browser and have just released the free demo on the game’s website: https://savannasam.com/

The game uses three.js, obviously :wink: to render 3D graphics, animations and to import the GLTF asset files I’m exporting from Blender. Since I’m using compressed binary *.glb files for my assets, I’m using both the GLTFLoader and DRACOLoader in my game to unpack the models during runtime.

I make extensive use of the animation system of three.js, mostly for playing idle animations of NPCs and level objects. The main character of the game is a giraffe flying a tiny biplane :wink: whose neck is reacting to the way the player flies. To achieve this, I’m using the three.js animation system to dynamically add up several poses in real time, giving the main character some fun physics.

To achieve the comic look of the game, I have basically modified the cartoon shader that comes with three.js and adapted it to my needs. I’m also using the cascading shadow map functionality.

On top of that, I implemented a very simple LOD mechanic that switches most level objects and terrain chunks between two versions with different amount of polygons, hopefully helping rendering performance.

I use cannon-es for collision detection, simply copying the transformations for all relevant objects from the three.js objects to the cannon-es objects. I also use three-nebula for particle effects. However, since the library doesn’t seem to be maintained anymore, I had to clone the repository locally and make a few modifications to get it to run.

The game does not only run in the browser, however:

I have used Electron to package the game for Steam:
https://store.steampowered.com/app/3038250/Savanna_Sam/
In fact, the Steam version of the game even runs on the Steam Deck:
https://savannasam.com/#how-to-play-on-steam-deck

And I have used Capacitor to package the game for Android, putting it on the Google Play Store:
https://play.google.com/store/apps/details?id=com.savannasam.demo

You can find more general details about the making of this game over in this development forum thread on itch.io.

Making this game wouldn’t have been possible in this way without three.js. I really appreciate all the work that has gone into this library and wanted to say thank you to everyone involved!

Check out the game if you like, and let me know what you think :smiley:

7 Likes
2

Wow this is really nicely done.

1 Like
3

Thank you, glad you like it! :smiley:

4
  1. Duplicates the asdw and arrow keys.
  2. When you click on the mouse, you fly to where it is. Why do you need keys at all?
  3. When you enter the game options, there is no cross, you can’t exit.
  4. Turn on //new THREE.WebGLRenderer({antialias: true,…
    Good luck with the project.
5

Thank you for your feedback! :slight_smile:

You can exit the options menu by scrolling down and clicking the “Back” button, but adding an additional X button is a good idea! :slightly_smiling_face: