Three.js テクスチャをタイル状に貼りたい。

Question

実現したいこと

テクスチャを、回数などを指定しないで自動でジオメトリ全体にタイル状に貼ってほしい。

試したこと

  const texture = new THREE.TextureLoader().load('../assets/gltf/grid.png');
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;

テクスチャをジオメトリにタイル状に貼る場合、上記の指定まではわかりましたが、以下の「何回リピートするか」を指定しないといけないようでした。

texture.repeat.set( 4, 4 );

そうではなく、例えば大きな構造物の表面全てに対して市松模様をつけたい場合など、実現する方法はありますでしょうか。

よろしくお願いいたします。

Answer 1

恐らく、面ごとに割り当てるテクスチャに対して repeat.set を指定をする必要があるのではと思います。
下記に似たような質問がありましたが、スマートな方法はなさそうでした。

■ How do I repeat texture with fixed size?
https://discourse.threejs.org/t/how-do-i-repeat-texture-with-fixed-size/9158

■ How to repeat texture on z-axis in three.js?
https://discourse.threejs.org/t/how-to-repeat-texture-on-z-axis-in-three-js/11139

Comments

[cx20]

three.js の公式サンプルにこのようなサンプルを見かけました。こちらが参考になるかもしれません。
https://threejs.org/examples/?q=nodes#webgl_nodes_loader_gltf_sheen

[honamin]

ありがとうございます。
教えていただいたURLを参考にしてみます。