Wrong pivot point for certain fbx models imported into THREEJS - three.js

I am working on a project which requires taking fbx models and viewing them in a THREEJS viewer. Most of the time these models come in with the correct pivot points but other times they do not. I am having a hard time figuring out what is causing this issue.
I am using this script to do the conversion from fbx to json:
https://github.com/mrdoob/three.js/blob/master/utils/converters/fbx/convert_to_threejs.py
You can find an example of an fbx file that has the wrong pivot point here:
http://s000.tinyupload.com/index.php?file_id=42525924957536854290
This model contains only one mesh and was exported from Maya with FBX Plugin version 2014.0.1. The pivot should be near the center of the model but it located at the bottom of the model when loaded in threejs. It appears to be placing the pivot at (0,0,0).
I ran a test on this model using the online model viewer at https://clara.io/. When I import the model using the fbx everything looks normal as can be seen here:
Next, I then export this model as THREEJS Scene json by using File -> Export All -> Threejs Scene. When I import the json I just exported via clara.io back into clara.io the pivot is wrong. This is the model after reimporting it as json into clara.io
Any suggestions on how to get the pivot points to always match up between Maya and Threejs would be greatly appreciated.

The issue is that ThreeJS doesn't support Pivots that are different than Transform origin of a model. This is actually somewhat standard for Game Engines.
What I would suggest is to first "Reset Pivots" in Clara.io on this object, and then go into Vertex mode in Clara.io on this object and select all vertices. Move the vertices so that they are relative to the Reset Pivot. This is letting you set any pivot you want because you are moving the vertices relative to the origin of this model. Then when you export, you will have your new pivot.
We can look at adding support for baking pivots. But it is a little complex because there are multiple distinct pivots -- one for scale and a separate one for rotation, so I guess we have to give you the option of which you want to bake into the object.
Best regards,
Ben Houston, ben#clara.io

Related

Sketchup to Blender to Animated GLTF into Cesium nightmare

I would be grateful for some suggestions for best best practice.
I am a proficient user of Sketchup for a dozen years. I can make my way around blender.
I have a need to model a wind turbine which ends up in gltf and imported into cesium with animated blades and orientation (ie. two animations).
Over the last couple of weeks I have learnt how to animate the blades in the correct plane in blender at appropriate revolution speed. I now have an animated model ready for export with seemingly good structure / hierarchy of parts.
If I export to fbx the blade rotation is correct but materials and textures are missing. Plus I can't migrate it to Gltf as every option I try fails.
If I use the gltf exporters from Khronos when running the animation the blades disappear altogether. If I use the other gltf exporter the blade angle gets corrupted (unlike fbx) and no animation survives the export. If I import the fbx back into blender the model is intact (except no materials) and the rotation works as exported. If I export as Collada / dae the blades drop from the top of the model to the bottom and there is no animation.
I have played hours of videos, searched and read endless Web pages but after weeks of effort I have failed to get anywhere near my goal - an animated gltf that I can import into Cesium.
Every step of the way is plagued by imponderable next steps to fix the problem. I have run out of puff.
I would be hugely grateful for some best case suggestions on doing something which seems like it should be simple but simply isn't.
Regards
dawrightau

Why do two faces appear invisible in ThreeJs?

I've an object in Blender. Because I want to do some UV-unwrapping using ThreeJS (see here) I determined that I need merge two of the sides to correctly unwrap.
So before exporting the .blend as a .obj object I selected the Tris to Quads face option to create a square face for the two sides as opposed to it being made up of two triangles. Here's what it looked like in Blender:
But when I import the .obj and .mtl file into ThreeJs I get this:
Is this a problem to do with me not updating the material being added to the new object?
The handles appearing white makes me think this is the case. If so how can I go about fixing it?
When I see something like this, the first thing I usually do is to set the material to side: THREE.DoubleSide. If that helps, the problem has to do with the normal-directions (so the face is actually there but isn't rendered because it is facing away from you).
To fix this, you should try the following:
In blender you can enable displaying of normal-directions in the right-hand menu (select "Face normals in section "Mesh Display").
You should now see if any of the normals are pointing inwards/in the wrong direction.
There is an automatic fix that works well for properly constructed meshes:
select object and switch into edit-mode (<Tab>)
select all vertices (shortcut &ltA>)
via menu "Mesh" > "Normals" > "Recalculate Outside" (shortcut <Ctrl>+<N>).

Blender to Unity preview rotation

When I import a model made in Blender to Unity the preview image rotates, when I drag it into the editor it's rotation is fine. It only happens though when the model consists more objects and I join them with CTRL+J in Blender. Let me show an example. I made this house in a few clicks, for the "seperated" one I left the roof as an individual object and for the "joined" one I hit CTRL+J so that they became one object. Here is the image. The "seperated" shows up fine while the "joined" rotates in the preview. I tried to import it straight to Unity as a blend file and also exported it as an fbx from Blender but the result is the same. For more complex models which consists of a lot of objects I like to join them so they appear as one mesh. I haven't find any fix for this, I hope someone can help. I use Unity 5.3.2 and Blender 2.76b.
Maybe you haven't noticed that the up axis for Unity and Blender is different.
In Unity it is 'Y' and in Blender it is 'Z'.
So when you import any model from Blender Unity sets Rotation x = 90.
It's not a big deal, just group it to fix it.

ThreeJs and Blender model without texture

I'm new to both Blender and ThreeJs and searched a lot before asking. I created a model with Blender and esported it as .dae so I can load it in the html canvas. The problem is that only the model is loaded and not the textures. I'm doing something wrong or it's the loader that somehow causes the problem?
Here is the sample:
http://provasitimek.herobo.com/firstImport2.html
and the code:
https://github.com/MarcinKwiatkowski1988/learningThreeJs/tree/master/ThreeJs_and_blender
PS. the blender version is 2.70 (so maybe the problem lays here?)
PS2: So, after many attempts, these are my conclusions:
to get the color of the object, you have to choose the Blender renderer and not Cycles renderer
the export to the file .dae is not realy significant, should working with all options (or at least I didn't find any differences between files exported with different options)
if you use Blender renderer and any basic materials (Basic, Lambert, Phong) you get only the color on the object rendered in threeJs: so, for example, if you apply a trasparency to you object on blender, you will not see it on the rendered object on threeJs
with my current level (i just started to learn threeJs and blender 2 weeks ago) this is as far as I can help. Hope someone with higher skills like #mrdoob would figure out what the problem is
THREE.js does not pair models and textures until you actually make a mesh. Export The model and texture separately, load them separately and call
new THREE.Mesh(blenderGeometry,blenderTexure)

Blender exports a three.js animation - bones rotate strangely

I'm currently trying to export an animated blender model to three.js using the exporter of three.js (github.com/mrdoob/three.js/tree/dev/utils/exporters/blender/2.66/scripts/addons).
I've created a model including bones and weights and a tiny animation.
The problem I have: The model gets broken. Somehow the bones don't rotate around their origin but around the origin of the root bone. Moving the bones manually does not make a difference.
I followed these tutorials:
devmatrix.wordpress.com/2013/02/27/creating-skeletal-animation-in-blender-and-exporting-it-to-three-js/
dev.mothteeth.com/2012/10/threejs-blender-exporting-skeletal-animations/
I have:
Deleted the Armature
Checked the Vertex Groups
Keyed all bones in the first and last frame.
I've been to pretty much every thread I could find on github and stack overflow. These seem to be the main issues for these errors. But I guess I still miss any point. :(
I have uploaded all files including the blender files and exported animation.
http://www.file-upload.net/download-8068001/forum-files.rar.html
Any suggestions?
Thanks a lot in advance.
The problem was that the location/rotation/scale were not reset before exporting the model.
Before You export Your model, select the mesh and press CTRL+A and select location. Repeat for rotation and scale, then select the armature and do the same. Now it works.
I've downloaded both the tutorial package and your code. The code aspect looks fine. So looking over the model I see that your vertex groups are not well defined. When I select the Left_collarbone bone, left_upperarm, left_lowerarm I seem to be getting vertices from parts of the torso, head, etc... in the mix. I suspect that what your seeing with your funky shoulder stretch animation is that the collarbone is part of some other groupings and when exported the "weights" of the mesh are confused causing the bone to pull badly on the mesh. Try cleaning up the vertex groups and see if that helps. #lukasz1985 has the right idea, nice one! +1
P.S. Thanks for the link to the cool animation tutorials for Three.js :)
I had an issue where calling THREE.GeometryUtils.center(geometryWithBones) on a the newly imported geometry would make all the skinning look very strange. Getting rid of that fixed things.
Also make absolutely sure, that the three.js blender exporter is not set to to align your model in any way. (I had it set to "center" and it took me 4 hours to figure out why my bones rotate around some spot that was NOT the spot they rotate around in blender.)

Resources