ThreeJs+React로 마인크래프트 만들기 번역(by Daniel Bark from freeCodeCamp) - Sky

첫번째로 할 것은 바로 광원을 만드는 것이다.
3D 환경에서 요소들이 시각적으로 보일려면 빛이 존재해야한다.

아래의 이미지가 우리가 처음 프로젝트를 실행시키면 보게 될 화면이다.

// App.js
import { Canvas } from '@react-three/fiber';

function App() {
  return (
    <>
      <div>Outside Canvas</div>
      <Canvas>
      </Canvas>
    </>
  );
}

export default App;

다양한 구성요소를 보유하고있는 drei 라이브러리에서는 광원과 하늘을 자연스럽게 표현해주는 Sky 라는 구성요소를 가지고 있다.

<Sky distance={450000} sunPosition={[0, 1, 0]} inclination={0} azimuth={0.25} {...props} />

방식으로 사용하며
App.js를 열고 코드를 다음과 같이 수정하자

import { Canvas } from "@react-three/fiber";
import { Sky } from "@react-three/drei"; // + drei 라이브러리에 Sky 구성요소를 가져오자

function App() {
  return (
    <>
      // - 기존 <div>Outside Canvas</div>는 지워주자
      <Canvas>
        <Sky sunPosition={[100, 100, 20]} /> // 광원의 위치를 sunPosition을 통해 잡아준다.
      </Canvas>
    </>
  );
}

export default App;

실행시 화면에는 광원과 함께 하늘색의 그라데이션이 표현이 된다.
다음은 Textures와 images를 작업해보자.