The first browsers was only able to show HTML, like as a document, not like the webpages we have today. Then CSS and JavaScript was added, but the possibilities was kinda limited.
Fast forward to today and the browser can use HTML/CSS/JS to show videos, interactive applications and games. Yes, games....and in 3D!!
Let's look at how to start out with 3D in the browser with JavaScript.
3D programming in JavaScript can be done using a variety of libraries and frameworks such as Three.js, Babylon.js, and A-Frame. These libraries provide a high-level abstraction for creating and rendering 3D scenes in the browser. A-Frame is really cool if you are targeting VR!
​
Here are some steps to get started with Three.js:
-
Download the Three.js library from the official website or use a CDN like jsDelivr.
-
Create a new HTML file and include the Three.js library in the header.​
3. Create a new JavaScript file (or write it in the HTML file within some script tags) and start coding a 3D scene. We are using Three.js for this as it's simple and quick to do.
4. Open the HTML file in your browser and you should see a spinning green cube.
This is just a basic example to get you started. Three.js provides a lot of features and options for creating complex 3D scenes, including lighting, textures, and animations. You can also import 3D models from various file formats and use them in your scene.
​
It is possible to run advance 3D graphic in the browser, but just because you can, does not mean you should. If you don't have a gaming computer then the computer would start to struggle real fast just by adding more cubes to the scene.
​
In other words, it's easy to overdo it. If you don't need it, don't add it.
If it is for a gaming website, then yes you should/could. But you don't need it for a simple information based website with a few forms.
​
Try to add a few more cubes to the example above and see how your computer response.