Arashtad

When you start learning how to code 3D content for the web or choose a technology stack for a new 3D-based web application, you will be faced with several options. considered similar to the comparison between React and Angular, Three.js is a framework with a minimal feature library approach, while BabylonJS is a framework with a full feature approach. We will compare Babylon.js and Three.js in this article. What Is Babylon.js? BabylonJS uses the JavaScript library to display 3D graphics in a web browser via HTML5. TypeScript code as its source code is compiled to JavaScript and then distributed as an NPM package or CDN package. It uses JavaScript code to access the engine's API. BabylonJS 3D engine and user code can be rendered natively by all web browsers that support HTML5 and WebGL. Babylon.js Pros and Cons Pros 1. A stable API that focuses on backward compatibility 2. A very well-written document 3. In 24 hours, all issues will be resolved 4. Inspector makes debuggi...

Most of the 3D models that we want to use in games, such as characters, furniture, closed areas, rooms, cars, etc, are designed in the OBJ format and naturally, they have a texture too. The texture is usually exported in the MTL file format. Most of the prepared free models that you will find different on websites that offer 3D models for free like Thingiverse, will give a zip file containing OBJ and MTL file formats. In this tutorial, we will focus on importing OBJ and MTL files in Three JS. This tutorial is an important part of designing your game, animation, or any other kind of web application because there are already many free 3D designs out there on the internet. You only need to import and use them in your scene. So now, let’s get started with the project. Don’t forget to find a 3D model of your choice from where ever you like. Notice that the file needs to have .obj and .mtl file formats. Some of these models have a .png or .jpg photo with them. A simple ex...

The specular map is a texture image that affects the specular surface highlight on MeshLambertMaterial and MeshPhongMaterial materials. Using the specular map, you will be able to set the shininess of a surface by giving the a grayscale value from white to black or from 0 to 255. The white points will reflect the light more and the dark points will reflect the light less. In this tutorial, we will create a sphere geometry and map the texture of the globe on then. Next, we will use the grayscale specular map of the globe to determine the shininess on the surface of the globe. In this tutorial, we will also create the a GUI to set different parameters like the shininess, the intensity of the light, the color of the light source, the material and so on. If you would like to enhance your design portfolio in Three JS, follow along with this tutorial. A simple example from scratch: We will get started with the main elements of a Three js scene, including the ...

The number of objects that you can design in three.js very limited and nearly all of them are some basic geometries like cube, sphere, cylinder, torus, and so on. We all know that there are a tone of various models that can be created using designing software and platforms like Blender. You can use these 3D models to create a web based game or animation or any kind of 3D interactive UX designs. Any of these 3D models have a specific kinds of file format such as STL, OBJ, FBX, PLY, GLTF, BLEND and so on. So, we need to be able to load all of these files in order to use them in Three JS. In This tutorial, we will get familiar with the STL loader in three.js and learn about the details of it. You can find different 3D models for free on websites like CGTrader.com, Thingiverse, and so on. You can also find a tone 3D models of human characters, animals, and all kinds of different objects. A great job you can do is to further modify these models in 3D softwares like Blender an...

This tutorial focuses on a simple but useful animation you can create in your scene by rotating the camera. At first glance, you might think there is no need to rotate the camera as long as we can rotate the object. But in fact, the main reason we need to rotate the camera is that sometimes we need to rotate both the object and the camera, for instance, when you want to simulate the solar system from the Mars point of view. In this situation, you need to keep Mars rotating around the sun; as a result, the camera must be placed in the position of Mars. Moreover, the camera's rotation can be used for more complex and beautiful animations. In this tutorial, we want to use the scene we created in the last article about the point cloud of a torus knot with the difference that here we also make the camera rotate around a certain point. After you see the result and compare it with the simple animation we had in our previous article, you will understand what difference will u...

This tutorial will focus on an exciting topic called a point cloud. Technically, we use a point cloud for creating the polygons. Then using the normal of the polygons, we make the meshes. In Three JS, the point cloud is also used for aesthetics, which means we use the points instead of meshes to represent an object or a geometry. This style of representing the objects makes the design more beautiful and charming than the mesh representation. We achieve this goal by simply using the points material and adding the geometry and the material to the points instead of the mesh. Point cloud representation makes your design look more modern and smart. You can use this effect for technological and innovative items and products, giving them a more modern look. Moreover, the point-cloud-based design could provide a fantastic look for any other type of website other than technology or product based. Let’s give it a shot together! A simple example from scratch: We wil...

A skybox or a cubemap is an interesting topic if you want to create a scene of nature, open ambient, a room, and so on. The skybox looks the same as an HDR image in 3D space, where you can see the 360-degree view of the area you want to simulate; the difference is that creating a cubemap or sky box is much easier and showing it in Three.js takes a different method from the HDR image background. You can also zoom in on different views when using skybox in your three.js scene. To create a Cubemap or a Skybox, we need to create a cube using the box geometry; then create six photos from the area you want to render and show in your scene. These six photos should be taken from the center's upward, downward, left, right, front and back views. Then, they should be added to the array of material textures. This mapping should be on the backside, and the camera's position should be limited to the area inside the cube. A simple example from scratch: We will ge...

In this tutorial, we will cover one of the less available projects in Three.js on the internet. And that is creating multi-camera scenes. Up to now, nearly all the projects in Three.js that we have seen have the object and scene using only one camera and the viewer was only able to see a certain animation from one view port. But, now using the method we will use in this article, we will be able to cover two or more aspects of the scene. This is wonderful! Because there are some games or animations that need more than view of the scene, and if we can see how to create multiple cameras, we can bring this wonderful feature in our projects and make it more fascinating. The scene we are going to see, is very simple. We will animate a rotating cube and our main camera will cover the moving sides of the cube and the other one will cover the top view of the rotating cube. The top camera will be shown on the top right corner of the browser page, while the main camera will cover th...

In this tutorial, we want to create more realistic scenes by making the shadow effect. There are many parameters in creating a shadow of an object. One of them is the material. For instance, if you use the Mesh-basic material, you will see no shadow effects. The next important parameter is the light source. Different light sources create various types of shadows. Some of them do not generate any shadow effect on the object. Our blog has covered a complete article about the light sources in Three.js. Another element that can provide the shadow effect is the background scene. There is also another article about background scenes on our blog. Once you use the background for your scene, depending on the quality of the HDR image, the light source (for instance, the sun) will act as a light source like the point light or the rect-area light. Furthermore, we can use the shadow properties of the point light. This tutorial will test these properties and see their effects on a sphe...

nside every 3D design software, we have the tools for translating the object, meaning we have a button for transferring the object from one point to the other. In addition to that, we have tools for rotating the object and also scaling it. These three are the essential tools for every 3D design application. But imagine a 3D app (software or web application) without orbit controls (having a 360-degree view or rotating around the object); this will result in an annoying user-interactive software everyone hates at first glance. Consequently, every 3D software design app consists of some must-have tools. These essential utilities are, transform controls, and orbit controls, and Three.js is no exception. In this article, we will start from a boilerplate project using the Vite plugin, and then we will modify the script to have all sorts of controls around the object. Some keys on the keyboard will activate the rotation, translation, and scaling tools, each separately. We will a...

In this article we will talk about both the WebGL and the Three JS. Their pros and cons, and the use cases each one of them have compared to the other one. Before we start comparing these two, it is important to notice that the Three.js library is based on WebGL and in this respect, there are not many difference in terms of their use cases. However, there must be a reason why Three.js has a lot more fans than WebGL these days and on the other hand, some developers still prefer WebGL to Three JS. This question is mostly asked by the beginners and the newbies, who are looking forward to start with one of these libraries and have still no clue which one is better or which one is easier. There are many answers to this question on various forums, but if you are still confused about the right answer, this article is written for you. So do not forget to follow along with this one and read the article till the end. In this article, we will cover the similarities and the differenc...