easy-three
Eng日本語

create.directionalLight

create.directionalLight(props : Object) : Light

props - 設定オブジェクト。
  • intensity (Number) : 光の強さ (デフォルト : 1)。
  • color (Hex) : ライトの色 (デフォルト : 0xffffff)。
  • position (Array) : ライトの位置 (デフォルト : [10, 10, 10])。
  • castShadow (Boolean) : 影を投影するかどうか (デフォルト : true)。
  • shadow (Object) : シャドウの設定。
    • mapSize (Object) : シャドウマップのサイズ (デフォルト : {width: 1024, height: 1024 })。
    • camera (Object) : シャドウカメラの設定。
      • left (Number) : カメラの左範囲 (デフォルト : -10)。
      • right (Number) : カメラの右範囲 (デフォルト : 10)。
      • top (Number) : カメラの上範囲 (デフォルト : 10)。
      • bottom (Number) : カメラの下範囲 (デフォルト : -10)。
      • near (Number) : カメラの近距離 (デフォルト : 0.5)。
      • far (Number) : カメラの遠距離 (デフォルト : 500)。
    • bias (Number) : シャドウバイアス (デフォルト : 0)。
  • helper (Number) : ヘルパーのサイズ (デフォルト : 0)。
  • helperColor (Hex) : ヘルパーの色 (デフォルト : 0xffffff)。

平行光源を作成してシーンに追加します。

この光源は、シーン全体に均等に光を当てる環境光とは異なり、特定の方向からの光を当てることができます。
そのため、影を作成することができます。

GLTFモデルの表面に波紋状の縞模様が表示される場合は、shadow.bias に小さい値(0.0001 や -0.0001) を設定してください。

コードの例

並行光源

const { camera, create, animate } = init()
camera.position.set(0, 0, 2)
create.directionalLight()

const cube = create.cube()

animate(({ delta }) => {
  cube.rotation.x += delta;
  cube.rotation.y += delta;
});

光量を変化させる

const { camera, create, animate } = init()
camera.position.set(0, 0, 2)
const directionalLight = create.directionalLight()

const cube = create.cube()

animate(({ delta, time }) => {
  cube.rotation.x += delta;
  cube.rotation.y += delta;
  directionalLight.intensity = Math.sin(time) * 0.5 + 0.5;
});

ヘルパーの利用

helperに0より大きい値を指定すると、ヘルパーが表示されます。

const { camera, create, animate } = init()
camera.position.set(0, 0, 3);
create.directionalLight({
  position: [0.6, 0.6, 1.6],
  helper: 0.1,
  helperColor: 0xff0000,
});

const cube = create.cube()

animate(({ delta }) => {
  cube.rotation.x += delta;
  cube.rotation.y += delta;
});