THREE.js: Loading model with JSONLoader loads only half of textures - javascript

After making a house model in blender I've exported it to three.js json format as a single object, but when adding it to scene I got half textures displayed and another half are just grey meshes.
JSON URL (with absolute texture images links): http://pobegushki.meetroll.net/inn1.js
Screenshot of what I get in blender and what I get in production:
Also there are two instances of a barrel model which both has a perfectly mapped material. I tried setting barrel image as a material to floor (simple scaled box mesh), but nothing changed, it still remained grey.
Any ideas?

I think there's a bug in the file loaders/Loader.js (Rev56). At line 332, try to replace:
if ( m.mapDiffuse && texturePath ) {
by
if ( m.mapDiffuse && texturePath != null ) {
(same bug for all types of textures of course)
I stumbled upon this bug this week-end, where my textures were not displayed because texturePath = "".

TATATATAAAM! I've solved the problem (the stupid way tbh, but I got fully textured model).
Behold: http://touhou.ru/upload/56e75518ab580497358741bec62491ff.png
Blender three.js export was creating empty textures for all untextured meshes I got, and I tried copy-pasting non-empty materials to empties. After thousands of page refreshes I got right materials assigned to right meshes.
It took pretty much time, I think I should submit a bugreport :(
UPDATE: Here's why those materials were empty on export:
On the first picture I've selected a mesh which had texture in production and on the second is one which didn't.
Thanks for your attention!

Related

Why the number of vertices of the exported obj model is three will become more

When I tried to export a plane obj model in blender, I found it in three JS, the number of vertices has increased,
obj model
Blender Model
renderer After Renderer
The stray triangles make me think that, rather than additional vertices, what you're seeing is that one or more n-gons in your mesh (faces that have more than three sides) are being triangulated incorrectly somewhere in Blender's exporter or Three's importer.
Blender can handle n-gons (faces that have more than three sides), but a real-time renderer like Three.js thinks in triangles; if you try to give it n-gons instead of triangles, either the exporter or the importer will try to triangulate them by itself, with sometimes unfortunate results.
There are multiple ways to manually triangulate a mesh; here is just one.
In Blender, select your object and press Tab ⭾ to enter Edit Mode. Press 3 to enter Face Selection Mode, then A to select all faces, then F (Vertex » New Edge/Face from Vertices) to merge them into a single face. This may not be strictly necessary depending on particulars of your mesh that are unknown to me, but it gets us to a known state for the next step.
Now your mesh will have one face, and it will be selected. Press CtrlT (Face » Triangulate Faces), and that single face will be split into several triangles, which will look something like the following.
The exact arrangement of the triangles may be different on your own model; what's important, though, is that all of the faces on the model are now triangles.
If you export the model from Blender and import it in Three.js now, it should appear as expected.

Why do these white seams appear on my meshes in AFrame?

I import a GLB scene (with baked textures) in AFrame using THREEjs but for some reason these white lines appear on my objects (check example photo bellow).
The walls are actually grouped meshes so I can somewhat understand why the lines appear, but I cant understand why it happens on the objects too. When I upload the same scene on the THREE.js/editor the white seams don't appear so I assume its a setting that AFrame sets automatiacally?
Each object is a single material with a single "map" texture. Does anyone know why it happens and how to avoid it? Thank you in advance!
An example photo of the white seams. They appear in the perimeter of each unwrapped UV part
Your model has an issue with the alpha buffer. Once you disable its usage in the renderer, the mentioned white lines dissapear
<a-scene renderer="alpha: false"
Check it out here

THREE.js FBXLoader treats .png as if it is a .psd, and doesn't load the material

When using the THREE.js FBXLoader to load a .fbx file, it is loading the model partially, with the alpha textured parts of the model not being loaded.
I am getting the error:
FBXLoader: PSD textures are not supported, creating empty placeholder texture for pinebranchColor.psd
Despite there being no .psd files in the materials folder. As you can see from the below screenshot, it seems to think that in the material alphaMap, the texture name is pinebranchColor.psd.
This is what the FBX model is being rendered as:
And this is what it renders as if I load the GLTF version (note: the transparent parts for the leaves are not picked up as transparent) - which is closer to how it should look, but not fully.
This is how the model is supposed to look, according to sketchfab :
Why do you think it says the alpha material is a .psd? Could this be as referenced in the .fbx file itself? The original problem was how do I get the alpha/transparency for the leaves to render correctly, rather than as block colour. Maybe I could set a property in the THREE.js material of the GLTF version and that would work?
This is the first model I have ever imported into THREE.js as I have just started learning, so please explain as best you can.
EDIT:
In dev tools I found a material for the leaves, and set transparent to true. This worked! To an extent. But there are still some rendering issues. So I think this is the route to go down.
I'm not sure why the FBX alpha material could not be loaded, but I solved the transparency problem with the GLTF version by using the THREE.js scene.traverse function, and setting the material transparent property to true, for all leaf materials in the scene.
This solved the core issue, but there were still some artifacts as seen in this picture, where leaves behind are blacked out:
The solution was to also set alphaTest to 0.5 on the material, giving this result:
Here is the code:
gltf.scene.traverse(child => {
if (child.isMesh && child.name.includes('leaf')) {
child.material.alphaTest = 0.5;
child.material.transparent = true;
}
});

Exporting Textures with Offsets to GLTF from Three.js Scene

EDIT:
I had a question about exporting to obj and mtl but discovered that I could export from three.js using GLTFExporter.js and had success getting the geometry and texture out of three.js from that.
The issue I'm having with the GLTF Exporter is that I have textures that have offset and repeat settings that seem to not be exported from three.js when I open the file in Blender. In Blender the whole texture takes up the MeshPlane that used to only have a small part of the texture showing in Three.js scene.
Might anyone know what I could add to the GLTF Exporter to be able to record and keep the repeat and offset texture settings?
Many Thanks :)
I've hit this myself.. and as far as I know, the answer is No.
Offset and Repeat are THREE.js specific features. Some other libraries have equivalents.. some engines use direct texture matrix manipulation to achieve the same effect.
One workaround is to modify your models UV coordinates before exporting to reflect the settings of texture.offset and texture.repeat.
You would basically multiply each vertex UV by the texture.repeat, and then add texture.offset. That would effectively "bake" those parameters into the model UV's, but then would require you to reset .repeat and .offset back to 1,1 and 0,0 respectively, in order to render the model correctly again in THREE.js.
Here's a slightly relevant thread from the GLTF working group:
https://github.com/KhronosGroup/glTF/issues/107

Reuse image in three.js textures

I'm trying to load with three.js the same image in a large number (~ 1000) of bidimensional shapes but with different offsets in every shape.
I've taken this demo from the official website and customized it into this other demo, with all my shapes and a random background texture.
The problem is that if I clone the texture once per shape the page eats a lot of RAM and it ends up crashing.
You can see this in action by going in the javascript and changing the comments in the addShape function (you'll find the instructions in the code).
I've done some research and found some results, like this open issue or this older question where it's recommended to clone the texture; anyway nothing seems to work in my example.
Am I doing something wrong? It's changed something since these last posts about this problem?
Maybe I´m misunderstanding the problem, but why don´t you change the UV coordinates of the individual shapes to align the texture and use just one texture?
From documentation:
Geometry.faceVertexUvs
Array of face UV layers, used for mapping textures onto the geometry.
Each UV layer is an array of UVs matching the order and number of
vertices in faces.
To signal an update in this array, Geometry.uvsNeedUpdate needs to be
set to true.

Categories