three.js - THREE.jsで、テクスチャを解像度に依存せず、ぼやけることなくレンダリングするにはどうすればよいですか？

Question

THREE.jsのメッシュにテクスチャを適用しようとしていますが、許容できるレベルの明瞭さを得るために、サイズが数百ピクセルの正方形まで、望ましいよりもはるかに大きいPNGを使用する必要があります。たとえば、8 x 8の市松模様などの単純なものを使用する場合、可能な限り最小の解像度はドットの束のように見えます。

テクスチャに使用されているコードはTHREE.ImageUtils.loadTexture("sprites/land1.png");

Answer 1

この例に示すように、テクスチャのフィルタリングを設定する必要があります。

var texture = THREE.ImageUtils.loadTexture( 'texture.png' );
texture.magFilter = THREE.NearestFilter;
texture.minFilter = THREE.LinearMipMapLinearFilter;