I wanted to share the FPS example I am maintaining. I could not find a code sample that has features I needed so I decided to write my own.
Among other things, it is featuring a basic entity/component system, root-motion handling, it uses ammo.js for static collision handling, triggers (Ghost Objects), player controller, and more complex collision for the enemy character.
Please note that I only tested the project on my PC and Chrome browser and the performance might not be great on other devices.
Nice, especially for an open source, MIT-licensed game-project.
If you added a simple interface with the gamepad API you could make it for mobile too (with a few tweaks).
Another easy improvement would be to abandon the FBX format completely (too heavy) and convert everything to compressed GLB models, plus reduce the texture resolution a lot and compress all textures -137MB textures just for the gun I think they could be reduced to a few MBs with little to no noticeable difference.
Screen shot looks amazing.
Very interested to check it out on the desktop.
I think dlld’s advice about a mobile compatible control would expand its potential exponentially.
Also, thanks for introducing me to three-pathfinding! Very cool repo.
Thanks for the advice dllb,
I will try to implement gamepad API. By the way, do you know any good tool to convert animated FBX to GLB?
GlifTek, I too, found out about the three-pathfinding library recently. I just wish it had some kind of dynamic obstacle avoidance feature as well (for when multiple AI agents chasing the player and overlapping each other).
do you know any good tool to convert animated FBX to GLB?
Unfortunately no, I haven’t found definite solutions about that, as I’m going to make my own models and animations in Blender. From what I’ve seen, it’s a hit-and-miss, unless you own a couple of the (very) expensive 3D software like 3D Studio Max, Autodesk, Maya, and even then you have to find the optimum path to three.js. I’ve done this in the past using trial versions.
Blender’s fbx importer is far from perfect. I tried to import your main character file (mutant.fbx) that is just the mesh, then I imported the walking animation file (mutant walking.fbx) which was bones + animation, and appeared …a tiny skeleton inside his foot. I enlarged it (s + mouse) but it needs to be applied to the mesh in order to control it (which might range from easy, to a lot of work), as when I pressed “space” the bones started moving …without the body.
Then you need to assign the textures one-by-one using nodes, etc (BTW I’m always using exclusively “glTF Metalic Roughness” instead of the default “Principled BSDF” that needs to be downloaded separately, to ensure compatibility with three.js).
In other words, it might be feasible by investing considerable time, but it might also be time consuming, especially if you have many models.
EDIT: Not sure if you can have (or if it’s efficient to have) separate glb bones-animation-only files. If that’s feasible, then you only have to apply the textures properly to the main mesh, which is not a lot of work.
Alternatively, there is a commercial importer for Blender called “Better FBX Importer & Exporter” ($25) that supports importing animated fbx models, but I don’t know any details, although there is plenty of info on the author’s website.
Alternative #2: perhaps it is feasible to export animated gltf models from three.js - as discussed here Exporting Model with animations?
I’m not very familiar with GLTF format but yes, Blender’s default FBX importer does not work very well with skeletal meshes. I tried to convert other FBX files (static meshes) to GLB with Blender but the output sizes were not that different from the original files (few KBs at best), sometimes they even were larger after export. I might try the second or third solution if I have some free time.
I noticed the textures are taking most of the disk space and are the ones that need the most optimization. I reduced gun/hand texture size to 2K but apparently because the mesh was part of a full human model, it occupies very little UV space and will look blurry if I further reduce the texture resolution.
The hand/gun and Mutant models are next and animation files are only a few hundred KBs which I think not worth optimizing further.
EDIT: I found that there is also FBX2glTF which might be worth looking at.
