6 つの個別の画像ファイルを使用して three.js スカイボックスを作成できます。しかし、タイルで構成された単一の画像からスカイボックスを構築できるようにしたいと考えています。
たとえば、ソースとして複合タイル画像がある場合 (( http://www.zen226082.zen.co.uk/STACK_EXCHANGE/Giant_A.jpgを参照)...ここに投稿するのに十分な担当者がいません:-(。
合成画像をキャンバスにロードし、各タイルをキャッシュ バッファーにコピーしてから、それらを Three.js マテリアル配列に送信できます。次に、材料を使用してスカイボックスを作成します。
ただし、2 つの問題があります。
問題 1 は、合成画像を反転する必要があることです。これは、Paint.net などのグラフィック アプリで簡単に実行できますが、javascript/three.js でプログラムによって実行できると便利です。
問題 2 は、Three.js では Y+ と Y- のタイルも 180 度回転する必要があることです。これをグラフィックス アプリケーションで行うのは (私にとっては) 難しいことです。たとえば、これは、私が使用している Three.js コードに合わせて変更した後の複合タイル画像です ( http://www.zen226082.zen.co.uk/STACK_EXCHANGE/Giant_B.jpg ) (恐ろしい!)
私の質問 = 2 つのタイルを合成画像から抽出した後、それらをスカイボックス構造に渡す前に 180 度回転させる方法はありますか?
編集 (2014 年 8 月 10 日) 質問は、「12 個の同じサイズのタイルで構成される単一の画像ファイルから three.js skyBox を作成する方法」である必要があります。
これが私が使用しているコードです:-
var skyBoxGeometry = new THREE.CubeGeometry(skybox_sidelength,skybox_sidelength,skybox_sidelength);
var skyBoxMaterialArray = [];
var widthOfOnePiece = 2048/4;//...i.e. 512
var heightOfOnePiece = 1536/3;//...i.e. 512
var numColsToCut = 4;
var numRowsToCut = 3;
var image = new Image();
image.src = "TRI_VP_files/images/SOW_skybox_2048_1536_v7.jpg";
image.onload = SOW_F_cutImageUp;
//... NB canvas origin is Top Left corner, X is left to right, Y is top to bottom
function SOW_F_cutImageUp() {
var imagePieces = [];
for(var xxx = 0; xxx < numColsToCut; ++xxx)
{
for(var yyy = 0; yyy < numRowsToCut; ++yyy)
{
var canvas = document.createElement('canvas');
canvas.width = widthOfOnePiece;
canvas.height = heightOfOnePiece;
var context = canvas.getContext('2d');
context.drawImage(image,
xxx * widthOfOnePiece, yyy * heightOfOnePiece, widthOfOnePiece, heightOfOnePiece, 0, 0, canvas.width, canvas.height);
imagePieces.push(canvas.toDataURL());
}
}
//... expected sequence of face view directions = ["xpos", "xneg", "ypos", "yneg", "zpos", "zneg"];
for (var iii = 0; iii < 6; iii++)
{
if (iii == 0) imagePiece_num = 4 //... xpos
else if (iii == 1) imagePiece_num = 10//... xneg
else if (iii == 2) imagePiece_num = 6 //... ypos
else if (iii == 3) imagePiece_num = 8 //... yneg
else if (iii == 4) imagePiece_num = 1 //... zpos
else if (iii == 5) imagePiece_num = 7 //... zneg
skyBoxMaterialArray.push
( new THREE.MeshBasicMaterial
( {map: THREE.ImageUtils.loadTexture(imagePieces[imagePiece_num]),
side: THREE.BackSide}));
//window.open(imagePieces[imagePiece_num], "Here is the toDataURL() cached image", "width=512, height=512");
//alert ("Continue");
}
}//... end of function.
var skyBoxMaterial = new THREE.MeshFaceMaterial( skyBoxMaterialArray );
var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
scene222.add( skyBox );