What is three.js and what are its top alternatives?
Three.js is a popular JavaScript library that is used for creating 3D graphics on the web. It provides a wide range of tools and features for building interactive 3D experiences, including support for WebGL, shaders, and physics simulations. However, three.js can have a steep learning curve for beginners and may require advanced knowledge of 3D graphics concepts to fully utilize its capabilities.
- Babylon.js: Babylon.js is a powerful 3D engine that offers extensive features for creating immersive web experiences. It includes support for WebGL, WebXR, physics engines, and more. Pros: Provides a simpler API than three.js, good documentation. Cons: May not have as large of a community as three.js.
- A-Frame: A-Frame is a web framework for building VR experiences with HTML and JavaScript. It is built on top of three.js and provides an easy-to-use declarative style for creating 3D scenes. Pros: Beginner-friendly, good for building VR experiences. Cons: Limited flexibility compared to three.js.
- PlayCanvas: PlayCanvas is a web-based game development platform that uses WebGL for rendering. It offers an editor for creating and publishing 3D content, as well as a scripting language for adding interactivity. Pros: Built-in physics engine, collaborative online editor. Cons: Not as customizable as directly using three.js.
- Whitestorm.js: Whitestorm.js is a 3D framework that aims to simplify the process of creating 3D scenes in the browser. It provides a high-level API for building 3D objects, physics simulations, and more. Pros: Easy to use, modular design. Cons: Limited documentation compared to three.js.
- Cannon.js: Cannon.js is a physics engine that can be used in conjunction with three.js to create realistic physics simulations in 3D scenes. It includes support for rigid body dynamics, constraints, and collision detection. Pros: Optimized for performance, lightweight library. Cons: Requires additional setup when used with three.js.
- GLBoost: GLBoost is a WebGL rendering engine that offers a more low-level approach to building 3D graphics than three.js. It provides support for shaders, materials, and lighting effects. Pros: High performance, flexibility for advanced users. Cons: Steeper learning curve compared to three.js.
- Regl: Regl is a functional and modular WebGL library that can be used to create 3D graphics in the browser. It is designed to be lightweight and efficient, making it ideal for high-performance applications. Pros: Lightweight library, minimal overhead. Cons: Requires knowledge of WebGL concepts to use effectively.
- XEARTH: XEARTH is a framework for creating large-scale 3D geospatial applications in the browser. It supports features like terrain rendering, point clouds, and 3D models, making it suitable for GIS applications. Pros: Geospatial capabilities, extensive documentation. Cons: Specialized use case, may not be as versatile as three.js.
- Goo Create: Goo Create is a web-based platform for building 3D content that can be run in the browser. It provides a visual editor for creating scenes and assets, as well as a JavaScript API for adding interactivity. Pros: Visual editor, beginner-friendly. Cons: Limited customization compared to using three.js.
- Verge3D: Verge3D is a toolkit for creating interactive 3D web content using Blender. It allows users to export Blender scenes to the web with support for animations, materials, and physics. Pros: Integration with Blender, no coding required for basic interactions. Cons: Limited flexibility compared to directly using three.js.
Top Alternatives to three.js
- WebGL
It is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. Its elements can be mixed with other HTML elements. ...
- BabylonJS
A complete JavaScript framework for building 3D games with HTML5, WebGL, WebVR and Web Audio. ...
- Unity
Unity is the ultimate game development platform. Use Unity to build high-quality 3D and 2D games, deploy them across mobile, desktop, VR/AR, consoles or the Web, and connect with loyal and enthusiastic players and customers. ...
- D3.js
It is a JavaScript library for manipulating documents based on data. Emphasises on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework. ...
- PlayCanvas
It is an open-source 3D game engine/interactive 3D application engine alongside a proprietary cloud-hosted creation platform that allows for simultaneous editing from multiple computers via a browser-based interface. ...
- A-Frame
It allows you to make WebVR apps with HTML and an Entity-Component system. Works on Vive, Rift, Daydream, GearVR, desktop. ...
- AngularJS
AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding. ...
- Cesium
it is used to create the leading web-based globe and map for visualizing dynamic data. We strive for the best possible performance, precision, visual quality, ease of use, platform support, and content. ...
three.js alternatives & related posts
related WebGL posts
related BabylonJS posts
We already have an existing 3d interactive application for windows, mac, and iOS devices and have planned to move that app to the web for high availability to different types of users. I have been searching for different options for it. Our existing application is made in Unity so we prefer to work on unity webgl but it also has its drawbacks. Other than that we are also thinking to change the tech stack to three.js or BabylonJS due to their high compatibility with the web ecosystem. I want to know which engine/library/framework we should use for the development of our 3d web application. Also with unity webgl, we want to develop all UI parts in web technologies only and will use the unity3d for 3d part only.
Points that are very important to consider - 1. Memory optimization and allocation 2. Quality 3. Shaders 4. Materials 5. Lighting 6. Mesh editing, mesh creation at runtime 7. Ar 8. Vr 10. Support on different browsers including mobile browsers 11. Physics(gravity, collision, cloth simulation, etc.) 12. Initial load time 13. Speed and performance 14. Max vertices count. What happens when we load models exceeding max vertex count? 15. Development time 16. Learning curve (Unity3d we already working on) 17. Ease of use. What artists can do using any platform eg. in unity3d, artists can edit materials, set up lighting etc? 18. Future scope 19. Scalability 20. Integration with web ecosystem
Hi,
I am looking to build a 3D visualization web application where I can perform different actions with the 3D object. These objects should be stored in a database, instead of a cloud platform, It should also support React and TypeScript. Initially, I looked to start the project using BabylonJS but I found react-three-fiber fiber now I am confused about which one to use.
Thank you, Mahesh
Unity
- Because it's a powerful engine, you can build anything16
- C# language14
- Very Popular12
- Easy to Use7
- He Has A Free VErsion6
- Cross Platform6
- 2nd Game Engine In The World5
- Good Choise4
- Very Large Showcase4
- Hard to get started with4
- Clunky UI4
- Closed source4
- No consistency with updates3
- Requires to build a lot of tools3
- Gigantic by being 9gb (thats what setup says)2
related Unity posts
Hello everyone, I am a junior developer I got hands-on with a project where I should develop a mobile app containing multiple 2d games my initial UI stack was React Native for the UI and Unity for the games, the app is UI heavy so unity alone wasn't enough, but I recently found that I could develop everything with Flutter from the app to the game ... my question is, do you think it's a good idea or am I shooting myself in the foot?
We want to create a 3D web and desktop(Windows and macOS) application with a lot of functionalities. This is a 3D furniture customization application in which we give options to add, delete, scale, move, rotate objects. Something like a floor planner. We are also going to add AR and VR.
I am thinking about using Electron or Unity. Please recommend what should I choose for this purpose. Please consider that we have to develop for web and desktop (windows and mac) all platforms.
- Beautiful visualizations195
- Svg103
- Data-driven92
- Large set of examples81
- Data-driven documents61
- Visualization components24
- Transitions20
- Dynamic properties18
- Plugins16
- Transformation11
- Makes data interactive7
- Open Source4
- Enter and Exit4
- Components4
- Exhaustive3
- Backed by the new york times3
- Easy and beautiful2
- Highly customizable1
- Awesome Community Support1
- Simple elegance1
- Templates, force template1
- Angular 41
- Beginners cant understand at all11
- Complex syntax6
related D3.js posts
We use Plotly (just their open source stuff) for Zulip's user-facing and admin-facing statistics graphs because it's a reasonably well-designed JavaScript graphing library.
If you've tried using D3.js, it's a pretty poor developer experience, and that translates to spending a bunch of time getting the graphs one wants even for things that are conceptually pretty basic. Plotly isn't amazing (it's decent), but it's way better than than D3 unless you have very specialized needs.
Hi,
I am looking at integrating a charting library in my React frontend that allows me to create appealing and interactive charts. I have basic familiarity with ApexCharts with React but have also read about D3.js charts and it seems a much more involved integration. Can someone please share their experience across the two libraries on the following dimensions:
- Amount of work needed for integration
- Amount of work or ease for creating new charts in either of the libraries.
Regards
Amit
related PlayCanvas posts
related A-Frame posts
- Quick to develop889
- Great mvc589
- Powerful573
- Restful520
- Backed by google505
- Two-way data binding349
- Javascript343
- Open source329
- Dependency injection307
- Readable197
- Fast75
- Directives65
- Great community63
- Free57
- Extend html vocabulary38
- Components29
- Easy to test26
- Easy to learn25
- Easy to templates24
- Great documentation23
- Easy to start21
- Awesome19
- Light weight18
- Angular 2.015
- Efficient14
- Javascript mvw framework14
- Great extensions14
- Easy to prototype with11
- High performance9
- Coffeescript9
- Two-way binding8
- Lots of community modules8
- Mvc8
- Easy to e2e7
- Clean and keeps code readable7
- One of the best frameworks6
- Easy for small applications6
- Works great with jquery5
- Fast development5
- I do not touch DOM4
- The two-way Data Binding is awesome4
- Hierarchical Data Structure3
- Be a developer, not a plumber.3
- Declarative programming3
- Typescript3
- Dart3
- Community3
- Fkin awesome2
- Opinionated in the right areas2
- Supports api , easy development2
- Common Place2
- Very very useful and fast framework for development2
- Linear learning curve2
- Great2
- Amazing community support2
- Readable code2
- Programming fun again2
- The powerful of binding, routing and controlling routes2
- Scopes2
- Consistency with backend architecture if using Nest2
- Fk react, all my homies hate react1
- Complex12
- Event Listener Overload3
- Dependency injection3
- Hard to learn2
- Learning Curve2
related AngularJS posts
Our whole Node.js backend stack consists of the following tools:
- Lerna as a tool for multi package and multi repository management
- npm as package manager
- NestJS as Node.js framework
- TypeScript as programming language
- ExpressJS as web server
- Swagger UI for visualizing and interacting with the API’s resources
- Postman as a tool for API development
- TypeORM as object relational mapping layer
- JSON Web Token for access token management
The main reason we have chosen Node.js over PHP is related to the following artifacts:
- Made for the web and widely in use: Node.js is a software platform for developing server-side network services. Well-known projects that rely on Node.js include the blogging software Ghost, the project management tool Trello and the operating system WebOS. Node.js requires the JavaScript runtime environment V8, which was specially developed by Google for the popular Chrome browser. This guarantees a very resource-saving architecture, which qualifies Node.js especially for the operation of a web server. Ryan Dahl, the developer of Node.js, released the first stable version on May 27, 2009. He developed Node.js out of dissatisfaction with the possibilities that JavaScript offered at the time. The basic functionality of Node.js has been mapped with JavaScript since the first version, which can be expanded with a large number of different modules. The current package managers (npm or Yarn) for Node.js know more than 1,000,000 of these modules.
- Fast server-side solutions: Node.js adopts the JavaScript "event-loop" to create non-blocking I/O applications that conveniently serve simultaneous events. With the standard available asynchronous processing within JavaScript/TypeScript, highly scalable, server-side solutions can be realized. The efficient use of the CPU and the RAM is maximized and more simultaneous requests can be processed than with conventional multi-thread servers.
- A language along the entire stack: Widely used frameworks such as React or AngularJS or Vue.js, which we prefer, are written in JavaScript/TypeScript. If Node.js is now used on the server side, you can use all the advantages of a uniform script language throughout the entire application development. The same language in the back- and frontend simplifies the maintenance of the application and also the coordination within the development team.
- Flexibility: Node.js sets very few strict dependencies, rules and guidelines and thus grants a high degree of flexibility in application development. There are no strict conventions so that the appropriate architecture, design structures, modules and features can be freely selected for the development.
Our whole Vue.js frontend stack (incl. SSR) consists of the following tools:
- Nuxt.js consisting of Vue CLI, Vue Router, vuex, Webpack and Sass (Bundler for HTML5, CSS 3), Babel (Transpiler for JavaScript),
- Vue Styleguidist as our style guide and pool of developed Vue.js components
- Vuetify as Material Component Framework (for fast app development)
- TypeScript as programming language
- Apollo / GraphQL (incl. GraphiQL) for data access layer (https://apollo.vuejs.org/)
- ESLint, TSLint and Prettier for coding style and code analyzes
- Jest as testing framework
- Google Fonts and Font Awesome for typography and icon toolkit
- NativeScript-Vue for mobile development
The main reason we have chosen Vue.js over React and AngularJS is related to the following artifacts:
- Empowered HTML. Vue.js has many similar approaches with Angular. This helps to optimize HTML blocks handling with the use of different components.
- Detailed documentation. Vue.js has very good documentation which can fasten learning curve for developers.
- Adaptability. It provides a rapid switching period from other frameworks. It has similarities with Angular and React in terms of design and architecture.
- Awesome integration. Vue.js can be used for both building single-page applications and more difficult web interfaces of apps. Smaller interactive parts can be easily integrated into the existing infrastructure with no negative effect on the entire system.
- Large scaling. Vue.js can help to develop pretty large reusable templates.
- Tiny size. Vue.js weights around 20KB keeping its speed and flexibility. It allows reaching much better performance in comparison to other frameworks.
- Fully interactive 3D and can dynamically switch to 2D.1