Three.jsで立方体の各面にテクスチャを設定する

以前にThree.jsで平面にテクスチャを設定する記事を投稿しましたが、立方体などの各面に別のテクスチャを張り付ける方法を試してみます。

サンプルコード

まずは立方体に対して、以前の記事で行ったようにテクスチャを設定してみます。
あわせて、各面を確認できるようにOrbitControlsも追加します。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import imgUrl from './textures/img.jpg'

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);
// カメラの位置変更と更新
camera.position.set(0, 0, 10);
controls.update();

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(5, 5, 5);
const texture = new THREE.TextureLoader().load(imgUrl);
const material = new THREE.MeshBasicMaterial({
  map: texture
});
const object = new THREE.Mesh(geometry, material);
scene.add(object);

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

これで立方体にもテクスチャの設定ができましたが、各面とも同じ画像が設定されます。
立方体の各面に同じテクスチャを設定するデモページ

Meshのドキュメントを見ると配列形式で複数のマテリアルを渡せるようなので、設定してみます。
各面の画像として下記を用意しました。

• cube01.png
• cube02.png
• cube03.png
• cube04.png
• cube05.png
• cube06.png

それぞれの画像を読み込んで設定してみます。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import cube01 from './textures/cube01.png'
import cube02 from './textures/cube02.png'
import cube03 from './textures/cube03.png'
import cube04 from './textures/cube04.png'
import cube05 from './textures/cube05.png'
import cube06 from './textures/cube06.png'

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);
// カメラの位置変更と更新
camera.position.set(0, 0, 10);
controls.update();

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(5, 5, 5);
const loader = new THREE.TextureLoader()
const textures = [cube01, cube02, cube03, cube04, cube05, cube06];
const materials = textures.map((texture) => {
  return new THREE.MeshBasicMaterial({
    map: loader.load(texture)
  })
});
const object = new THREE.Mesh(geometry, materials);
scene.add(object);

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

これで用意した画像を各面に設定することができました。
立方体の各面に画像を設定するデモページ

最後に、Meshに渡した配列の1・2番目、3・4番目、5・6番目がそれぞれ対面になっているようなので、さいころの対面と同じになるように調整してみます。

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import cube01 from './textures/cube01.png'
import cube02 from './textures/cube02.png'
import cube03 from './textures/cube03.png'
import cube04 from './textures/cube04.png'
import cube05 from './textures/cube05.png'
import cube06 from './textures/cube06.png'

// シーンの作成
const scene = new THREE.Scene();

// カメラの作成
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// カメラ操作の設定
const controls = new OrbitControls(camera, renderer.domElement);
// カメラの位置変更と更新
camera.position.set(0, 0, 10);
controls.update();

// オブジェクトの作成
const geometry = new THREE.BoxGeometry(5, 5, 5);
const loader = new THREE.TextureLoader()
const textures = [cube01, cube06, cube02, cube05, cube03, cube04];
const materials = textures.map((texture) => {
  return new THREE.MeshBasicMaterial({
    map: loader.load(texture)
  })
});
const object = new THREE.Mesh(geometry, materials);
scene.add(object);

function animate() {
  renderer.render(scene, camera);
}
renderer.setAnimationLoop(animate);

これで想定した形にテクスチャを設定できました。
立方体の各面に画像を設定するデモページ2