OpenLayers在THREE.js平面上映射为纹理

我希望在THREE.js中使用OpenLayers贴图作为平面的纹理。我知道可以加载画布元素作为平面材质的纹理，所以我尝试了不同的方法来实现这一点，但没有成功。首先，我在DOM中创建一个canvas元素，使用

id=map

。然后，我在上面创建了一个地图：

  const layers = [
      new ol.layer.Tile({
         source: new ol.source.OSM()
      })
  ];
  const map = new ol.Map({
      layers: layers,
      target: 'map',
      view: new ol.View({
         center: [-10997148, 4569099],
         zoom: 4
      })
  });

然后我尝试将贴图作为纹理加载到我的三个场景中，如：

const texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
const material = new THREE.MeshBasicMaterial({ map : texture, });
const plane = new THREE.Mesh(geometry, material);

scene.add(this.plane);

---

这样做的时候，我只能看到一架黑色的飞机。场景中的其余元素正确渲染，我可以在2D canvas元素中完美地看到贴图。如果不是使用OpenLayers贴图，而是使用

fillRect

或类似的东西在画布上绘制，则平面会很好地获得纹理。我做错了什么？（我正在使用OL3和三个r71）

正如2pha建议的那样，我需要在贴图完全加载后设置

纹理。needsUpdate

，这可以确保使用OpenLayers中的

postrender

贴图事件，例如：

map.on('postrender', () => {
    document.getElementById('map2').children[0].children[0];
    const texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    const material = new THREE.MeshBasicMaterial({ map: texture });
    plane = new THREE.Mesh(geometry, material);
    scene.add(this.plane);
});

---

在贴图完全加载后，您可能需要设置

纹理。needsUpdate

。“map2”是用于三个js的id u吗？此外，“画布”的定义在哪里？？