javascript - Three.js でキャンバスを使用してテクスチャを回転させる

Question

Three.jsを使って、立方体の1つの面に現れるテクスチャを回転させたいです。

この立方体は異なるテクスチャで複数回作成されるため、テクスチャ パラメータを使用して、マテリアルとメッシュを作成する関数を使用します。

ただし、このテクスチャを 90° 回転させる必要があります。キャンバスを作成し、テクスチャを入れて回転させ、このキャンバスをメッシュ テクスチャとして使用するのが最善の方法であることがわかりました。私はこのコードでこれを達成しようとしました: Three.js Rotate Textureですが、残念ながら私は常に黒いテクスチャを取得します。

ここに私の機能があります:

function createCube(pos, texture) {
     var img = new Image();
     img.src = texture;

     var imgWidth = imgHeight = img.width;
     var mapCanvas = document.createElement( 'canvas' );
     mapCanvas.width = mapCanvas.height = img.width;

     // document.body.appendChild( mapCanvas );
     var ctx = mapCanvas.getContext( '2d' );
     ctx.translate( imgWidth / 2, imgHeight / 2 );
     ctx.rotate( Math.PI / 2 );
     ctx.translate( -imgWidth / 2, -imgHeight / 2 );
     ctx.drawImage( img, 0, 0, imgWidth, imgHeight );

     var texture = new THREE.Texture( mapCanvas );
     texture.needsUpdate = true;
     var materials = [
                //Left side (posx)
                new THREE.MeshLambertMaterial({
                    color: 0x1a0e05
                }),
                //Right side (negx)
                new THREE.MeshLambertMaterial({
                    color: 0x1a0e05
                }),
                //Top side (posy)
                new THREE.MeshLambertMaterial({
                    color: 0x1a0e05
                }),
                //Bottom side (negy)
                new THREE.MeshLambertMaterial({
                    color: 0xffffff,
                    map: texture
                }),
                //Front side (posz)
                new THREE.MeshLambertMaterial({
                    color: 0x1a0e05
                }),
                //Back side (negz)
                new THREE.MeshLambertMaterial({
                    color: 0x1a0e05
                })
    ];

    cube = new THREE.Mesh(new THREE.CubeGeometry(100, 2, 100, 1, 1, 1), new THREE.MeshFaceMaterial(materials));

    ...

    return cube;

}

キャンバスに追加されたときにまだ読み込まれていないテクスチャが原因である可能性がありますか? 複数回呼び出された関数内でこのコールバックを使用する方法がわからなかったため、 img.onLoad( Three.js Rotate Textureから)を削除しました...さらに、メッシュを返すこの関数は、extern.onLoad関数を使用して実行できますか?

ありがとう ！