2

いくつかのスカイボックス画像 (例: Google 画像)を検索すると、横向きの十字パターンで単一の画像を表示するヒットが表示されます。しかし、3 つのすべての js の例 (たとえば) で、6 つの画像を読み込んでいることがわかりました。

1 枚の画像を切り取り、1 枚ではなく 6 枚の画像を余分にロードする必要があるのは奇妙に感じます。

ドキュメントは少しあいまいです (つまり、6 つのイメージがオプションなのか、それともそれを行う唯一の方法なのかについて) 。

これは単一の画像を使用しているように見える質問ですが、これは 1 行であり、回答は 2x3 グリッドを使用しています。どちらも十字形ではありません！

（ところで、おまけの質問：ソースコードからこれを解決しようとしましたが、それはどこですか？THREE.CubeTextureLoader().load()コードは、指定されたURLをロードするためのループです（NB。6であることを確認していません）THREE.Texture。非常に一般的です。）

4

2 に答える 2

2

回答: はい、間違いなく単一の画像である可能性があります。あなたが提供したstackoverflowの質問に証拠があります。

クロス イメージが存在する理由: 場合によっては (私は OpenGl でこれを行いました)、立方体の 6 つの面のそれぞれについて、イメージ内の座標を指定できます。three.js ライブラリがこの機能を提供しているようには見えません。

それらが提供するのは、.repeat および .offset 属性です。これは、単一イメージの jsfiddle で使用されているものです。

for ( var i = 0; i < 6; i ++ ) {
  t[i] = THREE.ImageUtils.loadTexture( imgData ); //2048x256
  t[i].repeat.x  = 1 / 8;
  t[i].offset.x = i / 8;
  // Could also use repeat.y and offset.y, which are probably used in the 2x3 image
  ....

これらの値を変更するとどうなるかをフィドルで試すことができます。すなわち

t[i].repeat.x  = 1 / 4;
t[i].offset.x = i / 4;

頑張ってください、これが役に立てば幸いです。

ボーナス質問の編集: また、THREE.CubeTextureLoader().load()コードでは、6 つの画像が読み込まれると、実際に自動更新を行います。

...
if ( loaded === 6 ) {
    texture.needsUpdate = true;
    if ( onLoad ) onLoad( texture );
}
于 2016-03-11T22:18:13.050 に答える