1. AmbientLight

AmbientLight는 다른 조명과 달리 방향성이 없으며, scene 전체에 균일하게 적용됩니다. 즉 그림자가 생기지않는다.

intensity로 빛의 세기를 조절하고 color로 빛의 색상을 결정

import React from 'react';
import { Canvas } from 'react-three-fiber';
import { ambientLight } from 'drei';

function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} color="#ffffff" />
    </Canvas>
  );
}

2. DirectionalLight

무한히 떨어지는 평행한 빛을 표현하는 light, 쉽게 말하면 태양광

intensity로 빛의 세기를 조절하고 color로 빛의 색상, position으로 빛의 위치을 결정

import React, { useRef } from 'react';
import { Canvas } from 'react-three-fiber';
import { OrbitControls, DirectionalLight } from '@react-three/drei';

function App() {
  
  return (
    <Canvas>
      <DirectionalLight ref={lightRef} position={[0, 10, 0]} color="white" intensity={1.2} />
    </Canvas>
  );
}

export default App;

3. spotlight

한 지점에서 빛을 방출하여 방출된 빛이 일직선으로 나아가다가 일정 각도 이내의 객체에만 빛이 비추는 조명. 흔히 말하는 스포트라이트

position으로 빛의 위치, angle로 빛의 각도, penumbra로 부분 그림자의 강도를 설정

import React from 'react';
import { Canvas } from 'react-three-fiber';

function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <spotLight position={[0, 5, 10]} angle={0.3} penumbra={1} />
    </Canvas>
  );
}

4. pointlight