'React ThreeJs not showing actual model when loading

I'm trying to load a model in gltf format using react three fiber but it shows somewhere black somewhere white not the actual model. How can I fix that?

This is my actual model image :

model image

this is what I got when I loaded the model: enter image description here

I used ambient light.directional light but nothing works. Tried with different models but the result is same. Sometimes it shows black version of the model.

Here is my code:`

import { Suspense } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Stats } from "@react-three/drei";

import Model from "./Model";

export default function App() {
  return (
   
      <Canvas style={{ height: 800, width: 800 }}>
        <OrbitControls
          enableZoom={false}
          rotateSpeed={2}
          autoRotate={true}
          autoRotateSpeed={5}
        />
        <ambientLight intensity={0.6} />
        <directionalLight intensity={0.5} />
        <Suspense fallback={null}>
          <Model />
        </Suspense>
      </Canvas>
  
  );
}

`

Here is the model code I generated using gltsjsx:

    /*
Auto-generated by: https://github.com/pmndrs/gltfjsx
author: Fishboe (https://sketchfab.com/ministephen)
license: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/)
source: https://sketchfab.com/3d-models/jaguardaimler-xj-x308-pack-50f5cb8779f74b0790b68a709d97447b
title: Jaguar/Daimler XJ X308 Pack
*/

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model(props) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/scene.gltf')
  return (
    <group ref={group} {...props} dispose={null}>
      <group rotation={[-Math.PI / 2, 0, 0]}>
        <group rotation={[Math.PI / 2, 0, 0]}>
          <group position={[0, 0, -3.7]} rotation={[-Math.PI, 0, -Math.PI]}>
            <group position={[0, 0.86, 0.52]}>
              <mesh geometry={nodes.Object_5.geometry} material={materials.PaintSilver} />
              <mesh geometry={nodes.Object_6.geometry} material={nodes.Object_6.material} />
              <mesh geometry={nodes.Object_7.geometry} material={nodes.Object_7.material} />
              <mesh geometry={nodes.Object_8.geometry} material={nodes.Object_8.material} />
              <mesh geometry={nodes.Object_9.geometry} material={nodes.Object_9.material} />
              <mesh geometry={nodes.Object_10.geometry} material={nodes.Object_10.material} />
              <mesh geometry={nodes.Object_11.geometry} material={nodes.Object_11.material} />
              <mesh geometry={nodes.Object_12.geometry} material={nodes.Object_12.material} />
              <mesh geometry={nodes.Object_13.geometry} material={nodes.Object_13.material} />
              <mesh geometry={nodes.Object_14.geometry} material={nodes.Object_14.material} />
              <mesh geometry={nodes.Object_15.geometry} material={nodes.Object_15.material} />
              <mesh geometry={nodes.Object_16.geometry} material={nodes.Object_16.material} />
              <mesh geometry={nodes.Object_17.geometry} material={nodes.Object_17.material} />
            </group>
            <group position={[-0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_19.geometry} material={nodes.Object_19.material} />
            </group>
            <group position={[-0.77, 0.34, 1.33]}>
              <mesh geometry={nodes.Object_21.geometry} material={nodes.Object_21.material} />
            </group>
            <group position={[0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_23.geometry} material={nodes.Object_23.material} />
            </group>
            <group position={[0.77, 0.34, 1.33]}>
              <mesh geometry={nodes.Object_25.geometry} material={nodes.Object_25.material} />
            </group>
            <group position={[-0.77, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_27.geometry} material={nodes.Object_27.material} />
              <mesh geometry={nodes.Object_28.geometry} material={nodes.Object_28.material} />
              <mesh geometry={nodes.Object_29.geometry} material={nodes.Object_29.material} />
              <mesh geometry={nodes.Object_30.geometry} material={nodes.Object_30.material} />
            </group>
            <group position={[-0.77, 0.34, 1.29]}>
              <mesh geometry={nodes.Object_32.geometry} material={nodes.Object_32.material} />
              <mesh geometry={nodes.Object_33.geometry} material={nodes.Object_33.material} />
              <mesh geometry={nodes.Object_34.geometry} material={nodes.Object_34.material} />
              <mesh geometry={nodes.Object_35.geometry} material={nodes.Object_35.material} />
            </group>
            <group position={[0.77, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_37.geometry} material={nodes.Object_37.material} />
              <mesh geometry={nodes.Object_38.geometry} material={nodes.Object_38.material} />
              <mesh geometry={nodes.Object_39.geometry} material={nodes.Object_39.material} />
              <mesh geometry={nodes.Object_40.geometry} material={nodes.Object_40.material} />
            </group>
            <group position={[0.77, 0.34, 1.29]}>
              <mesh geometry={nodes.Object_42.geometry} material={nodes.Object_42.material} />
              <mesh geometry={nodes.Object_43.geometry} material={nodes.Object_43.material} />
              <mesh geometry={nodes.Object_44.geometry} material={nodes.Object_44.material} />
              <mesh geometry={nodes.Object_45.geometry} material={nodes.Object_45.material} />
            </group>
          </group>
          <group position={[-3.1, 0, -2.67]} rotation={[-Math.PI, -Math.PI / 9, -Math.PI]}>
            <group position={[0, 0.86, 0.52]}>
              <mesh geometry={nodes.Object_48.geometry} material={materials.PaintBlue} />
              <mesh geometry={nodes.Object_49.geometry} material={nodes.Object_49.material} />
              <mesh geometry={nodes.Object_50.geometry} material={nodes.Object_50.material} />
              <mesh geometry={nodes.Object_51.geometry} material={nodes.Object_51.material} />
              <mesh geometry={nodes.Object_52.geometry} material={nodes.Object_52.material} />
              <mesh geometry={nodes.Object_53.geometry} material={nodes.Object_53.material} />
              <mesh geometry={nodes.Object_54.geometry} material={nodes.Object_54.material} />
              <mesh geometry={nodes.Object_55.geometry} material={nodes.Object_55.material} />
              <mesh geometry={nodes.Object_56.geometry} material={nodes.Object_56.material} />
              <mesh geometry={nodes.Object_57.geometry} material={materials.XJSovereign_Badging} />
              <mesh geometry={nodes.Object_58.geometry} material={nodes.Object_58.material} />
              <mesh geometry={nodes.Object_59.geometry} material={nodes.Object_59.material} />
            </group>
            <group position={[-0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_61.geometry} material={nodes.Object_61.material} />
            </group>
            <group position={[-0.77, 0.34, 1.45]}>
              <mesh geometry={nodes.Object_63.geometry} material={nodes.Object_63.material} />
            </group>
            <group position={[0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_65.geometry} material={nodes.Object_65.material} />
            </group>
            <group position={[0.77, 0.34, 1.45]}>
              <mesh geometry={nodes.Object_67.geometry} material={nodes.Object_67.material} />
            </group>
            <group position={[-0.77, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_69.geometry} material={nodes.Object_69.material} />
              <mesh geometry={nodes.Object_70.geometry} material={nodes.Object_70.material} />
              <mesh geometry={nodes.Object_71.geometry} material={nodes.Object_71.material} />
              <mesh geometry={nodes.Object_72.geometry} material={nodes.Object_72.material} />
            </group>
            <group position={[-0.76, 0.34, 1.41]}>
              <mesh geometry={nodes.Object_74.geometry} material={nodes.Object_74.material} />
              <mesh geometry={nodes.Object_75.geometry} material={nodes.Object_75.material} />
              <mesh geometry={nodes.Object_76.geometry} material={nodes.Object_76.material} />
              <mesh geometry={nodes.Object_77.geometry} material={nodes.Object_77.material} />
            </group>
            <group position={[0.76, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_79.geometry} material={nodes.Object_79.material} />
              <mesh geometry={nodes.Object_80.geometry} material={nodes.Object_80.material} />
              <mesh geometry={nodes.Object_81.geometry} material={nodes.Object_81.material} />
              <mesh geometry={nodes.Object_82.geometry} material={nodes.Object_82.material} />
            </group>
            <group position={[0.76, 0.34, 1.41]}>
              <mesh geometry={nodes.Object_84.geometry} material={nodes.Object_84.material} />
              <mesh geometry={nodes.Object_85.geometry} material={nodes.Object_85.material} />
              <mesh geometry={nodes.Object_86.geometry} material={nodes.Object_86.material} />
              <mesh geometry={nodes.Object_87.geometry} material={nodes.Object_87.material} />
            </group>
          </group>
          <group position={[0, 0, 3.83]} rotation={[-Math.PI, 0, -Math.PI]}>
            <group position={[0, 0.86, 0.52]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_90.geometry} material={materials.PaintGreen} />
              <mesh geometry={nodes.Object_91.geometry} material={nodes.Object_91.material} />
              <mesh geometry={nodes.Object_92.geometry} material={nodes.Object_92.material} />
              <mesh geometry={nodes.Object_93.geometry} material={nodes.Object_93.material} />
              <mesh geometry={nodes.Object_94.geometry} material={nodes.Object_94.material} />
              <mesh geometry={nodes.Object_95.geometry} material={nodes.Object_95.material} />
              <mesh geometry={nodes.Object_96.geometry} material={nodes.Object_96.material} />
              <mesh geometry={nodes.Object_97.geometry} material={nodes.Object_97.material} />
              <mesh geometry={nodes.Object_98.geometry} material={nodes.Object_98.material} />
              <mesh geometry={nodes.Object_99.geometry} material={nodes.Object_99.material} />
              <mesh geometry={nodes.Object_100.geometry} material={materials.XJR_Badging} />
              <mesh geometry={nodes.Object_101.geometry} material={nodes.Object_101.material} />
              <mesh geometry={nodes.Object_102.geometry} material={nodes.Object_102.material} />
            </group>
            <group position={[-0.77, 0.34, -1.62]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_104.geometry} material={nodes.Object_104.material} />
            </group>
            <group position={[-0.77, 0.34, 1.33]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_106.geometry} material={nodes.Object_106.material} />
            </group>
            <group position={[0.77, 0.34, -1.62]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_108.geometry} material={nodes.Object_108.material} />
            </group>
            <group position={[0.77, 0.34, 1.33]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_110.geometry} material={nodes.Object_110.material} />
            </group>
            <group position={[-0.77, 0.34, -1.66]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_112.geometry} material={nodes.Object_112.material} />
              <mesh geometry={nodes.Object_113.geometry} material={nodes.Object_113.material} />
              <mesh geometry={nodes.Object_114.geometry} material={nodes.Object_114.material} />
              <mesh geometry={nodes.Object_115.geometry} material={nodes.Object_115.material} />
            </group>
            <group position={[-0.77, 0.34, 1.29]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_117.geometry} material={nodes.Object_117.material} />
              <mesh geometry={nodes.Object_118.geometry} material={nodes.Object_118.material} />
              <mesh geometry={nodes.Object_119.geometry} material={nodes.Object_119.material} />
              <mesh geometry={nodes.Object_120.geometry} material={nodes.Object_120.material} />
            </group>
            <group position={[0.77, 0.34, -1.66]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_122.geometry} material={nodes.Object_122.material} />
              <mesh geometry={nodes.Object_123.geometry} material={nodes.Object_123.material} />
              <mesh geometry={nodes.Object_124.geometry} material={nodes.Object_124.material} />
              <mesh geometry={nodes.Object_125.geometry} material={nodes.Object_125.material} />
            </group>
            <group position={[0.77, 0.34, 1.29]} rotation={[-Math.PI, 0, -Math.PI]}>
              <mesh geometry={nodes.Object_127.geometry} material={nodes.Object_127.material} />
              <mesh geometry={nodes.Object_128.geometry} material={nodes.Object_128.material} />
              <mesh geometry={nodes.Object_129.geometry} material={nodes.Object_129.material} />
              <mesh geometry={nodes.Object_130.geometry} material={nodes.Object_130.material} />
            </group>
          </group>
          <group position={[3.1, 0, -2.67]} rotation={[-Math.PI, Math.PI / 9, -Math.PI]}>
            <group position={[0, 0.86, 0.52]}>
              <mesh geometry={nodes.Object_133.geometry} material={materials.PaintSeafrost} />
              <mesh geometry={nodes.Object_134.geometry} material={nodes.Object_134.material} />
              <mesh geometry={nodes.Object_135.geometry} material={nodes.Object_135.material} />
              <mesh geometry={nodes.Object_136.geometry} material={nodes.Object_136.material} />
              <mesh geometry={nodes.Object_137.geometry} material={nodes.Object_137.material} />
              <mesh geometry={nodes.Object_138.geometry} material={nodes.Object_138.material} />
              <mesh geometry={nodes.Object_139.geometry} material={nodes.Object_139.material} />
              <mesh geometry={nodes.Object_140.geometry} material={nodes.Object_140.material} />
              <mesh geometry={nodes.Object_141.geometry} material={nodes.Object_141.material} />
              <mesh geometry={nodes.Object_142.geometry} material={nodes.Object_142.material} />
              <mesh geometry={nodes.Object_143.geometry} material={nodes.Object_143.material} />
              <mesh geometry={nodes.Object_144.geometry} material={nodes.Object_144.material} />
              <mesh geometry={nodes.Object_145.geometry} material={nodes.Object_145.material} />
            </group>
            <group position={[-0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_147.geometry} material={nodes.Object_147.material} />
            </group>
            <group position={[-0.77, 0.34, 1.33]}>
              <mesh geometry={nodes.Object_149.geometry} material={nodes.Object_149.material} />
            </group>
            <group position={[0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_151.geometry} material={nodes.Object_151.material} />
            </group>
            <group position={[0.77, 0.34, 1.33]}>
              <mesh geometry={nodes.Object_153.geometry} material={nodes.Object_153.material} />
            </group>
            <group position={[0.76, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_155.geometry} material={nodes.Object_155.material} />
              <mesh geometry={nodes.Object_156.geometry} material={nodes.Object_156.material} />
              <mesh geometry={nodes.Object_157.geometry} material={nodes.Object_157.material} />
              <mesh geometry={nodes.Object_158.geometry} material={nodes.Object_158.material} />
            </group>
            <group position={[-0.76, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_160.geometry} material={nodes.Object_160.material} />
              <mesh geometry={nodes.Object_161.geometry} material={nodes.Object_161.material} />
              <mesh geometry={nodes.Object_162.geometry} material={nodes.Object_162.material} />
              <mesh geometry={nodes.Object_163.geometry} material={nodes.Object_163.material} />
            </group>
            <group position={[-0.76, 0.34, 1.29]}>
              <mesh geometry={nodes.Object_165.geometry} material={nodes.Object_165.material} />
              <mesh geometry={nodes.Object_166.geometry} material={nodes.Object_166.material} />
              <mesh geometry={nodes.Object_167.geometry} material={nodes.Object_167.material} />
              <mesh geometry={nodes.Object_168.geometry} material={nodes.Object_168.material} />
            </group>
            <group position={[0.76, 0.34, 1.29]}>
              <mesh geometry={nodes.Object_170.geometry} material={nodes.Object_170.material} />
              <mesh geometry={nodes.Object_171.geometry} material={nodes.Object_171.material} />
              <mesh geometry={nodes.Object_172.geometry} material={nodes.Object_172.material} />
              <mesh geometry={nodes.Object_173.geometry} material={nodes.Object_173.material} />
            </group>
          </group>
          <group position={[3.1, 0, 3.33]} rotation={[-Math.PI, Math.PI / 9, -Math.PI]}>
            <group position={[0, 0.86, 0.52]}>
              <mesh geometry={nodes.Object_176.geometry} material={materials.PaintRed} />
              <mesh geometry={nodes.Object_177.geometry} material={nodes.Object_177.material} />
              <mesh geometry={nodes.Object_178.geometry} material={nodes.Object_178.material} />
              <mesh geometry={nodes.Object_179.geometry} material={nodes.Object_179.material} />
              <mesh geometry={nodes.Object_180.geometry} material={nodes.Object_180.material} />
              <mesh geometry={nodes.Object_181.geometry} material={nodes.Object_181.material} />
              <mesh geometry={nodes.Object_182.geometry} material={nodes.Object_182.material} />
              <mesh geometry={nodes.Object_183.geometry} material={nodes.Object_183.material} />
              <mesh geometry={nodes.Object_184.geometry} material={nodes.Object_184.material} />
              <mesh geometry={nodes.Object_185.geometry} material={nodes.Object_185.material} />
              <mesh geometry={nodes.Object_186.geometry} material={nodes.Object_186.material} />
              <mesh geometry={nodes.Object_187.geometry} material={nodes.Object_187.material} />
              <mesh geometry={nodes.Object_188.geometry} material={nodes.Object_188.material} />
            </group>
            <group position={[-0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_190.geometry} material={nodes.Object_190.material} />
            </group>
            <group position={[-0.77, 0.34, 1.45]}>
              <mesh geometry={nodes.Object_192.geometry} material={nodes.Object_192.material} />
            </group>
            <group position={[0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_194.geometry} material={nodes.Object_194.material} />
            </group>
            <group position={[0.77, 0.34, 1.45]}>
              <mesh geometry={nodes.Object_196.geometry} material={nodes.Object_196.material} />
            </group>
            <group position={[-0.77, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_198.geometry} material={nodes.Object_198.material} />
              <mesh geometry={nodes.Object_199.geometry} material={nodes.Object_199.material} />
              <mesh geometry={nodes.Object_200.geometry} material={nodes.Object_200.material} />
              <mesh geometry={nodes.Object_201.geometry} material={nodes.Object_201.material} />
            </group>
            <group position={[-0.76, 0.34, 1.41]}>
              <mesh geometry={nodes.Object_203.geometry} material={nodes.Object_203.material} />
              <mesh geometry={nodes.Object_204.geometry} material={nodes.Object_204.material} />
              <mesh geometry={nodes.Object_205.geometry} material={nodes.Object_205.material} />
              <mesh geometry={nodes.Object_206.geometry} material={nodes.Object_206.material} />
            </group>
            <group position={[0.76, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_208.geometry} material={nodes.Object_208.material} />
              <mesh geometry={nodes.Object_209.geometry} material={nodes.Object_209.material} />
              <mesh geometry={nodes.Object_210.geometry} material={nodes.Object_210.material} />
              <mesh geometry={nodes.Object_211.geometry} material={nodes.Object_211.material} />
            </group>
            <group position={[0.76, 0.34, 1.41]}>
              <mesh geometry={nodes.Object_213.geometry} material={nodes.Object_213.material} />
              <mesh geometry={nodes.Object_214.geometry} material={nodes.Object_214.material} />
              <mesh geometry={nodes.Object_215.geometry} material={nodes.Object_215.material} />
              <mesh geometry={nodes.Object_216.geometry} material={nodes.Object_216.material} />
            </group>
          </group>
          <group position={[-3.1, 0, 3.33]} rotation={[-Math.PI, -Math.PI / 9, -Math.PI]}>
            <group position={[0, 0.86, 0.52]}>
              <mesh geometry={nodes.Object_219.geometry} material={materials.PaintBlack} />
              <mesh geometry={nodes.Object_220.geometry} material={nodes.Object_220.material} />
              <mesh geometry={nodes.Object_221.geometry} material={nodes.Object_221.material} />
              <mesh geometry={nodes.Object_222.geometry} material={nodes.Object_222.material} />
              <mesh geometry={nodes.Object_223.geometry} material={nodes.Object_223.material} />
              <mesh geometry={nodes.Object_224.geometry} material={nodes.Object_224.material} />
              <mesh geometry={nodes.Object_225.geometry} material={nodes.Object_225.material} />
              <mesh geometry={nodes.Object_226.geometry} material={nodes.Object_226.material} />
              <mesh geometry={nodes.Object_227.geometry} material={nodes.Object_227.material} />
              <mesh geometry={nodes.Object_228.geometry} material={nodes.Object_228.material} />
              <mesh geometry={nodes.Object_229.geometry} material={nodes.Object_229.material} />
              <mesh geometry={nodes.Object_230.geometry} material={nodes.Object_230.material} />
              <mesh geometry={nodes.Object_231.geometry} material={nodes.Object_231.material} />
            </group>
            <group position={[-0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_233.geometry} material={nodes.Object_233.material} />
            </group>
            <group position={[-0.77, 0.34, 1.33]}>
              <mesh geometry={nodes.Object_235.geometry} material={nodes.Object_235.material} />
            </group>
            <group position={[0.77, 0.34, -1.62]}>
              <mesh geometry={nodes.Object_237.geometry} material={nodes.Object_237.material} />
            </group>
            <group position={[0.77, 0.34, 1.33]}>
              <mesh geometry={nodes.Object_239.geometry} material={nodes.Object_239.material} />
            </group>
            <group position={[-0.76, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_241.geometry} material={nodes.Object_241.material} />
              <mesh geometry={nodes.Object_242.geometry} material={nodes.Object_242.material} />
              <mesh geometry={nodes.Object_243.geometry} material={nodes.Object_243.material} />
              <mesh geometry={nodes.Object_244.geometry} material={nodes.Object_244.material} />
            </group>
            <group position={[-0.76, 0.34, 1.29]}>
              <mesh geometry={nodes.Object_246.geometry} material={nodes.Object_246.material} />
              <mesh geometry={nodes.Object_247.geometry} material={nodes.Object_247.material} />
              <mesh geometry={nodes.Object_248.geometry} material={nodes.Object_248.material} />
              <mesh geometry={nodes.Object_249.geometry} material={nodes.Object_249.material} />
            </group>
            <group position={[0.76, 0.34, -1.66]}>
              <mesh geometry={nodes.Object_251.geometry} material={nodes.Object_251.material} />
              <mesh geometry={nodes.Object_252.geometry} material={nodes.Object_252.material} />
              <mesh geometry={nodes.Object_253.geometry} material={nodes.Object_253.material} />
              <mesh geometry={nodes.Object_254.geometry} material={nodes.Object_254.material} />
            </group>
            <group position={[0.76, 0.34, 1.29]}>
              <mesh geometry={nodes.Object_256.geometry} material={nodes.Object_256.material} />
              <mesh geometry={nodes.Object_257.geometry} material={nodes.Object_257.material} />
              <mesh geometry={nodes.Object_258.geometry} material={nodes.Object_258.material} />
              <mesh geometry={nodes.Object_259.geometry} material={nodes.Object_259.material} />
            </group>
          </group>
          <mesh geometry={nodes.Object_261.geometry} material={nodes.Object_261.material} />
          <mesh geometry={nodes.Object_262.geometry} material={nodes.Object_262.material} />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/scene.gltf')


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source