Как добавить объект three.js поверх mapbox

Question

В настоящее время я использую реагировать, реагировать-карта-gl и three.js. Я хотел бы отобразить .obj, который у меня есть в верхней части реакции-карты-gl.

Если код deck.gl / код response-map-gl закомментирован, мой .obj в настоящее время успешно отображается на экране через:

и 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>

Однако при этом мой файл .obj всегда скрыт картой. Я хотел бы принести это сверху карты. Я пытался редактировать z-index для всех этих компонентов, но безрезультатно. Буду признателен за предложения.

Answer 1

Понял, ответ заключается в простом добавлении идентификатора на холст моего автомобиля и увеличении z-индекса:

app.js:

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

CSS:

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