【Three.js】Material(マテリアル)の色の設定方法一覧

2023年11月15日2023年11月16日WebGL & Three.js

Three.jsでMaterial(マテリアル)の色を設定するとき、いろいろな方法があります。
知らないと混乱したり、便利な使い方もあるので、色の設定方法を一覧できるように紹介します。

もしThree.jsの基本的な操作の一連の流れを知らないという場合は、Three.jsの基本的な操作の一連の流れがとても短くまとめた記事なので参考にしてみてください。
具体的なコードとデモが見たい場合は、【WebGL&Three.js入門】Three.jsの一番シンプルなサンプルコードのチュートリアルの解説でデモもみれる状態にしているので参考にしてみてください。
マテリアルがよくわからない場合は、Material(マテリアル)の種類と変更方法-3Dモデルのデモ付きで紹介を参考にしてみてください。

Material(マテリアル)の色の設定方法一覧

サンプルコード

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 geometry = new THREE.TorusGeometry(5, 1, 20, 20);
const material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  transparent: true,
  opacity: .5,
});

// material.color.set(0xff0000); // 赤色
material.color.set('skyblue'); // スカイブルー
// const anotherColor = new THREE.Color(0x00ff00); // 緑色
// material.color.set(anotherColor);


const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 20;

let i = 0;
function animate() {
  requestAnimationFrame(animate);
  // console.log(i++);
  cube.rotation.x = cube.rotation.x + 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

デフォルトコンストラクタ:

const color1 = new THREE.Color();

これは何も引数を与えずに THREE.Color オブジェクトを作成します。デフォルトの色は白色です。

16進数カラーコード:

const color2 = new THREE.Color(0xff0000);

これは16進数を使用して色を指定します。この例では赤色を指定しています。

RGB文字列:

const color3 = new THREE.Color("rgb(255, 0, 0)");
const color4 = new THREE.Color("rgb(100%, 0%, 0%)");

ここではRGB値を文字列で指定します。color3 は赤色、color4 は同じく赤色ですが、パーセンテージで指定しています。

カラー名:

const color5 = new THREE.Color('skyblue');

カラー名を使って色を指定できます。この例では「skyblue」を指定しています。Three.jsは140種類のカラー名をサポートしています。

HSL文字列:

const color6 = new THREE.Color("hsl(0, 100%, 50%)");

HSL値（色相、彩度、明度）を文字列で指定します。この例では赤色です。

RGB値（0から1まで）:

const color7 = new THREE.Color(1, 0, 0);

setメソッドを使った方法

THREE.Color の .set メソッドでも利用できます。

16進数を使用:

const color = new THREE.Color();
color.set(0xff0000); // 赤色

カラー名を使用:

color.set('skyblue'); // スカイブルー

RGB文字列を使用:

color.set('rgb(255, 0, 0)'); // 赤色

HSL文字列を使用:

color.set('hsl(0, 100%, 50%)'); // 赤色

別の THREE.Color オブジェクトを使用:

const anotherColor = new THREE.Color(0x00ff00); // 緑色
color.set(anotherColor);

数値でRGBを指定:

color.setRGB(1, 0, 0); // 赤色

HSL値を直接指定:

color.setHSL(0.75, 1, 0.5); // 青色