如何在mapbox上添加three.js对象

Question

我目前正在使用react，react-map-gl和three.js。我想在react-map-gl之上渲染一个.obj。

如果deck.gl代码/ react-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

知道了，答案只是在我的汽车画布上添加一个ID，然后增加z-index：

app.js：

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

CSS：

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