How to add three.js object on top of mapbox

Question

I'm currently using react, react-map-gl, and three.js. I'd like to render a .obj that I have on top of the react-map-gl.

If the deck.gl code/react-map-gl code is commented out, I currently have my .obj appearing on the screen successfully via:

and in render():

<div 
    className='component-app'
    data-test='component-app'>
    <DeckGL
      layers={this._renderLayers()}
      controller={controller}
      initialViewState={INITIAL_VIEW_STATE}
      viewState={viewState}
      onViewStateChange={this._onViewStateChange}>
      {baseMap && (
        <StaticMap
          width={width}
          height={height}
          reuseMaps
          mapStyle="mapbox://styles/mapbox/dark-v9"
          preventStyleDiffing={true}
          mapboxApiAccessToken={MAPBOX_TOKEN} />
      )}
    </DeckGL>
    {this._loadObj()}
  </div>

With this, however, my .obj file is always hidden by the map. I'd like to bring it on top of the map. I've tried editing z-index for all these components, to no avail. Would appreciate suggestions.

Answer 1

Got it, the answer lied in simply adding an ID to my car canvas and then increasing z-index:

app.js:

renderer.domElement.id = 'object-canvas';

css:

#object-canvas {
  position: absolute;
  z-index: 10;
}