Whether you decide to start learning to create 3D content on the web or you are choosing a tech stack for a new web project with 3D in it - you will face a choice of several technologies you could use.
I’m here to help with that! I’m writing about my experience with Three.js and Babylon.js, which are among the more popular 3D JavaScript libraries, so that should help you make an informed decision if these two are on your radar.
To put in the analogous view, the comparison is similar to comparing React and Angular where Three.js is similar to React - with its minimum feature library approach - compared to Babylon.js, which is a framework with a full feature approach.
Let’s dive right into it!
Pros:
- Lots of examples, git repositories, and tutorials
- Easy to start
- Big community
- Lots of Stack overflow and forum posts for common issues
- Hard to debug
Cons:
- Unstable API
- Shallow documentation
A really strong point for Three.js is a large number of community resources. So if you are starting from a good resource, development can be kicked off pretty quickly.
The usual developer experience when it comes to it, is generally a lot of experimenting, reading through forum posts (which often contain outdated information/solutions due to the unstable API) and adapting code from examples.
Another problem with the unstable API is that when I would try to implement features from tutorials or GitHub repositories I often find myself having to update the code to work with a newer version of Three.js - which is not documented very well in official docs.
In one case when I implemented HDRI lighting into a project, a class called PMREMGenerator was not documented at all(at the time) and a lot of time was spent figuring out a working implementation through trial and error and a forum post or two.
Three.js tends to have better performance compared to Babylon out of the box, but with lower quality.
Pros:
- Stable API with a focus on backward compatibility
- Very good documentation
- All issues get solved within 24h
- Easier to debug with the inspector
- Lots of tools (playground, node material editor, animation curve editor, GUI editor, and Spector.js)
- More AR/VR features
- In general more tools already in the framework
- Supported by Microsoft
Cons:
- Higher learning curve
- Documentation takes some getting used to
- Smaller community
- Fewer examples
Babylon’s strongest point is the stable API and detailed documentation. For most features, there are explanations of the how and why for the features and API docs for the classes.
Once you get through the learning period of Babylon and get somewhat comfortable - that’s when it truly shines. My experience is that I had a lot more moments where bigger features were much easier to implement and they worked out of the box.
The general developer experience includes looking through the documentation, playgrounds and adapting code from examples (much less often than three.js).
When implementing features you will find that you are much less likely to find something similar due to the smaller community, but you will have the tools you need to build it from scratch.
My experience is that I spent a lot less time wrestling with Babylon itself and more time-solving problems or implementing features.
I recommend choosing Three.js if you are just getting started with 3d on the web and you want to implement some simple elements to a website or just display some assets with not much interactivity and in general for small to medium-sized projects. If you are doing artistic 3d visualizations it is very likely you will find a good starting point in an example/tutorial which I would also recommend going with Three.js.
I would recommend Babylon.js for almost all 3d browser game projects since Babylon is a game engine with a lot of features that you would need for developing a game. Projects like configurators, tour experiences, and AR/VR. Building stuff from scratch that there are no examples of I have found to be easier and faster with Babylon due to the very detailed documentation.
I suggest researching which libraries and code examples exist before making the final choice as these can significantly reduce development time.
For example, if you need html/css in 3D, Three.js has better support and in the case of a configurator, Babylon has gizmos which are great for the user moving, rotating and scaling objects. Features like these can be critical for a project so make sure to do your homework. :)
