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.
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
- Browse to: http://localhost: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