【Three.js】テクスチャを反映する

はじめに

みなさんは、Three.jsで3Dオブジェクトにテクスチャを反映させたいと思ったことはありますか？
この記事では、Three.jsを使った、テクスチャを反映させる方法を紹介しようと思います！

テクスチャを反映する

① テクスチャをロードする

TextureLoader() は、画像を読み込むためのクラスです。
TextureLoader()を使って、画像を読み込みます！

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/image.png')

② カラースペースを定義する

読み込む画像がsRGBカラースペースを使っているので、画像がちゃんと読み込まれるようにsRGBカラースペースを定義します。

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/image.png')

texture.colorSpace = THREE.SRGBColorSpace

③ テクスチャを反映する

テクスチャを反映させます。

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('/textures/image.png')
texture.colorSpace = THREE.SRGBColorSpace

const geometry = new THREE.BoxGeometry(1, 1, 1) // オブジェクトを定義
const material = new THREE.MeshBasicMaterial({ map: texture }) // テクスチャを定義
const mesh = new THREE.Mesh(geometry, material) // メッシュベースのオブジェクトにする
scene.add(mesh) // シーンにメッシュを追加

④ 完成系

テクスチャを調整する

分割する

const texture = textureLoader.load('/textures/image.png')
texture.colorSpace = THREE.SRGBColorSpace
texture.repeat.x = 2
texture.repeat.y = 3

このようにすることで、
x軸に1 / 2個分のサイズに、y軸に1 / 3個分のサイズになり、
足りない部分は、端のピクセルが引き伸ばされます。

リピートする

texture.wrapS = THREE.RepeatWrapping
texture.wrapT = THREE.RepeatWrapping

リピートの方向性を変える

texture.wrapS = THREE.MirroredRepeatWrapping
texture.wrapT = THREE.MirroredRepeatWrapping

オフセットをつける

texture.offset.x = 0.5
texture.offset.y = 0.5

回転させる

colorTexture.rotation = Math.PI * 0.25
colorTexture.center.x = 0.5
colorTexture.center.y = 0.5

まとめ

この記事では、Three.jsでテクスチャを反映させる方法を紹介しました。

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaで記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。