Feature: Add OBJ to JS converter script for 3D models

[ayoubelouardi]

I love the project and the video

and for that here I have created a Node.js script obj2js.js to streamline the process of importing 3D models into the canvas.

• This script takes a standard Wavefront .obj file and converts it into a JavaScript file (with the compatible DS)

Usage:

Run the script with Node.js, passing the .obj file as an argument:

node obj2js.js mymodel.obj

This will generate mymodel.js in the same directory.

testing

worked with suitger

as a charm !

the script:

const fs = require('fs');
const path = require('path');

const inputFile = process.argv[2];
if (!inputFile) {
 console.error("Usage: node obj2js.js <file.obj>");
 process.exit(1);
}
const modelName = path.basename(inputFile, path.extname(inputFile));
const outputFile = modelName + ".js";

const objContent = fs.readFileSync(inputFile, 'utf-8');
const lines = objContent.split('\n');

const vs = [];
const fs_indices = [];

for (const line of lines) {
 const trimmed = line.trim();
 if (trimmed.startsWith('v ')) {
 const parts = trimmed.split(/\s+/);
 // v x y z
 vs.push({
 x: parseFloat(parts[1]),
 y: parseFloat(parts[2]),
 z: parseFloat(parts[3])
 });
 } else if (trimmed.startsWith('f ')) {
 const parts = trimmed.split(/\s+/);
 // f v1/vt1/vn1 v2/vt2/vn2 ...
 const face = [];
 for (let i = 1; i < parts.length; i++) {
 const vIndex = parseInt(parts[i].split('/')[0]) - 1; // 1-based to 0-based
 face.push(vIndex);
 }
 fs_indices.push(face);
 }
}

// Center the model
if (vs.length > 0) {
 let minX = Infinity, maxX = -Infinity;
 let minY = Infinity, maxY = -Infinity;
 let minZ = Infinity, maxZ = -Infinity;

 for (const v of vs) {
 minX = Math.min(minX, v.x);
 maxX = Math.max(maxX, v.x);
 minY = Math.min(minY, v.y);
 maxY = Math.max(maxY, v.y);
 minZ = Math.min(minZ, v.z);
 maxZ = Math.max(maxZ, v.z);
 }

 const cx = (minX + maxX) / 2;
 const cy = (minY + maxY) / 2;
 const cz = (minZ + maxZ) / 2;

 for (const v of vs) {
 v.x -= cx;
 v.y -= cy;
 v.z -= cz;
 }
}

const outputContent = `models.${modelName} = {
 vs: ${JSON.stringify(vs, null, 4)},
 fs: ${JSON.stringify(fs_indices, null, 4)}
};`;

fs.writeFileSync(path.join(__dirname, outputFile), outputContent);
console.log(`Converted ${inputFile} to ${outputFile}`);

[Davlatpyk]

Hello, I'm sorry, I don't know how use it, can you explain, please?

[ayoubelouardi]

How to Use the OBJ to JS Converter Script

Hey! So you want to use this script to convert a 3D model from a .obj file to a JavaScript file, right? No worries, I’ll help you through it step by step!

---

What You Need

1. Node.js: Make sure you have Node.js installed on your computer. It’s what you’ll use to run the script.
2. Your Model: Have your .obj file ready. This is the 3D model you want to convert.

---

Steps to Use the Script

1. Open the Terminal:

   • On Windows, search for "Command Prompt" or "PowerShell".
   • On Mac, open "Terminal".

2. Go to the Script's Folder: Use the cd command to go to the folder where the script (obj2js.js) is located. For example:

   cd path/to/your/script
   

   Replace path/to/your/script with the actual path to the folder.

3. Run the Script: Type the following command:

   node obj2js.js mymodel.obj
   

   Replace mymodel.obj with the name of your .obj file. Just drag and drop the file into the terminal to get its name if you’re unsure!

4. Check for Output: After you hit Enter, the script will do its magic and create a new file called mymodel.js (or whatever you named your model) in the same folder.

5. Using the New File: This new .js file is what you'll use in your project to work with the 3D model!

---

Example

So if your model is called car.obj, you would run:

node obj2js.js car.obj

Then, you’ll find a car.js file in the same place!

---

Remember

If you forget to put the .obj file name, the script will tell you how to use it.

Feel free to ask if you get stuck or anything is unclear!

[Davlatpyk]

Thank you very much! it converted my obj file, yes! But the 3d model was not displayed when I ran the program with the converted js file. I was getting errors: "Uncaught ReferenceError: models is not defined" in suetedpenger.js 1 line and "Uncaught ReferenceError: fs is not defined" in index.js 88 line.
I changed the converted js file so that it works with the index.js from the original project. I didn't understand how to use models.suetedpenger, how to make it work with the code?

[ayoubelouardi]

Hey @Davlatpyk! Those errors make sense; here's what's going on:

1. models is not defined
The converted .js file uses models.yourModelName = {...}, which assumes a models object already exists. You need to make sure that object is declared before your model file is loaded. Add this at the top of your main script (or in a separate file loaded first):

const models = {};

2. fs is not defined
This one is a naming conflict; the script uses fs as a variable name for the face indices inside the model data, but fs is also a Node.js built-in module. In index.js line 88, it's probably trying to read model.fs (the faces array) but hitting the Node.js fs module instead.

To fix it, you can rename the key in the converted file from fs to faces:

models.mymodel = {
 vs: [...],
 faces: [...] // renamed from fs
};

Then update index.js wherever it references model.fs to use model.faces instead.

Hope that clears it up! and Sorry for answering very late 🙂