Posts

Showing posts with the label Object3D

How to Load an OBJ 3D Model with its Texture in Three JS?

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

Three.js Object3D: A Tool to Manipulate Objects

Image
The main purpose of this tutorial is to make you familiar with the steps we take to create a very simple project in Three.js. Then, we run it and then manipulate the scene including the object, the camera, and the light or lights depending on the use case. Of course, this tutorial is for beginners who want to take their very first steps into the world of Three.js Object3D and start some simple manipulations on the scene. Manipulating Objects Using Three.js Object3D In this article, we are going to cover the basics of creating an object, camera, and lights. Then, we'll start manipulating objects and see the different effects we can create on the objects using the functions provided by Three.js. A scene is where you place the objects, the camera, and lights, a space that you render the objects in, and in general where you determine what and where the elements should be placed. Each scene has three main elements: The camera The object or objects ...