web-dev-qa-db-ja.com

three.jsを無効にして画像のサイズを2乗で変更するにはどうすればよいですか？

three.jsは、2の累乗でない場合、テクスチャ画像のサイズを自動的に変更します。私の場合、カスタムキャンバスをテクスチャとして使用していますが、これは2の累乗ではありません。サイズを変更すると、テクスチャが正しく表示されなくなります。three.jsで画像のサイズ変更を無効にする方法はありますか。

three.jstextures
12
ArUn

three.jsは実際にお願いしますを試みています。

オープンソースなので、 WebGLRenderer.js のソースコードを読み取って、setTextureメソッドが（非公開の）メソッドuploadTextureを呼び出すことがわかります。

後者にはこのチェックがあります：

if ( textureNeedsPowerOfTwo( texture ) && isPowerOfTwo( image ) === false ){

    image = makePowerOfTwo( image );
}

それ自体はかなり説明的です。

textureNeedsPowerOfTwoが実際に何をチェックするのか疑問に思われるかもしれません。どれどれ。

function textureNeedsPowerOfTwo( texture ) {

        if ( texture.wrapS !== THREE.ClampToEdgeWrapping || texture.wrapT !== THREE.ClampToEdgeWrapping ) return true;
        if ( texture.minFilter !== THREE.NearestFilter && texture.minFilter !== THREE.LinearFilter ) return true;

        return false;
}

クランプとは異なる調整されたテクスチャにラッピングを使用する場合、またはではないフィルタリングを使用する場合）nearestまたはlinearテクスチャがスケーリングされます。

このコードに驚いたら強くお勧めしますテクスチャの使用に関するMDNページ を見てください。

引用

キャッチ：これらのテクスチャ[Non Power Of Twoテクスチャ]はミップマップでは使用できず、「繰り返し」（タイルまたはラップ）してはなりません。

[...]

上記の構成を実行しない場合、WebGLでは、NPOT [Non Power Of Two]テクスチャのすべてのサンプルが黒一色を返すことによって失敗する必要があります：rgba（0,0,0,1）。

したがって、不適切なテクスチャパラメータでNPOTテクスチャを使用すると、古き良き黒一色になります。

three.jsはオープンソースであるため、ローカルコピーを編集して、「問題のある」チェックを削除できます。

ただし、より優れた、より単純で、より保守しやすいアプローチは、[〜＃〜] uv [〜＃〜]マッピングを単純にスケーリングすることです。結局のところ、それはこのユースケースのためだけにあります。

21
Margaret Bloom