Skip to main content

How to Apply a Material File to an OBJ in A-Frame

In this article I will show you how to apply a material file to an OBJ file in A-Frame.

info

These instructions were written for and tested on a Mac.

Step 1. Create a new project​

In a terminal window, run the following command:

mkdir -p ~/projects/aframe/aframe-obj-material
cd ~/projects/aframe/aframe-obj-material

Step 2. Create the root index.html file​

From the root of the project, run the following command:

touch index.html
  • Paste the code below into index.html and save the file:
<html>
<head>
    <title>OBJ Material Demo</title>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
    <meta charset="UTF-8">
    <meta name="description" content="OBJ file demo">
    <meta name="keywords" content="OBJ, AFrame, JavaScript">
    <meta name="author" content="Mitch Allen">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <a-scene>
        <a-assets>
            <a-asset-item id="tetrahedron-obj" src="./models/tetrahedron.obj"></a-asset-item>
            <a-asset-item id="colors-mtl" src="./models/colors.mtl"></a-asset-item>
        </a-assets>
        <a-obj-model rotation="0 0 0" position="0 1.5 -1.5" 
            scale="0.5 0.5 0.5" src="#tetrahedron-obj" mtl="#colors-mtl" 
            animation="property: rotation; to: 360 0 0; loop: true; dur: 10000"></a-obj-model>
        <a-obj-model rotation="0 90 0" position="-0.5 1.5 -1.5" 
            scale="0.5 0.5 0.5" src="#tetrahedron-obj" mtl="#colors-mtl" 
            animation="property: rotation; to: 720 450 0; loop: true; dur: 10000"></a-obj-model>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>
</html>

The code does the following:

  • References the A-Frame library via the script tag
  • Loads the OBJ and mtl files as assets
  • Assigns the OBJ and mtl assets to an a-obj-model screen entity for display
  • Scales, rotates, positions and animates each model
  • Adds a 3D plane to act as a floor in the view
  • Adds a sky color for the background in the browser window

Step 3. Create a model folder​

From the root of the project, run the following command:

mkdir models

Step 4. Create the tetrahedron OBJ file​

From the root of the project, run the following command:

touch models/tetrahedron.obj
  • Copy the code below in the obj file and save it:
# tetrahedron.obj
# Author: Mitch Allen

mtllib colors.mtl

v 0.000000 0.000000 0.000000
v 1.000000 0.000000 0.000000
v 0.500000 0.866000 0.000000
v 0.500000 0.288700 0.816500

usemtl green1
f 3 2 1

usemtl red1
f 1 2 4

usemtl blue1
f 2 3 4

usemtl purple1
f 4 3 1

The file does the following:

  • mtllib - references the material file
  • v - defines a vertex for each of the 4 points of a tetrahedron

For the 4 faces of a tetrahedron:

  • usemtl - switches to a material from the file to apply to the faces that follow
  • f - defines a face, applying the most recent material used

Step 5. Create the color material (mtl) file​

From the root of the project, run the following command:

touch models/colors.mtl
  • Copy the code below in the mtl file and save it:
# colors.mtl 
# Author: Mitch Allen

newmtl red1
Ka 1.000 1.000 1.000 # Ambient color
Kd 1.000 0.000 0.000 # Diffuse color (red)
Ks 0.000 0.000 0.000 # Specular color
Ns 10.000             # Specular exponent

newmtl green1
Ka 1.000 1.000 1.000 # Ambient color
Kd 0.000 1.000 0.000 # Diffuse color (green)
Ks 0.000 0.000 0.000 # Specular color
Ns 10.000             # Specular exponent

newmtl purple1
Ka 1.000 1.000 1.000 # Ambient color
Kd 1.000 0.000 1.000 # Diffuse color (blue)
Ks 0.000 0.000 0.000 # Specular color
Ns 10.000             # Specular exponent

newmtl blue1
Ka 1.000 1.000 1.000 # Ambient color
Kd 0.000 0.000 1.000 # Diffuse color (blue)
Ks 0.000 0.000 0.000 # Specular color
Ns 10.000             # Specular exponent

The file defines 4 material colors to be used by the OBJ file

Step 6. Run the demo​

From the root of the project, run the demo with this command:

python3 -m http.server 8000

Notice that the colors from the material file have been assigned to the faces of the tetrahedon.

Live demo​

You can find a live demo here:

Example project​

You can find an example project here:

Conclusion​

In this article you learned how to:

  • Create an OBJ (3D) file using a text editor
  • Create a MTL (material) file using a text editor
  • Apply the material file to the OBJ file using A-Frame
  • Demo viewing the OBJ file in a browser