three js import .obj - mesh showing incorrectly - three.js

I've exported 3d object as a .obj and it's showing up with the right end a bit messed up. I also tried a .fbx with the same results. Attached are some images of what is going on.
How can I fix this? It seems like it may be a flaw in the 3d object itself although if I re import the .obj (or .fbx) into blender it's fine (blender probably renders around simple issues)
Blender
WebGL (three.js)

From the beginning I figured this was a mesh issue. Three.js seems to be connecting all vertices of a mesh to each other, or something. Anyway, I decided to try splitting up the face with the knife tool. While I'm sure there is a better way, this works for now:

Related

Material not showing correctly

I'm having an issue where the material is not showing correctly. I checked the MTL file and all looks correct but for some reason, the material seems to be flipped(I can see it through some parts while it should be the screen). Initially I thought there was something wrong with the MTL or the OBJ but here comes the funny part. On 3dviewer.net the model looks completely perfect(last screenshot).
Therefore, does anybody have a clue on what's happening?
By default, Three.js only renders the front side of faces, since there's often no reason to render the inside of objects. The problem is that the asset you've exported has the face of the screen pointing inwards. There are two ways of solving this problem:
Open the asset in a 3D editor, flip the direction of the faces that are pointing inward, and re-export.
You could change the default material.side attribute of your material. My best guess is that: material.side = THREE.BackSide would solve your problem, but you could try the other values in that documentation page.

Why is blender rigged animation distorted when exported as GLTF?

I created an animation in Blender with armature rigging. When I test it in Blender by pressing Alt-A, it works perfectly fine. However, when I export it as a .glb using the KhronosGroup GLTF exporter, the resulting animation is distorted (e.g., limbs are disconnected and moving in a weird way).
Why is this happening (and how can I fix it)?
For the past two days, I have been trying solutions from similar questions (such as applying location/rotation/scale with Ctrl-A, or deleting the Armature modifier on the mesh) but none of them have worked for me.
Links:
Here is a link to a screen-recording of what the animation should look like (this is me playing it in Blender):
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/correct-animation.mov
Here is a link to a screen-recording of what the animation actually looks like (this is me testing the exported .glb in the browser with Three.js):
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/distorted-animation.mov
Here is the .blend file:
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/soldier.blend
Here is the exported .glb file:
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/soldier.glb
I looked at your setup a bit more.. I see you have a few IK bones that are partially driving the animation. Those won't translate correctly, and will have to have the IK baked into the animation. I also investigated the mirror modifier and realize the problem there.. to get the mirrored object to export, you have to click the "apply modifiers" checkbox, but that ALSO applies the Armature modifier, which distorts the mesh so you get the wrong mesh out. To fix that you have to apply the mirror modifier manually in blender, then export Without "apply modifiers" checked. Once you do that, and once you bake the IK into the animation, you might get it to work.
I've done the IK baking in the past but forget exactly how it works, but here's a starting point: https://blenderartists.org/t/bake-ik-to-fk/587226
fwiw Here is the .glb when I pre-applied the mirror modifier.. notice the arms animate correctly now, but the legs/feet are still screwy because of the IK. I didn't figure out how to bake that yet...
https://drive.google.com/open?id=1zeA-mMirOWYZHlzdURqNnykgh_g10kbr
Set Object's transformation values:0 before Rig.

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

Messed up UVs and Lightmap

I want to bake my model lightmap in blender then load them all in three.js.
So in blender i set two uvs for each objects and baked ambient occlusion in second uv. finally i exported whole scene via three.js exporter into js file.
(exporter has problem that the baked texture goes for diffuse-map not light-map which is correctable by editing exported js file).
But the problem is when i load js with SceneLoader, the textures especially for my floor goes wrong, like upside down.
here is my test files: Test Light Map
So is there something wrong with my blender file or ...? Which loader i should use for it?
Thanks.
I just upload some images to see what i mean:
Messed up textures:
After edit js file, it's get better. but still there is problem at the edges:
And specially at floor, the light-map goes wrong:
Ok, i don't know why, but it seems my uvs was messed up in blender. i did some recaculate normals and flip normals in blender and now textures map fine on objects.
But i still need to edit exported scene to change map:texture.png to lightMap:texture.png.
[EDIT]
Actually this is a bug related to three.js scene exporter: Blender Exporter - Scene Exporting
[Final Answer]
The problem was about my model which had a negative scale in blender. i select my model, hit crtl+a then choose scale. now everything's fine.

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