We Keep Coding

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;
}
});

Invisible material when exporting to .glb instead of .gltf

I have exported model using gltf exporter included in blender 2.8. Exporting to .gltf works fine but when exporting to .glb I cannot see the texture anymore. What is weird is that if I check .glb file in gltf viewer https://gltf-viewer.donmccurdy.com/ it works fine while in my environment and in three.js editor https://threejs.org/editor/ texture is black. Why does this happen and how to fix it? Does the gltf viewer load something differently? Here is the model to check for yourself https://drive.google.com/open?id=1gqdujds0VAgU__92GgTMsgWkO1BbbnPJ
glTF Viewer - works fine
Three.js editor - black texture (ambientlight is added)

glTF Viewer - works fine
That's because the viewer applies an environment map to the materials of your skinned mesh. This is not true for the editor. When you load the model in the viewer, just select for environment the value None in order to see this effect.
Instead of using an environment map, you can also set the metalness value for all materials from 1 to 0. Why a metalness value of 1 is problematic in your case is explained here:
https://stackoverflow.com/a/53349297/5250847

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

Three.js: animated gltf model looks disconnected in three.js

I made a gltf file with bone animation by using Blender.
It works well in Blender but not in Three.js
The model looks disconnected when they are moving.
Comparing my model in blender(upper pics) and in three.js
I tried several ways to solve it but did not make it.
Can you give me a solution to this?

Saving and loading a mesh into a file

I have several screens on stage, and are slow to load. so I have the idea to put it in a file and then load the meshes and add them to the scene. how can I do this? I have seen examples with
"THREE.JSONLoader()"
but can not find something like that where you see how the mesh is saved in a file and then load the full mesh from file.
My meshes are very big about 9000 vertices per file.