3D 그래픽에서 조명은 장면의 물체를 비추기 위해 사용됩니다. 이는 태양, 램프 또는 기타 광원에서 나오는 빛을 시뮬레이션하는 데 사용할 수 있습니다.
스타터 코드를 실행하세요:
보시다시피, 장면이 완전히 어둡습니다.
이는 아직 조명을 추가하지 않았고 사용된 material이 <meshStandardMaterial />이기 때문입니다.
이제 Three.js에서 사용할 수 있는 다양한 조명 유형을 알아보겠습니다.
Ambient light
가장 간단한 유형의 조명은 ambient light입니다. 이 조명은 물체의 위치나 방향에 관계없이 장면의 모든 물체를 동일하게 비춥니다.
intensity prop는 빛의 밝기를 정의합니다. 기본값은 1입니다:
<ambientLight intensity={0.5} />
color prop는 빛의 색상을 정의합니다. 기본값은 #ffffff (흰색)입니다:
<ambientLight intensity={0.5} color={"royalblue"} />
방향성 조명
Directional light는 무한히 멀리 있는 빛입니다.
이는 특정 방향에서 장면에 있는 모든 객체를 비춥니다.
빛의 방향은 position과 target 속성에 의해 정의됩니다.
target의 기본값이 (0, 0, 0)이기 때문에 position 속성만 사용하여 빛의 방향을 정의할 수 있습니다.
<directionalLight position={[3, 3, 3]} intensity={0.5} />
환경광처럼, color와 intensity 속성을 가지고 있습니다.
큐브를 흰색으로 바꾸고, 여러 색상의 방향성 조명을 추가하여 어떻게 상호 작용하는지 확인해보세요:
React Three Fiber: The Ultimate Guide to 3D Web Development
✨ You have reached the end of the preview ✨
Go to the next level with Three.js and React Three Fiber!
Get full access to this lesson and the complete course when you enroll:
- 🔓 Full lesson videos with no limits
- 💻 Access to the final source code
- 🎓 Course progress tracking & completion
- 💬 Invite to our private Discord community
One-time payment. Lifetime updates included.
