We are having difficulties loading model in three.js
we are using OBJLoader2 because it smooths mesh properly, but somehow textures are looking way more rough then they should be.
some normal map issues:
three.js
and this is the render how it should look like (with different texture)
rendered
When u load the model and using MTL its bumpMap by default. But it should be normalMap. So if you load normalMaps manually and apply it it starts to work.
Related
I built a .glb viewer with Three.js. Whenever I want to display a model from Blender where the scale has not been applied before exporting (e.g. scale at 0.5 instead of 1), I get sizing issues in Three.js. It usually manifests in the model appearing smaller than its bounding box.
Is there a way to get consistent scale with Three.js?
Downloadable files:
This is the file that causes the problem:
https://firebasestorage.googleapis.com/v0/b/fotura3d-dev.appspot.com/o/cassette.glb?alt=media&token=27e08f59-68b4-4011-89a4-04bdc56365db
This is the file with transforms applied in Blender which works as expected in Three.js:
https://firebasestorage.googleapis.com/v0/b/fotura3d-dev.appspot.com/o/cassetteApplied.glb?alt=media&token=fc6decb1-aa36-4ab2-8582-9ce21111585b
Instead of scene.add(yourModel) ing your model to the scene.. try scene.attach(yourModel)
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.
So my question is, when creating textures inside blender how can i configure those textures so that when I export mesh with Three.js exporter they get assigned as specific textures (map, aoMap).
So far I have one mesh with two textures and one textures is map(diffuse) and other texture is lightMap. ( That's what I figured out from generated .json file)
I want to set one texture to remain to be map, and another one to be aoMap insted of lightMap.
So I figured it out by looking at python scripts for Three.js exporter.
If you want texture to be map (diffuse) you need to set "Blend" property on texture inside Blender to be "Color". If you want texture to be map (light) you need to set texture "Blend" property inside blender to "Multiply".
It appears that exporter does not support map (ambient occlusion). I guess I will have to hack it up so it does.
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)
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.