THREE.MeshBasicMaterial got wrong texture color

[kyonzz]

Hi everyone, I'm new to r3f and recently I have a problem with my 3D object.
I have a 3D glasses FBX file and a texture JPG file.

At first try, after got texture from loader, I made a material object by using THREE.MeshBasicMaterial class and pass it to component's material prop. The result was the color of the glasses is not correct, it seem blurry. I thought the problem was with opacity or transparent but it stay still after I set opacity to 1 and transparent to false

At second try, I put inside component, at this time the color was correct but frame texture overlaped lens texture.

My english was not good enough to explain the problem clearly so I created a CSB app. https://codesandbox.io/s/tx7z6?file=/src/App.js

Hope you guys can help me with this 😟

[drcmda]

fbxloader gives you a nested group. you are ... spreading this group over a mesh. then you give that group materials, none of that will work. a mesh is not a group, a group does not have materials.

you must either use <primitive object={fbxOutput} /> wich dumps the entire group into your scene, which makes exchanging stuff hard (... traversal ☠️) . or build the graph yourself and link up geometries and material. the useGraph hook can be useful here.

i would recommend just not using fbx at all. use gltf and the gltfjsx tool.