WebGL context creation error

Please help me to see why the error is reported in the import of glb model by threejs. Thank you.

threejs version: 0.150.1

import * as THREE from 'three'
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import modelFile from '@/assets/models/glb/bee.glb?url'
import {GUI} from 'dat.gui'

const gui = new GUI()
const {innerWidth: WIDTH, innerHeight: HEIGHT} = window
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(45, WIDTH / HEIGHT, .1, 1000)
camera.position.set(20, 20, 10)

const hemisphereLight = new THREE.HemisphereLight(0x666666, 0xffffff, 3)
hemisphereLight.position.set(100, 100, 100)

const clock = new THREE.Clock()
const gltfLoader = new GLTFLoader()
const store = {
    animation: null,
    mixer: null,
    action: null,
    clip: null
const control = {
    index: 0
gltfLoader.load(modelFile, model => {
    animationSetup(model, control.index)

const animationSetup = (model, index) => {
    store.mixer = new THREE.AnimationMixer(model.scene)
    store.animation = model.animations[index]
    store.action = store.mixer.clipAction(store.animation).play()
    store.clip = store.action.getClip()

const guiSetup = (model) => {
    gui.add(control, 'index', model.animations.map((v, i) => i)).onChange(i => {
        animationSetup(model, i)

const renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(WIDTH, HEIGHT)
renderer.shadowMap.enabled = true
new OrbitControls(camera, renderer.domElement)
const render = () => {
    if (store.mixer && store.action) {
    renderer.render(scene, camera)


I suspect you get this error with any WebGL (2) application. Can you please verify whether your device supports WebGL 2 or not? What do you see when you open this page? WebGL Report

1 Like

Thanks for the tip

Try using WebGL1Renderer as a workaround.

1 Like

Thank you, I used WebGL1Renderer the error is gone, but the GLB model is still not rendering, it was working until I updated the threejs version, the old version was 0.139.0, I don’t know why. :joy:

When latest version

When 0.139.0

There is a warning in the browser console in your first screenshot that explains the issue. With r147, support for the KHR_materials_pbrSpecularGlossiness extension was removed from GLTFLoader. You have to convert your glTF asset from spec/gloss to metal/rough, see: Converting glTF PBR materials from spec/gloss to metal/rough.

1 Like

Yes, thank you very much for your help! :smile: