I had a fbx which I converted into glb using fbx2gltf npm package then compressed it using
gltf-pipeline -i model.glb -o modelDraco.glb -d
( Final glb can be downloaded here: https://drive.google.com/file/d/1E9Y7DbZCxoWiFJlhjlx8WDm2nbNhJRHT/view?usp=sharing. )
The file appears in blender with shaders etc like following
but not in https://gltf-viewer.donmccurdy.com/ or https://sandbox.babylonjs.com/ where it appears as following, without shaders n all.
The problem is that your asset is exported with unlit materials. Meaning they do not respond to lighting. When inspecting the glTF asset, you can see that all materials make use of the KHR_materials_unlit extension.
When importing the asset in the three.js, the car is rendered as above although no lights are present in the scene. When inspecting the materials, you see they are all of type MeshBasicMaterial. So three.js (and BabylonJS as well) properly parse and render the asset as expected.
Related
I am trying to convert an .fbx file to a .dae (Collada) file. I have tried using an application for this called FbxConverterUI, however when I drag the Collada file into Xcode it doesn't load all of the animations, meshes and textures from the .fbx file. I use Blender to create the .fbx file. I did try to export it in Collada format from Blender however only a single animation loaded with multiple copies of that one, the animation was also different than how I keyframed it so I bumped into exporting it in .fbx which was loaded correctly when I imported it back into Blender to check that the .fbx format would work.
I lastly tried to export it in usdc and obj but I wasn't bothered with obj because it filled my desktop with like 100 files, the usdc didn't work either because there was not textures or colour and no animations, just a white mesh.
If you could explain how I could convert .fbx to Collada with all of the animations, textures and mesh stays the same that would be great. Or if there is another way to export it in Collada (from Blender) with it working properly. Any other methods that work which you suggest me do would be amazing.
Thanks.
In case you need some kind of guidance, this are my "prefered" export settings from Blender (v.3.0) when it comes to animated models - and I usually had success with it. I am using a separate DAE File for the Model, including the rig - and for the animations I create separate DAE files, containing only the animation, that can be applyed to the node containing the rigged model using SCNAnimationPlayer. (do not convert the those type of DAE files to SCN files using XCode - this may break the file in some cases)
There are many more settings to tweak. (in my example picture anything else is left default)
Keep in mind: This is for SceneKit. For other rendering engines, things may vary.
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 a rigged (skeleton and soft bind) model in Maya. The model is all one seamless low poly with a single jpeg texture mapped. There is simple animation of the skeleton. (joint rotation). I need to get it to work with ThreeJs (webGL).
Do I try to export an OBJ with Morph Targets some how? I can do OBJ but how do I get the morph targets? Can the developer that I am working with read Maya's baked animation file (.MC or .XML) in webGL. Do I export a Collada DAE?
Any help that can steer us in the right direction would be greatly appreciated.
Thanks
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.
It is best to export a Collada DAE file from Maya in order to get your data into ThreeJS. You can preview and share your data via http://Clara.io (an online 3D editor, modeler, animation) which imports Collada DAEs and uses ThreeJS for display.
You should have read the FAQ as there is plenty of info there. https://github.com/mrdoob/three.js/wiki. Most probably you need to export to Collada as Wavefront obj's do not support animation.