Light Demo Page

描画するオブジェクトを照らすLightのデモページです
ここで紹介している以外にも沢山のライトが指定できるので
そちらはThree.jsの公式ドキュメントで見てみて下さい

AnbientLight


  const AnbientLight = () => {  
    return (
      <Canvas>
        <CameraController />
        <ambientLight
          intensity={1}
        />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshPhongMaterial flatShading shininess={100} specular='#d63031' emissive='#000000' />
        </mesh>
        <Ground />
      </Canvas>
    )
  }

均一にジオメトリを照らすライト
均一なので影や反射がつきません

DirectionalLight


  const DirectionalLight = () => {  
    return (
      <Canvas>
        <CameraController />
        <ambientLight intensity={0.2} />
        <directionalLight
          intensity={1}
          color='#d63031'
        />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshPhongMaterial flatShading shininess={100} specular='#d63031' emissive='#000000' />
        </mesh>
        <Ground />
      </Canvas>
    )
  }

平行光源
遠くから当たっている光、現実世界での太陽のようなイメージです
デフォルトでは真上から光が当たりますが、真下からみた場合真っ黒になってしまうので
anbientLightと併用する事が多いです

HemisphereLight


  const HemisphereLight = () => {  
    return (
      <Canvas>
        <CameraController />
        <hemisphereLight
          args={[
            '#ffeaa7',    // 光が当たっている箇所の色
            '#6c5ce7',    // 光が当たっていない箇所の色
            1             // 光の強さ
          ]}
        />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshPhongMaterial flatShading shininess={100} specular='#d63031' emissive='#000000' />
        </mesh>
        <Ground />
      </Canvas>
    )
  }

光が当たっている場所と当たっていない場所の色指定ができるライト

PointLight


  const PointLight = () => {  
    return (
      <Canvas>
        <CameraController />
        <pointLight
          args={[
            '#6c5ce7',    // color: 光の色
            1,            // intensity: 光の強さ
            10,           // distance: 光の届く距離
            1,            // decay: 光の減衰量
          ]}
          position={[0, 5, 5]}
        />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshPhongMaterial flatShading shininess={100} specular='#d63031' emissive='#000000' />
        </mesh>
        <Ground />
      </Canvas>
    )
  }

豆電球の様なイメージの光源
デフォルトでは原点に設置されるためポジションを変更して使用する事が多いです

RectAreaLight


  const RectAreaLight = () => {  
    return (
      <Canvas>
        <CameraController />
        <rectAreaLight
          args={[
            '#6c5ce7',   // color: 光の色
            3,           // intensity: 光の強さ
            3,           // width: ライトの横幅
            3,           // height: ライトの縦幅
          ]}
          position={[0, -3, 3]}
        />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshStandardMaterial flatShading />
        </mesh>
        <Ground />
      </Canvas>
    )
  }

単一方向を照らす四角形のライト
MeshStandardMaterialかMeshPhysicalMaterialにしか使えないライトです

SpotLight


  const SpotLight = () => {  
    return (
      <Canvas>
        <CameraController />
        <spotLight
          args={[
            '#6c5ce7',        // color: 光の色
            3,                // intensity: 光の強さ
            10,               // distance: 光の届く距離
            Math.PI * 0.35,    // angle: 光の広がり具合の角度
            0.3,              // penumbra: 光で照らしている部分の輪郭
            1,                // decay: 光の減衰量
          ]}
          position={[0, -3, 5]}
        />
        <mesh scale={1}>
          <torusGeometry args={[3, 1, 16, 100]}/>
          <meshStandardMaterial flatShading />
        </mesh>
        <Ground />
      </Canvas>
    )
  }

単一方向を照らす円形のライト
懐中電灯のイメージ