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)

I had the same issue, it’s even better, if you want to LOL, add 2 cubes and it works. Honestly I think it’s a bug. If you are going to play hard with Mapbox and Three.js I’d recommend you to check threebox out — jscastro
– jscastro, Commented Aug 12, 2020 at 19:01
Thank you, @jscastro! adding second cube solved the problem O_o. I'll definitely checkout threebox. What can you tell about maptalks? — microspace
– microspace, Commented Aug 12, 2020 at 19:07
It’s an amazing framework but I decided to go with mapbox because it’s also the core of Azure Maps and I found several serious issues with models in maptalks — jscastro
– jscastro, Commented Aug 12, 2020 at 19:29

nagix · Accepted Answer · 2021-03-01 08:51:36Z

2

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.

answered Mar 1, 2021 at 8:51

nagix

5564 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related