UV mapping issues while loading collada model exported with Sketchup - three.js

I load collada models, exported via Google Sketchup, into my Three.js (v63) scene with the Three.js collada loader.
The models are loaded, but with some, textures aren't well mapped, like in the following picture :
My first question is how to detect this kind of problems and then, is there a way to leverage the exported UVs from sketchup to correctly map the textures ?
The model from the sceenshot comes from : http://sketchup.google.com/3dwarehouse/details?mid=557d5f1b5a076bdcf53b1b21212345ca&prevstart=0

Related

blender2.8 gltf export for three.js with bumpmap or normalmap or roughnessmap?

I saw some discussions saying gltf does not export bumpmap but if I look into my exported gltf file (separate files mode) there is a bumpmap file with a bumpscale (and also normal map). After loading into three.js I get a meshstandard material with bumpmap object and scale value and also normalmap object. But they seem to have no effect on the rendered object. What is exactly allowed to do to export relief effect from Blender to Three.js with gltf ?
The only relief effect available in glTF is a tangent-space normal map, as shown here:
Blender does have the ability to convert height maps and other kinds of bump maps to tangent-space normal maps, by way of the "Bake" function in Cycles. There are also online utilities that can do this as well.

Threejs object with multiple material doesn't work with RayCasting

I have created a 3d object using blender and exported it as .obj file.
I am trying to load that .obj file using OBJloader in threejs. That is a single object with multiple material in it. It is loaded without any issues.
I am trying to track which material the user has clicked in a 3d object. I am using raycasting for this. Since raycasting works only at object level, I am not able to get which specific material user has clicked.
Starting with three.js R101, you can evaluate intersection.face.materialIndex and then retrieve the correct material from your materials array. This was actually a missing feature in previous three.js revisions.

three.js / A-Frame ObjectLoader does not load Texture and positions Meshes wrongly

We have an issue with exporting our 3D Assets and animations correctly so that three.js can correctly display them.
All our 3D artists work with Cinema4D so we need to go through blender to export a three.js compatible JSON. They export the scene as FBX and then import it to blender. This seems to work fine. The model looks good there (with Material View set in Preview Window) and the simpler models we exported even worked with textures and animations.
But we now have a scene where, when we load the resulting JSON, some of the meshes are flipped 180° (but only some - the trees) and one of the models (Santa model) is not textured. They all look fine in blender.
When loading the JSON in https://threejs.org/editor/ you will immediately see the issues:
Is this an export problem? Can we fix it by tweaking the export params? Will we need to adjust the model in blender?
I would advise a couple things here:
File a bug on three.js including the .blend file
Try freezing transforms in Blender or C4D before export
Perhaps try a different three.js-compatible blender exporter, like glTF-Blender-Exporter.

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)

Picking problems with collada loaded models in ThreeJS

I'm experiencing picking problems when loading a collada model in ThreeJS. The picking example for cubes works fine. Loading a collada model works as well.
However it seems that for picking collada object I need to pick well above the 3D object. As picking works for the cube I cannot figure out why it is not working for collada objects (export from SketchUp). Does anyone have a good example where it is possible to load a collada model and pick the individual objects? Thanks in advance.

Resources