Error creating WebGL context.

[schwarzsky]

Got an error but console not describing the issue exactly.

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef } from 'react'
import { useGLTF, useProgress } from '@react-three/drei'
import { useFrame, useLoader } from '@react-three/fiber'
import { TextureLoader } from 'three'

const SkinMat = () => {
  const skin = useLoader(TextureLoader, 'skin.png')

  return <meshStandardMaterial map={skin} attach="material" />
}

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF(
    'https://projects.gg/indexpage/model.gltf'
  )
  const { progress } = useProgress()

  useFrame(() => {
    group.current.rotation.y += 0.01
  })

  return (
    <group ref={group} {...props} dispose={null}>
      <group position={[0, 1.5, 0]} rotation={[0.11, -0.09, 0.01]}>
        <mesh
          geometry={nodes.Head_1.geometry}
          material={nodes.Head_1.material}
          position={[0, -1.5, 0]}
        />
        <mesh
          geometry={nodes.Hat_Layer.geometry}
          material={nodes.Hat_Layer.material}
          position={[0, -1.5, 0]}
        />
      </group>
      <group position={[0, 1.5, 0]}>
        <mesh
          geometry={nodes.Body_1.geometry}
          material={nodes.Body_1.material}
          position={[0, -1.5, 0]}
        />
        <mesh
          geometry={nodes.Body_Layer.geometry}
          material={nodes.Body_Layer.material}
          position={[0, -1.5, 0]}
        />
      </group>
      <group position={[0.31, 1.38, 0]} rotation={[0.17, 0, 0]}>
        <mesh
          geometry={nodes.Right_Arm.geometry}
          material={nodes.Right_Arm.material}
          position={[-0.31, -1.38, 0]}
        />
        <mesh
          geometry={nodes.Right_Arm_Layer.geometry}
          material={nodes.Right_Arm_Layer.material}
          position={[-0.31, -1.38, 0]}
        />
      </group>
      <group position={[-0.31, 1.38, 0]} rotation={[-0.21, 0, 0]}>
        <mesh
          geometry={nodes.Left_Arm.geometry}
          material={nodes.Left_Arm.material}
          position={[0.31, -1.38, 0]}
        />
        <mesh
          geometry={nodes.Left_Arm_Layer.geometry}
          material={nodes.Left_Arm_Layer.material}
          position={[0.31, -1.38, 0]}
        />
      </group>
      <group position={[0.12, 0.75, 0]} rotation={[-0.19, -0.01, 0.03]}>
        <mesh
          geometry={nodes.Right_Leg.geometry}
          material={nodes.Right_Leg.material}
          position={[-0.12, -0.75, 0]}
        />
        <mesh
          geometry={nodes.Right_Leg_Layer.geometry}
          material={nodes.Right_Leg_Layer.material}
          position={[-0.12, -0.75, 0]}
        />
      </group>
      <group position={[-0.12, 0.75, 0]} rotation={[0.17, -0.01, -0.03]}>
        <mesh
          geometry={nodes.Left_Leg.geometry}
          material={nodes.Left_Leg.material}
          position={[0.12, -0.75, 0]}
        />
        <mesh
          geometry={nodes.Left_Leg_Layer.geometry}
          material={nodes.Left_Leg_Layer.material}
          position={[0.12, -0.75, 0]}
        />
      </group>
    </group>
  )
}

useGLTF.preload('/model.gltf')

Canvas

<Canvas
       camera={{
          fov: 60,
          position: [1.85, 0.97, 2.34],
          rotation: [-0.11, 0.66, 0.07],
       }}>
         <OrbitControls makeDefault target={modelRef} />
         <ambientLight />
         <Suspense fallback={null}>
         <Model />
         </Suspense>
</Canvas>

[mwmwmw]

This error can indicate that the browser is having trouble accessing your graphics card.

Try this:

1. Close any other graphic applications you might have running (blender, a game, apps, etc)
2. Restart your browser

If that doesn't work
3) Check your graphic driver version.
4) Restart your computer

If none of that works, try to duplicate the issue in a codesandbox

[mwmwmw]

Three JS issue related to this mrdoob/three.js#4927