【Three.js入門】色の指定:THREE.Color()

色の指定方法について書きます。色々な指定方法がありますが、一通り使えるようになると良いと思います。

色の指定:THREE.Color()
まとめ
参考サイト

色の指定:THREE.Color()

色の指定の記述は、以下のようなものがあります。

// Color
// デフォルトは白
const color1 = new THREE.Color();

// 16進数で色を指定(0x000000～0xffffff)
const color2 = new THREE.Color(0xff0000);

// RGBで色を指定(0～255)
const color3 = new THREE.Color("rgb(0, 255, 0)");

// RGBで色を指定(0～100%)
const color4 = new THREE.Color("rgb(0%, 0%, 100%)");

// 色名で指定
const color5 = new THREE.Color('pink');

// HSLで指定(0～, 0～100%, 0～100%)
const color6 = new THREE.Color("hsl(120, 100%, 50%)");

// RGBで色を指定(0～1)
const color7 = new THREE.Color(1, 0, 0);

(function(){
  'use strict';

  const width = 500;  //表示領域の幅
  const height = 250;  //表示領域の高さ

  // Scene
  const scene = new THREE.Scene();

  // Color
  // デフォルトは白
  const color1 = new THREE.Color();
  // 16進数で色を指定
  const color2 = new THREE.Color(0xff0000);
  // RGBで色を指定(0～255)
  const color3 = new THREE.Color("rgb(0, 255, 0)");
  // RGBで色を指定(0～100%)
  const color4 = new THREE.Color("rgb(0%, 0%, 100%)");
  // 色名で指定
  const color5 = new THREE.Color('pink');
  // HSLで指定(0～, 0～100%, 0～100%)
  const color6 = new THREE.Color("hsl(120, 100%, 50%)");
  // console.log(color6);
  // RGBで色を指定(0～1)
  const color7 = new THREE.Color(1, 0, 0);

  // Mesh
  const sphere = new THREE.Mesh(
    new THREE.SphereGeometry(60, 20, 20),
    new THREE.MeshLambertMaterial({color: color1})  //ここのカラーの指定を変更する
  );
  sphere.position.set(0, 0, 0);
  scene.add(sphere);

  // Camera
  const camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
  camera.position.set(0, 100, 300);
  camera.lookAt(scene.position);

  // Light
  const light = new THREE.DirectionalLight(0xffffff);
  light.position.set(100, 100, 100);
  scene.add(light);

  // Renderer
  const renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(width, height);
  renderer.setClearColor(0xaaaaaa);
  renderer.setPixelRatio(window.devicePixelRatio);
  document.getElementById('stage').appendChild(renderer.domElement);
  renderer.render(scene, camera);

})();