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

1 Like

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.

2 Likes

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.

1 Like

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:

1 Like

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)

2 Likes