如何在地图框顶部添加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;
}