reactjs - 如何在 mapbox 顶部添加三个.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：

应用程序.js：

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

CSS：

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