three.js - three.js の ShaderMaterials を使用したテクスチャの繰り返し

Question

次の理由により、均一なテクスチャとそれらの繰り返しに問題があります。

tex.wrapS = THREE.RepeatWrapping;
tex.wrapT = THREE.RepeatWrapping;
tex.repeat.x=100;
tex.repeat.y=100;

うまくいきません。そこで、解決策をウェブで検索したところ、 githubで次のスレッドが見つかりました 。答えはもう機能しません。

均一なテクスチャを繰り返したい場合はどうすればよいですか?

Answer 1

独自のフラグメント シェーダーを作成していますか? その場合、UV 座標に繰り返し値を掛ける必要があります。

uniform sampler2D baseTexture;
varying vec2 vUv;

void main() 
{
    gl_FragColor = texture2D( baseTexture, vUv * 100 );     
}

そうでない場合は、http://stemkoski.github.io/Three.js/Texture-Repeat.htmlにテクスチャの繰り返しの例が含まれています。

// texture repeated twice in each direction
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 2, 2 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );