I'm pretty new to three.js so bear with me!
I'm a seasoned user of Blender and have looking for the best way to export to a three.js importer.
So far, the most successful has been the obj importer, although I would love to include animations. With this in mind, I have tried the Collada dae importer (a bit hit and miss) and am now on the JSON route.
I have successfully (I hope) added the JSON export addon into Blender (2.74) which does now export JSON files. These work OK when imported into three.js, but for some reason, it is only exporting one object when I have several in the scene. I have also checked the JSON file and there is only one set of vertices.
I have read on older posts that it has something to do with parenting, but I can't export the scene as it breaks when imported for some reason.
The reason I want multiple objects is because I want to animate various objects within a scene using keyframes. Sounds easy? Not so much.
Are there any specific limitations of bone-based (on armatures) animations. I have a feeling it may have something to do with the object parenting to the bones?
My error could be in the JSON importer in the three.js file...
The documentation on this is a bit limited so any advice would be welcome.
Related
I created a blender project, exported it as JSON+BIN files and showed it through the blend4web webplayer. Everything goes fine until my need to change the JSON file programmatically to add/remove a new 3D object (e.g. a cube or rectangle). I want to renderize the already showed 3D model adding or removing a 3D object. However, since the exportation of a project to blend4web generate a .bin file, if I change only the .json the model was not showed as expected. Considering this scenario, the unique way to change the model is modifing the .blend file and exports it again from Blender. But based on my need, I can't add a new 3D object in a Blender project programmatically considering the .json file. Additionally, the .json file which I am updating/using is considering data retrieved from a Database, such data indicates how and the position where the new 3D object will be displayed in the scene, which hinder me to use Blender to create a 3D Model modificated.
In this perspective, I need help to identify:
Which is the best way to change the scene and show it in blend4web programmatically and mainly considering a .json as an input for the model?
Is there any python script to user a blend4web .json file as an input to be compiled, without the Blender project and regenerate the .bin file, making it possible to show correctly my 3D model using the blend4web webplayer for JSON files?
Or, is there some (easy) way to modify a project from Blender considering data in JSON format, compile and generate the files to be shown programmatically by the blend4web webplayer (for JSON)?
Thanks in advance.
I guess not much people need to import three.js json file to Blender, but I lost my original Blender file and want to recreate it from json that I exported earlier.
Latest three.js git only has exporter and no importer.
I tried using old json importer (from this link https://github.com/Bangybug/three.js/tree/master/utils/exporters/blender/2.71/scripts/addons/io_mesh_threejs) but it does not load back UV maps, only model and textures, so I wonder if there is some importer that could do this?
Unfortunately, there currently is no working importer to get three.js models into blender. You could try to load the object in three.js and then export it using the THREE.OBJExporter(). You might have a good chance to import that resulting obj-file into blender.
This is the options panel for FBX export in Blender. I have no animations, just an UV unwrapped object ready for export. What checkboxes should be checked to correctly export objects for libGDX use to FBX file format.
If you're not exporting all the objects in your Scene, checking "Selected objects" will only export those that you have selected.
For certain shaders, "Tangent Space" is also needed for UV exporting, if your materials look okay after import without tangent space included, you probably don't need it. But, it does increase file size.
If the mesh is not skinned, you can uncheck "Add leaf Bones".
You'll get a better idea of everything that is exported if you convert your fbx to .g3dj rather than .g3db. .g3dj is a JSON file, which you can open in a text editor and check everything out, and/or edit if need be. Play around with the settings in the exporter, convert, and see what you get!
I installed the three.js plugin for blender to export models to json format, i test it with very simple model contains materials of colors without textures but i get errors if i choose materials in options as in attached image, when i do not choose materials option i can export it but get error in reading it with JSONLoader, the error is "can not read property length of undefined" in three.min.js:264
the blender errors
the exported json file
You haven't added your code here but I think your problem is that when you don't export the material from blender, you have to make your own material; then assign it in JSON loader. If you try to get the material from the JSON file it obviously is nonexistent.
I have faced this error many times. Mainly because I wasn't using the latest releases of three.js or the exporter. If you are using a tutorial check that too.
Using Three.js r64 I'd like to import from Blender an animated object with its smoothing groups, the file is exported as JSON through Three.js Blender exporter.
The animation part is working fine.
In Blender, the model looks fine (there is a small smoothing group around the central part).
Picture: http://www.defresne.fr/demo/so/three/smooth_shading/gears.png
I can achive to get the same result when exporting in OBJ with 'Smooth Groups' and 'Include Normals' options checked. However I can't get it working correctly while exporting a JSON file (with normals). Next are pictures of the scene, with a live demo.
Picture: (append next link with) three_gears.png
Live demo: http://www.defresne.fr/demo/so/three/smooth_shading/
I did intense lookup all over the web and couldn't find correct informations. Best is another question on SO which is a bit old (r55) and never got any accepted answer.
I did try to compute the object's normals with
geometry.computeFaceNormals();
geometry.computeVertexNormals();
but, obviously, it computes the whole object normals and result in a completly smoothed object.
So, what should be a correct approach to make JSON smoothing groups work in three.js ? Wait for a built-in function ? build it myself ? Modify the exporter ?
As three.js seems to load correctly OBJ and Collada models with smoothing groups, maybe I could borrow some of the code in these loaders to get the logic ?
Thanks for your help
[EDIT]
I just found something great !
In Blender, produce 2 exports of the model: first a JSON file, second an OBJ file. Load the second one with three.js online editor then convert it to get the geometry JSON...
I can collect the vertices, normals and faces of this freshly exported geometry and copy it to the first exported file.
It works fine ! I got nice shading groups. Even skinning works fine.
But it's a tedious way of processing and I wish I could save myself some extra conversions.
So does that mean there is a problem while exporting geometry from Blender ? Any idea why ?
Any help would be greatly appreciated !
Ok, I finally found what happens.
The r64 Three.js Blender exporter doesn't export smoothing groups so if you need to preserve these, there is no other solution than export the geometry to an OBJ file, then convert it with the python script 'convert_obj_three.py' avaible within Three.js repository. Converted file will have correct normals. (don't forget to check normal option while exporting the OBJ file)