Three.js - can't render cube on Mapbox GL JS custom WebGL layer

Question

I'm trying to render the cube using this example: Add a 3D model.

Example work up to 117 version on three.js. Since 118 version example doesn't work: cube disappears immediately after page refresh. I studied changelog and most noticeable change is that since v118 three.js uses WebGL2 as default render engine. So I changed code to use WebGL1, but still cube disappears.

  this.renderer = new THREE.WebGL1Renderer({
  canvas: map.getCanvas(),
  context: gl,
  antialias: true
});

Here is codepen to reproduce the problem. (reload page to see the cube for a moment)

Answer 1

I had the same issue, but it was resolved by replacing renderer.state.reset() in the render() function with renderer.resetState() which was introduced in r124 and improved in r126.

Mapbox example has also been updated.