How to convert object to json file for three.js model loader

Question

I am building a browser game with three.js and I want to load a model from Maya 2013 into my scene. I have exported the model as an obj file.

Now I need to know how to convert it into an JS file for the three.js-loader.

This is my loader so far:

 var jsonLoader = new THREE.JSONLoader();
 jsonLoader.load( "models/model.js", addModelToScene );

Thanks in advance

possible duplicate of [How could i convert a maya file into a json file and use it with three.js](http://stackoverflow.com/questions/14919219/how-could-i-convert-a-maya-file-into-a-json-file-and-use-it-with-three-js) ...straight from the sidebar. — Matt Ball, Apr 08 '13 at 19:55
or, since you have converted it to obj, you can use the OBJLoader or OBJMTLLoader to load it straight into three.js — gaitat, Apr 08 '13 at 20:01
ive tried the OBJLoader bt i get a Type Error: THREE.MTLLoader is not a costructor. But OBJLoader is included — user2259103, Apr 08 '13 at 20:06
Using the OBJloader & MTLloader is not an optimal solution, as the application must parse the geometry every time it is loaded. Currently, I'm trying (& trying) to get Blender to recognize the exporter addon, (still greyed out in the addons list.) — Jack, Feb 24 '14 at 16:21

score 13 · Answer 1 · answered Jun 06 '14 at 14:33

13

If you don't want to use blender, mrdoob(made threejs) has a simple python script to convert obj to json. Just run --this script-- in terminal like so:

python convert_obj_three.py -i infile.obj -o outfile.js

answered Jun 06 '14 at 14:33

captDaylight

2,224
4
31
42

Any idea on how to automate this? It's teadious work to export even a few models. – Adrian Moisa Nov 25 '15 at 18:58

score 11 · Answer 2 · answered Apr 18 '13 at 10:11

11

Use Blender.

Blender 3D

Then install this addon:

Three.js exporter

answered Apr 18 '13 at 10:11

Hobbes

781
10
29

score 6 · Answer 3 · answered Oct 02 '13 at 03:05

6

Thats a pretty late reply. I have written a converter to read obj files and convert to ThreeJS supported JSON format: https://github.com/theMaxscriptGuy/Windows_Programs/tree/master/Obj_To_ThreeJS

Download all the files as zip and run converter.exe...

answered Oct 02 '13 at 03:05

Videep Mishraa

169
2
8

I've tried it on windows 8 but it doesn't work. Have you tested it ? – Sébastien Gicquel Jun 16 '15 at 10:16
Hey, I have not been able to test it on windows 8. Can you plese share the issue/screenshot. – Videep Mishraa Jun 22 '15 at 05:44
Unfortunately, after a lot of experimenting with various workflows I found out that the vertex normals exported using converter.exe don't always match the .3ds file. I was using the `vertexNormalsHelper` to check for defects. However what works for sure is the `convert_obj_three.py` python script. It seems to give the expected results. – Adrian Moisa Nov 25 '15 at 18:56

score 6 · Answer 4 · answered Jun 28 '17 at 14:37

6

Note: the python converter script has been updated to a js based tool https://github.com/mrdoob/three.js/tree/dev/utils/converters

Usage:

node obj2three.js model.obj

answered Jun 28 '17 at 14:37

Karl Rosaen

4,508
2
27
30

Adrian Moisa · Answer 5 · 2015-12-04T08:03:40.293

When exporting 3ds max models to three.js using the [convert_obj_three.py][1] script, a little degree of automation can be achieved with the following command in cmd promt:

cd C:\Python27 &
python convert_obj_three.py -i _obj\chromeBand.obj -o _json\chromeBand.js &
python convert_obj_three.py -i _obj\controlPanelCover.obj -o _json\controlPanelCover.js

I wrote a 3ds max script that will print the phyton script command for multiple models and also a json with the models relative urls and coordinates. The json is useful for placing multiple models at the correct position in scene.

(
local inputPath = "D:\Archive\Work\_Dev\_Convert\Obj\\"
local outputPath = "C:\Server\htdocs\viewer\assets\models\my-project\\"
local jsonPath = "assets/models/my-project/"
local myListEntry = "\n"

for o in selection do
    (
        myListEntry +=
        "\"" + o.name + "\": {\n" +
            "\t\"url\": \"" + jsonPath + o.name + ".js\",\n" +
            "\t\"position\": {\n" +
                "\t\t\"x\": \"" + o.position.x as string + "\",\n" +
                "\t\t\"y\": \"" + o.position.z as string + "\",\n" +
                "\t\t\"z\": \"" + (o.position.y * -1) as string + "\"\n" +
            "\t}\n" +
        "},\n"
    )

myListEntry += "\n\n\n=== Run this using cmd promt: ===\n"
myListEntry += "cd C:\Python27 &\n"

for o in selection do
    (
        myListEntry += "python D:\Archive\Work\_Dev\_Convert\convert_obj_three.py -i " + 
            inputPath + o.name + ".obj -o " + 
            outputPath + o.name + ".js & \n"
    )

myListEntry += "exit \n"
print myListEntry
actionMan.executeAction 0 "40472"
)

Create a new txt file, rename it to coordinates.mcr and drag and drop the file into the 3ds max window. It will automatically open MaxScript Listener window and print the results. Copy paste the python command in cmd. Use the printed json to batch load your models in your project.
Also, scripts can be assigned to buttons in 3dsMax toolbars, for fast access.
The above script could use further tweaking. Not the best solution but at least it speeds up things, hopefuly.
Use Jos Balcaen's script for exporting obj files in batch (3ds Max)

Edit:

After experimenting a bit with the script I have made a setup that allows me to export my models (counting more than 20) in under 1 minute from 3ds max to open browser tab. Of course, you may need to adjust the json output to your liking. Hope you will find this useful.

Andy Jazz · Answer 6 · 2023-06-03T09:38:19.957

2

Create a Python file named conversion.py. Click here to find out how to.

Then execute the following command in your Terminal:

python conversion.py -i file.obj -o file.js

edited Jun 03 '23 at 09:38

answered Jul 24 '17 at 16:23

Andy Jazz

49,178
17
136
220

How to convert object to json file for three.js model loader

6 Answers6

Linked