Model Loads but not shown

[adem-enes]

Issue: One GLTF Model Not Rendering in React Project

Description

I'm using React with TypeScript (created using Vite) and the following dependencies:

{
  "@react-three/drei": "^9.120.5",
  "@react-three/fiber": "^8.17.10",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "three": "^0.172.0"
}

For my project, I have two 3D models. Both of them were converted from .obj to .gltf, and I used gltfjsx with the -t flag to convert them into React components.

One of the models renders and displays perfectly on gltf.pmnd.rs. However, when I load it into my React project, it does not render.

I tested both the models using the useLoader hook. All of them are loaded successfully and can be logged in the console, except for this specific model, which fails to display.

Steps to Reproduce

1. Clone the repository: adem-enes/r3f-test
2. npm i && npm run dev
3. You'll see two buttons on top left corner named 1 and 2. 1 for working model and 2 for problematic model

Additional Information

• No errors or warnings appear in the browser console.
• The problematic model has no textures, only plain grey color, similar to the other models.
• File size comparison:
  • Non-working model: ~1.6 MB
  • Working converted model: ~6.1 MB
• I tested loading the problematic model in isolation, but the issue persists.
• No transformations, shaders, or custom logic are applied to the models.

Expected Behavior

The problematic GLTF model should render correctly in the React project, as it does on gltf.pmnd.rs.

Actual Behavior

The model does not render in the React project, despite being successfully loaded and logged in the console.

---

Let me know if you'd like further revisions!