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);
});
Related
I am trying to figure out how to use a blend model in my three.js code.
My code looks like the following:
const loader = new THREE.JSONLoader();
loader.load( "models/test.blend", function(geometry){
let material = new THREE.MeshLambertMaterial({color: 0x55B663});
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
});
Nothing is showing. Every tutorial I can find directs me here which is now deprecated and I cannot find anything in the docs.
I have also tried using a dae file and followed the answer here, but this didn't work either. I used the new THREE.ColladaLoader(); to try and load this file.
read this
specifically it addresses a tool :
https://github.com/KhronosGroup/glTF-Blender-Exporter
Loading 3D models
3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on. Some formats are difficult to work with, inefficient for realtime experiences, or simply not fully supported at this time.
This guide provides a workflow recommended for most users, and suggestions for what to try if things don't go as expected.
Before we start
If you're new to running a local server, begin with how to run things locally first. Many common errors viewing 3D models can be avoided by hosting files correctly.
Recommended workflow
Where possible, we recommend using glTF (GL Transmission Format). Both .GLB and .GLTF versions of the format are well supported. Because glTF is focused on runtime asset delivery, it is compact to transmit and fast to load. Features include meshes, materials, textures, skins, skeletons, morph targets, animations, lights, and cameras.
this is from the above link and the THREE.js documentation. in it it explains that they deprecated that to increase workflow productivity, which means it wasn't working very well anyway....
the link you provided has substitute resources for exporting blender models as glTF which is recommended for transmission due to its compact size and speed
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/
Iv'e tried every setting of so many exporters to get this to work, the blacktowers modified exporter for three.js, Inka3d, clara.io and online converters, and trying opening the FBX with animation into blender to no avil.
The FBX has animation and plays on websites such as clara.io and inside of Maya / 3DS Max, however when exporting the .json or .js it doesn't work inside the online editor or offline editors.
Is there any other way to get Animations with skinned bones / joints from Maya to .js / .json that will work inside of Three.Js?
The other answer is inaccurate. It is possible (and, indeed, common) to export animations and bones to three.js-friendly JSON files, from all the major 3d formats (FBX, DAE, etc.). The most robust and foolproof way seems to be through the JSON exporter in Blender - sometimes it still requires some fidgeting with, but the pipeline is mostly functional in 99% percent of the cases I've seen.
Currently (Jan '16) there is no need to use the blacktower exporter; the standard JSON exporter for Blender works just fine.
This is a good tutorial, although current practices (at least my own) differ slightly and you may have to play with various exporter options to make it work for you. If you're still running into problems, please post a clearer description of your specific issue and I'll try to help you get it working.
None of the JSON formats for ThreeJS support keyframe or bone data I understand. Right now I believe on Collada and possibly the MD* file types can be imported into ThreeJS directly with bone and keyframe data.
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.
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.