OpenLayers地图作为纹理在THREE.js飞机上

时间:2017-01-03 18:24:15

标签: three.js openlayers-3

我希望在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画布元素中完美地看到地图。如果不是使用OpenLayers地图而是使用fillRect或类似的东西在画布上绘制,那么平面可以很好地获得纹理。我究竟做错了什么? (我使用OL3和THREE r71)

1 个答案:

答案 0 :(得分:0)

正如2pha建议的那样,我需要在地图完全加载后设置texture.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);
});