WebGL context creation error

Questions
,
1

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)
camera.lookAt(scene.position)

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

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 => {
    scene.add(model.scene)
    animationSetup(model, control.index)
    guiSetup(model)
})

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
document.body.appendChild(renderer.domElement)
new OrbitControls(camera, renderer.domElement)
const render = () => {
    if (store.mixer && store.action) {
        store.mixer.update(clock.getDelta())
    }
    requestAnimationFrame(render)
    renderer.render(scene, camera)
}

render()

image
image1856×666 49 KB

2

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
4

Thanks for the tip

image
image1494×355 36.4 KB

5

Try using WebGL1Renderer as a workaround.

1 Like
6

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

image
image1905×715 37.7 KB

When 0.139.0

image
image1920×744 157 KB

7

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
8

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