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.
Related
I can successfully load a 3D object from, for example, an FBX File, load and play it's animations. The problem is that, after doing what i gotta do with it, i need to save the changes. To do that, I'm saving the object and the object animation clip to a JSON. I can, now, load the 3D Object in the scene, but no animations will play(it'll stand on T pose), but trying to load the saved clip on the object loaded from FBX will play the animation without a problem.
After reading the resulting JSON from the 3D Object, a lot of data seems to be missing, that's why trying to play animations does nothing.
How can i save the loaded FBX model to a .json and keep the important data? I remember seeing some post about putting some flags on the toJSON method, but couldn't find anything similar again.
Edit:
Using GLTF seems to solve this problem, but three.js GLTFLoader isn't loading any kind of .gltf object and i don't know why, for all of the objects i've tried using (used objects from threejs.org GLTFExporter examples) i'm getting the same error:
TypeError: Cannot read property 'geometry' of undefined
at GLTFLoader.js:2572
That's how i'm trying to load it:
loader_helper.gltf_loader.load("./src/data/scene.gltf", function ( gltf ) {
console.log(gltf); // This is enough to get the error, altough i've tried
// mimicking the FBX import, but getting the same errors
});
Edit: Using https://gltf-viewer.donmccurdy.com/ to view the object, the object i exported was completely bugged ( https://imgur.com/a/yLimuWp ) and i didn't notice, but i tested the bugged object three times, so i thought the problem was in the loader, it is seems to be loading fine using a non-bugged object. Although the export is bugged, the object skinned mesh is loading without issues and only the mesh is being loaded with, wel.. you saw it. https://imgur.com/a/evGmnOG
That's how i'm exporting the scene:
// this is a button.onclick function
var exporter = new THREE.GLTFExporter();
exporter.parse( that.scene, function(gltf){
var stringfied = JSON.stringify(gltf, null, 3);
require("fs").writeFile( "./src/data/scene.gltf", stringfied, 'utf8', function(err) {
console.log(err); // saving it to file with nodejs file system
});
console.log(gltf);
} );
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'm struggling to get an exported scene from blender into three.js and have been researching and experimenting for about two weeks now, however all information I can find on the subject seems to date back several years and is now too out of date to be of use.
I'm working with the following
Blender: 2.7.7
Blender Threejs export: 1.5.0
Three.js: r76
I've tried a few hundred combinations of export settings and while I can always get the geomety exported correctly, the materials while referenced correctly as far as I can see in the JSON file do not seem to want to load in. This occurs with both embeded and referenced textures.
While I have plenty of code samples for loading in JSON with the ObjectLoader all the images, references I find are to much older versions of the exporter (which I have tried) and I've yet to find one thta contians materials, the closest I found was a blender export with colours.
If anyone has any resources for the exporter or the object Importer, or would be able to see any issues with the JON file t would be a great help. The documentation and resources I can find are rather thin on the ground for the newer versions of ThreeJS it seems.
Here is a sample of the exported JSON https://paste.ee/p/RH42a I encoded the textures on this one. For some reason it's also exporting upside down, but that can be easily fixed.
Object loader
var loader = new THREE.ObjectLoader();
loader.load('obj/test/blender/export/test.json', function(obj) {
scene.add(obj);
});
I have been trying to use dent modifier for 3D vehicle loaded using objmtl loader. The model is loaded using multiple obj and mtl files. While I am trying to create dent it is not crating the dent on selected portion. Also when I call computeFaceNormals the model itself is getting distorted. I am not sure if the issue is in my obj files itself. I have attached all obj files as well as the html that I am trying. Can someone please guide me where I am going wrong #mrdoob
issue can be found at http://tinyurl.com/oc4j76a