Game development with Threejs

Hi guys,

quick question. Is ThreeJS meant for game development or is it’s core more meant for something else e.g. displaying 3d models and or simple webGL stuff? I see so many different libraries out there that are specifically for game development, or so they claim.

I personally have some experience with ThreeJS now and I really like the library and I think you guys are doing a wonderful job on it.

I am thinking about (educational) starting game development on my own since I can do the whole process myself (modeling, animations, coding et cetera) but I cannot really find any “complete” and good tutorials on how to start with ThreeJS if you want to make a proper game in terms of:

  1. How to build up your world e.g. a large world cannot be loaded into your memory in one run, should be done in “parts” within a radios around the player (I recon?)
  2. How to do collision detection e.g. where can you walk, where can you climb, where can you jump over or not
  3. How to do proper bullets physics in terms of bullet drop (the larger the distance the more the bullet drops and reduces speed) and stuff like that

and yeah… obviously hundreds of other things.

Is there any resource that covers this stuff in ThreeJS? I dont mind spending big bucks as long as the source is good and up-to-date.

If anyone has any recommendations I will gladly hear from you :slight_smile:

Best regards

To make it short and simple: three.js is not a game engine. It’s a general purpose 3D library. So many things you need for game development are not provided by three.js. But there are many existing projects (like physics engines e.g. ammo.js) that can be used in combination with three.js.

Where have you read that?

Before choosing your tools, it’s important to know what platforms you want to target. Is this for a web page or a low-end VR headset? Or something like Rift or Vive? If you don’t mind writing your own smart loaders, collisions, HUDs, interface elements, etc, then ThreeJS is a great library to build on. And when you do, you’ll have your own game engine that you’ll understand the guts of (which, depending on what you want, may be preferable to having to tear apart someone else’s game engine to get things the way you want them).

But: ThreeJS runs in Javascript and WebGL which are great for web development but have some major limitations as far as speed and rendering capability compared with C++ engines like Unity or CryEngine. I haven’t yet experimented with using Cordova to bundle a ThreeJS project as an Android or iOS app, but I wouldn’t expect it to be very efficient or fast compared with a game compiled in Obj-C or Java.

To me, use cases for ThreeJS as far as gaming would be limited to relatively low-polygon VR in the browser or possibly with Cordova. However, that still leaves open a lot of possibilities for clever homebrew apps and games with things like the Oculus Quest coming out.

I wrote some thoughts on the topic that may be helpful:

General purpose 3d library seems to be a pretty good description. 3d is a bit ambigous, but so is three :slight_smile:

Checkout this step by step tutorial on how to build games in three.js

https://javascript.plainenglish.io/three-js-tutorial-to-build-your-first-browser-game-ae34bb0d351d

Coupling Threejs with physics libs can get you a long way, for instance Cannon. There could also be benefits in coupling it with React, especially performance-wise.

I’ve made a nightmare stress test to demonstrate this: GitHub - drcmda/scheduler-test It simulates runtime load, 1-2 seconds of it every 2 seconds. Executing it must freeze the tab. But React schedules it practically away. For games on the web it could be a live saver because you can prioritize tasks, just like you can do on a native, multi-threaded platform.

And some mini-examples:

Space shooter: https://i2160.csb.app (sandbox)
Arkanoid under 60 lines of code: Arkanoid under 60 LOC - CodeSandbox
More complex Arkanoid: https://2yqpv.csb.app/ (sandbox)
Ping Pong: Ping-pong - CodeSandbox
Ragdoll physics: Ragdoll physics - CodeSandbox
Minecraft: https://vkgi6.csb.app (sandbox)

Three.js absolutely can be used as a game engine. The issue isn’t that Three.js can’t do it, it’s that very few people have actually committed to building full game systems on top of it. Most people just experiment, build demos, or move on before a real engine or framework emerges.

There have been solid examples that prove it’s possible. For example, Play Spin It! shows how you can build a functional 2D game loop on top of Three.js, and physics-based projects like Cannon.js racing demos show that even complex gameplay is achievable. But instead of building on each other’s work, everyone tends to go off on their own, so we never get a unified “Three.js game engine” that could push things further. Projects like Trigger Rally showed what could be done, but the community rarely aligns long enough to evolve those ideas into something larger.

So yes, Three.js can be a game engine, but it’s not a technical limitation holding it back. It’s fragmentation. If more people collaborated instead of constantly reinventing the wheel, we’d probably already have a very capable Three.js-based game engine by now.