Arashtad

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 o...

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. W...

This article aims to bring the necessary guidelines for migrating from origin or classic Terra to new Terra or Terra2. This migrating includes the updates in main-net, test-net, exchanges, functions, dApps, starting a node, faucets and everything that help the developers update their scripts with the new Terra chain. It is important to mention that the classic or origin Terra still works the way it used to. But in Terra2 we have some modifications that solve the problem related to the classic Terra. Of course this guide is not meant to create a full tutorial on how to interact with Terra2 main-net or test-net and other interactions, but to continue the detailed guidelines that we provided for the original Terra (Terra1), with the difference that they are going to be used for the new Terra chain. What is terra? Terra is a DeFi protocol on the Blockchain that powers the universal payment systems which is based on fiat currencies using the fiat-based stablecoins. Thi...

We have provided a lot of tutorials about the textures on our blog. Some of which, we have directly worked on the textures, and others that we have used the texture in our three.js examples. However, in none of these examples we have had multi-texture objects, or in other words, we have never faced a situation in which we had to place different textures for the different sides or part of it. In this tutorial, we will work on an example that covers this situation. This example includes designing a dice or a cube with different textures on each of the sides. To make this happen, we should first download the image of each of the faces and then map them in the materials onto the object. As always, we begin with the basics and get started from creating the Vite plugin, to have all all the necessary files inside our project folder and then will add the script related creating and animating a dice. The project can be used when you want to style your website in a beaut...

Luna is the token of the Terra network. But these days, it is divided into two categories: one, the Luna Classic, which represents the token related to Terra 1, and Luna 2.0. TerraClassic or Terra 1 is related to the time before May 2022 when the network of the same name crashed due to an evil genius attack caused by a massive sell-off of the Luna token of that time which is now known as Luna Classic. However, Luna is not the only token of the Terra network; TerraUSD is another token designed to play the role of a stablecoin. The stablecoins are pegged to US Dollar. Although you might think that the price of the TerraUSD must be one Dollar, in fact, because of the mentioned crash, the cost of the token at the time of writing is 0.057 Dollars, which is why it is now called TerraClassicUSD. The new Terra version, released shortly after the crash, had no stablecoin to be replaced. Also, the new network released an airdrop for the Terra 2.0 network called Luna 2.0, ...

Adding textures to the scene differentiates a novice design from a simple one. Textures create a more realistic effect on the objects, especially when you want to simulate real-world objects that have certain surfaces in addition to the bumps and dumps. Some textures create the colors and sketches; others cover the 3d ups and downs on the object's surface. So, in general, to have a real-world texture, you need a normal map, usually blue, a displacement map, and a photo of the surface. In this tutorial, we will create a scene in Three.js with an object and find the texture we are looking for from the web. Afterward, we will project the texture we found on the object's surface, which is, in this case, a sphere. The next thing we will do is to add the normal map and the displacement map. Most of the time, when you are looking for a texture on a particular website and downloading it, you will get the Zip file containing all the maps necessary to create the kin...

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 d...

In Three JS, we have many different ways of rendering objects. One of them is orbit controls, When we use orbit controls, we want to have a 360-degree view of the object; meaning that we want to move around the object with complete freedom. And when we use orbit controls, we can use many other animations for the object and these two won’t interfere with each other. Suppose you want to animate a rotating sphere, which simulates the globe (planet earth) and at the same time, you want to give the user the capability to move around the object in 360 degrees, Orbit control is the way to do it. In this tutorial, we will get started with the Vite plugin and then enter our boilerplate code. Afterward, we will modify the code and add the orbit controls to our rendering, so that the user can have the freedom to rotate around the object that is also rotating. Getting started with the basics: We are going to get started with the simple elements of a Three js scene including...

In this tutorial, we are going to design a tube with the texture of a real-world tube. The process we are going to take starts from scratch and we will cover all of what needs to be explained in order for the beginners to understand. First, we will start with the Vite plugin and then we will extend and develop the main.js file by starting from the simplest scene with cylinder, camera, point lights, material, and so on. Then we will add texture to the design and the kind of texture we will get will be retrieved by searching google for an aluminum sheet, tube normal map, or tube texture. You can find any other texture from anywhere or by any means according to your design preferences. Also, notice that here we will use the rect light for the light source but if this tube is meant to be designed for a room or another area, the appropriate light source needs to be added to the scene. Getting started with the basics: We are going to get started with the simple elemen...

Contrary to the popular fallacy, the Blockchain is not a new concept that has become the hot passion of the day in the form of cryptocurrency. The very first time blockchain was used, dates back to 1982 when a cryptographer ( David Chaum), first proposed a blockchain-like protocol in his dissertation “Computer Systems Established, Maintained, and Trusted by Mutually Suspicious Groups”. More works on blockchain were described in 1991 by Stuart Haber and W. Scott Stornetta. However, none of these efforts were related to monetary or financial systems, rather, they were the kinds of efforts that would not allow the document timestamps to be manipulated or damaged by a third party and this was made possible by the means of Blockchain protocols. In 2008, for the first time, an anonymous group or a person called Satoshi Nakamoto proposed a hash-cash-like method to timestamp blocks without requiring a third party to sign them and introduced a new parameter called diffic...