Unable to import a blender scene into three.js - three.js

I'm trying to import the simpliest Blender scene (camera included) into three.js, but whatever set of options I mark when exporting I always get an exception (data is undefined) when doing the "loader.parse" of the file content (a json string or event an already parsed object) and nothing is shown.
What can be wrong? Is it a bug?
Im using the latest threejs version from github and blender 2.72.
This is what the console.log of the JSON parsed file looks like:
Object { urlBaseType: "relativeToScene", metadata: Object, objects: Object, geometries: Object, materials: Object, embeds: Object, transform: Object, defaults: Object }
Thanks!

I have inspected the code step by step and it seems that the Blender plugin is outdated, the expected data structure at many points for the current version of three.js loaders is quite different then tue data structure returned by the plugin.
EDIT: It's already working in the dev branch! :D
enter link description here

Related

Threejs saving object to json with animations

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);
} );

Exporting from Blender to Three JS with materials intact on scene

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);
});

Three.js ColladaLoader failed to load model: some elements seem to have no vertices

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.

How do I convert a ms3d model to three.js?

I'm trying to convert this model to the three.js model format:
http://tf3dm.com/3d-model/ninja-48864.html
Here's what i've tried so far:
I've imported the ms3d file in blender using the default addon. In blender, animations and mesh look correct; however, bones are only rendered as lines. Then I exported it to js using the three.js exporter. This results in a correct mesh, but the animation is not correctly exported. Only bone positions are exported (which are only rarely used in this specific model), NO rotations at all (except for a few identity quaternions).
It seems I have to modify the model in blender somehow, but since I'm a complete novice in 3d modelling, I'm kind of lost. I've also looked at other questions regarding blender+three.js but none of the tips (apply location/rotation/scale etc.) made a difference. It might also be a bug in the three.js exporter.
Can anybody help me do the conversion, one way or the other?
A nice Python utility is available for converting ms3d format to JSON format.
The link is: https://github.com/pyalot/parse-3d-files/blob/master/ms3d/convert.py
You can easily render this JSON model using THREE.JSONLoader() in three.js
Thanks.

Maya animation in Three.js

I'm trying to get my Maya animated walk cycle into three.js. I have exported the animation with the model into the .dae format, changed the path to my model in the example. My model is being loaded, but it doesn't do any animation. What could be the problem? My main goal is to create a character who walks with WASD as his walk cycle is being played.
Any suggestions where should I start?
If you are using collada loader, the animation should work without any problem. I have used the collada loader to animate one of my models using three.js, and it works like charm.
A better example to take a cue on how to make it work is webgl_loader_collada_keyframe.html .
Converting to the DAE format and then to JS is rife with problems, and it rarely works for animations. THREE.js comes with an exporter for Maya, but it only works for static models.
I have created an updated version that also supports exporting rigged and animated models. It doesn't require any intermediate steps: it just outputs straight to a .JS file. We have a pull request to integrate the updated exporter with the THREE trunk, but if you want to get the new and improved exporter immediately you can get it from this repository: https://github.com/BlackTowerEntertainment/three.js/tree/maya_animation_exporter. The exporter files are in utils/exporters/maya.
Hope this helps.

Resources