easy-three
Eng日本語

create.spotLight

create.spotLight(props : Object) : Light

props - 設定オブジェクト。
  • color (Hex) : ライトの色 (デフォルト : 0xffffff)。
  • intensity (Number) : 光の強さ (デフォルト : 1)。
  • distance (Number) : ライトの距離 (デフォルト : 0)。
  • angle (Number) : 光の角度 (デフォルト : Math.PI/4)。
  • penumbra (Number) : 光の周辺減衰 (デフォルト : 0.1)。
  • decay (Number) : 光の減衰率 (デフォルト : 2)。
  • position (Array) : 位置 (デフォルト : [6, 6, 6])。
  • castShadow (Boolean) : 影を投影するかどうか (デフォルト : true)。
  • shadow (Object) : シャドウの設定 (デフォルト : {width: 1024, height: 1024})。
  • helper (Number) : ヘルパーのサイズ (デフォルト : 0)。
  • helperColor (Hex) : ヘルパーの色 (デフォルト : 0xffffff)。

スポットライトを作成してシーンに追加します。

VRMモデルにスポットライトを当てるとエラーになります。
VRMモデルを利用する場合は、スポットライトを使用しないでください。
スポットライトを使用する場合は、VRMモデルを削除してください。

コードの例

スポットライト

const { camera, create, controls, animate } = init()
controls.connect();
camera.position.set(0, 1, 1.5);

create.spotLight({
  position: [-1, 1, 1],
});

create.cube({
  size: 0.5,
  position: [0, 0.25, 0],
})

create.plane({
  position: [0, 0, 0],
  rotation: [-Math.PI / 2, 0, 0],
  size: [10, 10],
  option: {
    color: "#ffffff",
  },
});

animate();

スポットライトのターゲット変更

ターゲットは動的に変更できます。
3D Objectをターゲットとして指定することもできます。

const { camera, create, animate } = init()
controls.connect();
camera.position.set(0, 1, 1.5);

const red = create.spotLight({
  position: [-1, 1, 1],
  angle: Math.PI / 6,
  color: 0xff6666,
});

const green = create.spotLight({
  position: [1, 1, 1],
  angle: Math.PI / 6,
  color: 0x66ff66,
});

const blue = create.spotLight({
  position: [0, 1, 1],
  angle: Math.PI / 6,
  color: 0x6666ff,
});

create.cube({
  size: 0.5,
  position: [0, 0.25, 0],
});

create.plane({
  position: [0, 0, 0],
  rotation: [-Math.PI / 2, 0, 0],
  size: [10, 10],
  option: {
    color: "#ffffff",
  },
});

animate(({ time }) => {
  red.target.position.set(Math.sin(time), 0, 0);
  green.target.position.set(Math.sin(-time), 0, 0);
  blue.target.position.set(0, 0, Math.sin(time));
});

ヘルパーの利用

ヘルパーを利用することで、ライトの位置を視覚的に確認することができます。
helper に 0 より大きい値を指定すると、ヘルパーが表示されます。
ヘルパーの色は helperColor で指定できます。

const { camera, create, controls, animate } = init()
controls.connect();
camera.position.set(0, 2, 3);

create.spotLight({
  position: [-1, 1, 1],
  helper: 1,
  helperColor: 0xff0000,
});

create.cube({
  size: 0.5,
  position: [0, 0.25, 0],
})

create.plane({
  position: [0, 0, 0],
  rotation: [-Math.PI / 2, 0, 0],
  size: [10, 10],
  option: {
    color: "#ffffff",
  },
});

animate();