Issues with Skin Clusters in Clara.io and threejs - three.js

I am seeing strange scaling issues for FBX and DAE files that are imported into Clara.io and Threejs which use Skin Cluster nodes.
Here is an example of a model that is broken. Note that the hose of the vacuum used a Skin Cluster node.
What the FBX file should look like (Screen shot take in Unity):
FBX File in Clara.io:
As you can see, the hose and its children are much larger scale than they should be.

Related

Why is my .dae file not applying materials correctly in Xcode?

I worked with a freelancer to create a few 3D models and I'm now trying to apply materials to them in Xcode, but some of the models are behaving weirdly. When I import the .dae file, instead of the default gray color models usually have, they are part green, part black, and part transparent. When I try to apply a material, the material only applies to the green parts, and any color seems to blend with the green.
The freelancer is at a loss because he says there shouldn't be anything different about the models that are working and the ones that aren't.
I've attached a screenshot of one of the broken models and one of the working ones, both with the same material applied.
Any help would be much appreciated!
I tried playing around with different material settings and searching for materials that were secretly applied to broken model, but to no avail.
I fixed this issue by removing a Colors item that was in Geometry Sources. I'm still not sure exactly what it is (I'm a SceneKit noob), but removing it did the trick.
This answer is just to illustrate the issue you might have with the texture coordinates. If you use one single color and not textures, you'll be good. But if you plan to add some texturing, you might want to unwrap your model in a different way. the following images should illustrate that.
This model shows texture coordinates that looks like a perspective projection and you loose a lot of space. It cannot be textured in a good manner. it should be unwrapped differently (illustration from Blender).
This model here is perfectly unwrapped with non overlapping textures and alomst every free space on the image texture is used for anything (illustration from Blender).
hope I could help in some manner.

Three.js texture loads in small resolution, same picture scaled up brakes the scene (small image about 600x600px, scaled up to about 1400px)

I have a pretty strange behaviour with three.js when I try to load different textures for an environment cube map. Everything works fine till I try to test the same scene with larger textures. My camera is pretty much stable so I only have to change one side of the env cube to a large resolution texture as that will be the background of the scene which will be visible, the other 5 sides are small pngs - those are only visible in reflection.
There is no clear breaking point, what seems to usually work as an image for the env.cube is about 600x600px-ish, going any higher resulting in the scene loading completely black.
To make the scene look nice on most devices, I have to go up to a resolution around 1500x1500px (so not insanely large) for the background, and I have no idea why it breaks with a bigger image.
What I already tried/did:
image paths are fine, overwriting a working image to a larger version also breaks the scene.
I had no other idea what to try, maybe it has to do something with photoshop and its image encoding or something along those lines?
the scene contains:
a camera, a gltf model to test with and the environment cube. everything works perfect with small textures.
I already looked at the texture documentation of threejs and found nothing about what could cause this behaviour, I'm completely stuck.

How to make a collada model hollow inside?

How to render only the surface geometry of a collada model in threejs.
I have a 40mb collada (dae) file that I am importing in my scene using thhreejs loader. Then I show the same model from 4 camera views and render all 4 views with basic rotation animation. Problem is, that the rendering is slow (due to the low performance mini PC I am using).
Here's a folder with the optimized models (in .dae and .obj). I used an answer from blender's stackexchange. I managed to reduce significantly the number of vertices 73.4926% and 56.0847% of faces.
*I scaled the models to 1000X their original size, watchout for that.

Importing mesh from blender causes distortion

I'm trying to load a skinned mesh from blender into a THREE.js scene, but it... looks a little odd:
There is a skeleton that was loaded from the animation only, the mesh modified for the game, and there is a little one that is directly loaded from the three.js ObjectLoader.
It's supposed to look more like this (from blender):
I found it!
when exporting from blender, I modified the number of influences to 4. It appears that some vertices were being modified by more than one bone and therefore when only two influencing bones were exported it distorted.

Different mesh visualization WebGL

I'm wondering why the mesh in lesson 10 looks more three-dimensional then mine. My meshes look like they have no surface and no depth. Here is an example picture:
Any suggestions? I don't see if there is a difference in loading the meshes (xtk's version compared to mine). I think it doesn't depend on the (type of) data because in ParaView it looks more three-dimensional.
It is because your mesh files have no normals.
Paraview will create normals if you don't provide it - not XTK -
You can generate normals for your meshes fairly easily with VTK:
http://www.vtk.org/doc/nightly/html/classvtkPolyDataNormals.html
1-vtkPolyDataReader
2-vtkPolyDataNormals
3-vtkPolyDataWriter
Maybe you can export the meshes from Paraview or Slicer? Maybe the exported meshes will contain the normals...

Resources