I'm using threejs(R58). I convert the FBX model to threejs json file via utils/convertors/fbx/convert_to_threejs.py. When I use THREE.JSONLoader to load the json file, brower throw exception in the line "for ( i = 0; i < json.uvs.length; i++ )".
I find the format of the generated json file is not matched with the JSONLoader.
Which FBX convertor should I use? Why R58 has this inconsistent convertor tool?
Thanks a lot!
it's my mistake. The generated js file via utils/convertors/fbx/convert_to_threejs.py is a scene type js file. I should use SceneLoader instead of JSONLoader.
Related
So I have two issues right now.
it seems objectloader never load the texture of 3d model from json files.
I don't know somehow, the positions of 3d models change a little bit after THREE.js loader load them.
Here is what it should look like
Here is what it looks like on my browser
Here is THREE.JS code:
var loader = new THREE.JSONLoader();
loader.load("./script/treehouse.json",function ( geometry) {
var mesh = new THREE.Mesh( geometry);
$scene.add( mesh );
});
Export setting:
And here is how the json file looks like:
Update: Now since I chose dae format, it looks exactly the same from blender, however, textures are still not there, and the color of models change every time i open the dae files or refresh the page.
I suggest using a different format than THREE.js internal format.
It's been known to change a bit between revisions and will end up requiring you to re-export assets later on. You're better off using a format that is standard, like GLTF, Collada, OBJ, or FBX. Additionally, the THREE json format is pretty bloated and results in files that are pretty easy to read, but can be quite large.
I recommend GLTF 2.0 (gltf) or Collada (.dae) format. You will get smaller files and the format should remain more stable. If you use Gltf, you can also use Don McCurdys nice GLTF previewing tool to sanity check your files if you are having problems.
https://gltf-viewer.donmccurdy.com/
There is also the three.js editor that can be helpful for sanity checking files.. try dragging your json on here:
https://threejs.org/editor/
I have a .obj, .mtl files with multiple materials
for a specified material, I want to print the vertices and their corresponding uv coords.
Is there a way to e.g. parse a .obj, and .mtl file and export them to json?
When using
wavefront-obj-parser
PyWavefront
meshlab
All these tools generate a json file I think that the data is partial - I don't see the materials in there.
EDIT:
I tested with an example 3d model
step1: converted the .obj and .mtl with multiple materials into a .json file
Added the addon to Blender (version 2.76b) as instructed in here
In Blender, imported the .obj, .mtl (the model shows up but not the material textures)
In Blender exported to Three.json (see here)
step2: loaded the generated .json file (foo1.json) within a threejs example
Used the example webgl_loader_json_objconverter.html from here
Replaced Female02_slim.js with foo1.json
The model Male02_dds.js is loaded but the foo1.json is not and I'm getting an error message: TypeError: vertices is undefined
Some links indicate that Blender Exporter and Json File Loader are not so reliable (see here, here, here, and here in general)
Is there any other converter from .obj, .mtl to .json that anybody can recommend? (not necessarily in relation to three.js)
Assuming that I can convert to glTF format, is there a tool, (e.g. a command line utility in python) that will let me specify a material index and get the vertices and corresponding uv coords for this material?
Solved:
I ended up using meshlab plugin export to json. It works (almost) fine for me
Sure, you can use Blender and THREE JS plugin (exporter):
https://www.blender.org/
https://github.com/mrdoob/three.js/tree/dev/utils/exporters/blender
Exported file have materials as array if you use JSON Loader function
https://threejs.org/docs/#api/loaders/JSONLoader
I tried to import models from the 3D Warehouse, but some models fail to load (error in ColladaLoader.js (line 2808)
Uncaught TypeError: Cannot read property 'input' of null). I experienced this error with a lot of different models from 3D warehouse.
I prepared a fiddle (elcsiga/rep1z1xt/4), it loads the model from a different domain via ajax (CORS violation), however it worked me in Chrome.
A fully working example (fails to load model):
http://projecthost.hu/webview/jsfiddle/metro.html
Exactly same code with the monster model from three.js repository (it works):
http://projecthost.hu/webview/jsfiddle/monster.html
The collada model is available here: projecthost.hu/webview/jsfiddle/metro.dae
First I tried to download it as a .kmz file, unzip and use the .dae file in it directly. Additionally, I tried to download the .skp file, opened it in Sketchup and exported it into .dae format, but got the same error in ColladaLoader.js.
Do these models contain an unsupported geometry, or is it a bug in Collada loader?
Thanks.
The Model don't have any vertices so the Loader cant create a geometry. (maybe I'm wrong)
You created the Model via Google SketchUp right?
https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
find
var vertexData = sources[ this.vertices.input['POSITION'].source ].data;
in ColladaLoader.js, replace it with
var vertexData = [];
if (this.vertices && this.vertices.input['POSITION'].source) {
vertexData = sources[ this.vertices.input['POSITION'].source ].data;
}
this can fix my problem by avoiding empty vertices. It may lost some info of dae file, but it won't harm ColladaLoader.js's function.
I decided to try out gltf format for rendering models in Three.js and I'm using this converter (http://cesiumjs.org/convertmodel.html) to convert the model from Collada to GlTF. It spits out a *.gltf file, however in the examples in Three.js they pass a *.json file. How can I load the *.gltf file or how can I get the proper set of files to load? Thanks
You can use THREE.glTFLoader which can be found in the examples/js/loaders directory.
For a demo, see http://threejs.org/examples/webgl_loader_gltf.html.
three.js r.95
The gltf file is a valid json file as far as I understand it.
I opened a file converted from collada to gltf and it is just plain json.
I put it also through the validator at JSONLint.
I would suggest to change the file ending from .gltf to .json .
is there a way to import X3d files into three.js?
Maybe convert the X3d file into something that three.js can read? Like OBJ or STL?
Thanks for the help!
X3DOM
There is no X3D loader for three.js at the moment, but you could use X3DOM instead if you have to use that file format.
Otherwise, you'd have to write your own loader or convert to another format as you suspected.
Convert X3D to OBJ
However you could use the command-line tool AOPT mentioned in the X3DOM issue to make a webservice, then you could make ajax queries to the webservice to use it in client-side javascript.
aopt -i filename.x3db -e filename.obj
Otherwise X3DOM being open source, so you could dig into its code and try to extract only the parts that deal with parsing the file, and write an OBJ file accordingly, but that would require good knowledge of the X3D and OBJ formats, and solid javascript knowledge. You could skip the first part by having a 1-pixel canvas with X3DOM to feed it the files to parse though.