Three.jsのShaderでvMapUvの位置を動かしたときに境界がちらつく。

完全備忘録。メモです。

vMapUvをanimationXをもとに横移動させると、境界でちらつきが発生しました。

コード内容

<省略>
vec2 uv = vMapUv;
uv.x = fract(vMapUv.x + abs(animationX));
vec4 sampledDiffuseColor = texture2D(map, uv);
<省略>

以下の設定で解消しました。

const texture = new TextureLoader().load(url)
texture.generateMipmaps = false // 境界ちらつく防ぐ設定(1)
texture.minFilter = LinearFilter // 境界ちらつく防ぐ設定(2)

以上！！！