OpenLayers THREE.js平面上のテクスチャとしてのマップ

Question

THREE.js内のプレーンのテクスチャとしてOpenLayersマップを使用したいと考えています。キャンバス要素をプレーンマテリアルのテクスチャとして読み込むことができるので、それを達成するさまざまな方法を試しましたが、成功しませんでした。まず、id=mapでDOMにキャンバス要素を作成します。その後、私はその上にマップを作成：

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 
     }) 
    }); 

をそして私は次のように私のTHREEシーンにテクスチャとしてマップをロードしようとすると：その際、私は黒のみ飛行機を見ることができます

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などのように描画するのではなく、プレーンがテクスチャをうまく取得できます。私は間違って何をしていますか？マップが完全にロードされた後2phaが示唆したように

Answer 1

（私はOL3三台のR71を使用しています）、私はあなたのようOpenLayersをからpostrenderマップイベントを使用して確保することができ、texture.needsUpdateを設定するために必要な：

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); 
});