如何在 mapbox 顶部添加 three.js 对象

Question

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

如果 deck.gl code/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 canvas 然后增加 z-index：

app.js:

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

css:

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

如何在 mapbox 顶部添加 three.js 对象

How to add three.js object on top of mapbox

reactjs

three.js

deck.gl

react-map-gl