分割テクスチャ画像threejs

Question

に私は、私は1枚の画像に重ね、この形式でパノラマを持ってthree.jsを使ってキューブマップパノラマを表示するに取り組んでいます：

cubemap panorama

私はTHREE.ImageUtils.loadTexture(url)を使用してこのイメージをロードし、私はことができましたこのtutorialに記載されているようにfaceVertexUvsの配列を変更して表示するが、テクスチャにはsampler2D、uv座標ではフラグメントシェーダのtexture2Dを使用しなければならなかった。

しかし、フラグメントシェーダでtextureCubeの機能を使用したいのですが（それは、あるトリックを実行するのに必要な方向ベクトルを取るので）、値がそれぞれの面に6つの分離されたイメージの配列を持つテクスチャである変数samplerCubeが必要ですキューブの

ですから、イメージテクスチャを6つのイメージに分割するにはどうすればよいですか？

Answer 1

残念ながら、WebGLで簡単に画像を分割する方法はありません。あなたはキューブマップのあらゆる面を描画するためにレンダリングをテクスチャに使用する可能性がありますが、キャンバスを使う方が簡単だと思います。

var cubemapImage, // the cubemap 
    cubemapSize, // size of a side of the cubemap 
    posXImageCtx = document.createElement('canvas').getContext('2d'), 
    negXImageCtx, posYImageCtx, /* etc */; 

posXImageCtx.canvas.width = posXImageCtx.canvas.height = cubemapSize; 
posXImageCtx.drawImage(
    cubemapImage, 
    0, 0, 
    cubemapSize, cubemapSize, 
    0, 0, 
    cubemapSize, cubemapSize 
); 

/* by analogy other sides */ 

var cubemap = new THREE.CubeTexture([ 
     posXImageCtx.canvas, 
     negXImageCtx.canvas, 
     posYImageCtx.canvas, 
     /* etc */ 
    ], /* ... */);