I am relatively new to 3js and i was trying to load a model. I downloaded the model as a gltf format and when i load the model it shows up without proper textures/colors. I get an error for unknown extension “KHR_materials_pbrSpecularGlossiness”. I followed the thread to convert the older model as the KHR is deprecated. I followed the cmd method to convert the file but the converted model now has weird colors/textures.
I am not sure what to do
const BlackHole = () => {
const blackHole = useGLTF("/black_hole/scene.gltf");
return <primitive object={blackHole.scene} scale={[0.01, 0.01, 0.01]} position={[0, 0, 0]} />;
};
const BlackHoleCanvas = () => {
return (
<Canvas
shadows
frameloop="demand"
dpr={[1, 2]}
gl={{ preserveDrawingBuffer: true }}
camera={{
fov: 45,
near: 0.1,
far: 1000,
position: [0, 3, 15],
}}
>
<Suspense fallback={<CanvasLoader />}>
<OrbitControls autoRotate enableZoom={false} maxPolarAngle={Math.PI} minPolarAngle={0} />
<BlackHole />
<Preload all />
</Suspense>
</Canvas>
);
};
Have a relatively simple setup for now
Did you export the model from a 3D tool like blender?
Is it possible to provide the model?
If not can you send a screenshot how it is looking right now?
There is nothing wrong with the code as far as i can tell.
Have you seen this thread on stackoverflow?
Hm, this shouldn’t happen! Do the colors/textures look correct (before conversion) in glTF Sample Viewer ? And after conversion, do the colors look incorrect in the same viewer and in https://gltf-viewer.donmccurdy.com/ ?
If the conversion is breaking the model then it’d be great if you could share the model and/or file an issue at GitHub - donmccurdy/glTF-Transform: glTF 2.0 SDK for JavaScript and TypeScript, on Web and Node.js..
This is the particular model im using. And yes i have looked at that thread, i tried the methods but it didn’t seem to work
Hmm i did try out it out in the viewer as well but i got same warning that an extension that is being used is unsupported and the model looked in complete
This is how the model looks in the viewer and also simliar to how it works in my code when i use the cmd line method to convert the model
{
“uri”: “/black_hole.glb”,
“mimeType”: “model/gltf-binary”,
“validatorVersion”: “2.0.0-dev.3.9”,
“validatedAt”: “2024-10-09T06:19:50.126Z”,
“issues”: {
“numErrors”: 0,
“numWarnings”: 1,
“numInfos”: 10,
“numHints”: 0,
“messages”: [
{
“code”: “MULTIPLE_EXTENSIONS”,
“message”: “This extension may be incompatible with other extensions for the object.”,
“severity”: 1,
“pointer”: “/materials/3/extensions/KHR_materials_pbrSpecularGlossiness”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/3/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/4/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/5/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/6/primitives/0/attributes/TEXCOORD_0”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/7/primitives/0/attributes/TEXCOORD_0”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/8/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/9/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/10/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/11/primitives/0/attributes/TEXCOORD_1”
},
{
“code”: “UNUSED_OBJECT”,
“message”: “This object may be unused.”,
“severity”: 2,
“pointer”: “/meshes/12/primitives/0/attributes/TEXCOORD_1”
}
],
“truncated”: false
},
“info”: {
“version”: “2.0”,
“generator”: “Sketchfab-16.33.0”,
“extensionsUsed”: [
“KHR_materials_pbrSpecularGlossiness”,
“KHR_texture_transform”,
“KHR_materials_emissive_strength”
],
“extensionsRequired”: [
“KHR_materials_pbrSpecularGlossiness”
],
“resources”: [
{
“pointer”: “/buffers/0”,
“mimeType”: “application/gltf-buffer”,
“storage”: “glb”,
“byteLength”: 31282616
},
{
“pointer”: “/images/0”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “luminance-alpha”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/1”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgba”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/2”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgba”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/3”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgb”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/4”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgba”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/5”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgb”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/6”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgba”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/7”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 512,
“format”: “rgb”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/8”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 1024,
“height”: 1024,
“format”: “rgba”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/9”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 1024,
“height”: 1024,
“format”: “rgb”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/10”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 1024,
“height”: 1024,
“format”: “rgba”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
},
{
“pointer”: “/images/11”,
“mimeType”: “image/png”,
“storage”: “buffer-view”,
“image”: {
“width”: 512,
“height”: 256,
“format”: “rgb”,
“primaries”: “srgb”,
“transfer”: “srgb”,
“bits”: 8
}
}
],
“animationCount”: 0,
“materialCount”: 9,
“hasMorphTargets”: false,
“hasSkins”: false,
“hasTextures”: true,
“hasDefaultScene”: true,
“drawCallCount”: 14,
“totalVertexCount”: 466279,
“totalTriangleCount”: 534196,
“maxUVs”: 2,
“maxInfluences”: 0,
“maxAttributes”: 4
}
}
Here is the original model shown in babylon.js, with KHR_materials_pbrSpecularGlossiness:
And here’s the model in babylon.js after the extension is removed:
Removing the extension doesn’t change the appearance of the model, and the screenshots here (as well as your own three.js screenshot) all look about as expected to me.
Could you explain what you mean by “the model looked in complete”? Is it the overall brightness/glow? If so, sketchfab demo is using a “bloom” post-processing effect, which isn’t part of the model itself, you would need to set that effect up separately in three.js.
Oh, I see, i was tinkering with the lighting effects but it wasn’t working as expected. But thank you for the help.
It’s never gonna look right unless the background is black. Set your renderer.setClearColor(‘black’)