threejs-journey 03-basic-scene

three.js 적용하려면 우선은 html에 three.js 라이브러리를 연결해 줘야한다.
section 다음에 스크립트를 로드하는 이유는 Web성능 최적화 를 참고

<!-- index.html -->
<body>
    <section id="webgl"></section>  
  <script src="./three.min.js"></script>
  <script src="./script.js"></script>
</body>

화면생성

// script.js
const scene = new THREE.Scene()

THREE 객체를 이용해서 scene 을 생성한다. (화면)

오브젝트 생성

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff00000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

BoxGeometry를 이용해서 네모상자 구조를 생성할 수 있다. 인자는 (길이, 높이, 깊이) 순서다.

MeshBasicMaterial 을 사용하면 단순한 음영으로 도형을 그릴 수 있다. 컬러는 HEX, 색상이름, 16진수으로도 지정가능

Mesh 를 이용하면 삼각형 폴리곤을 기반으로한 객체를 생성할 수 있는데 geometry 로 매체의 구조를 전달해주고 material 로 매체의 재질을 전달하면 오브젝트를 생성한다.

scene.add(mesh) 을 이용하면 앞서 생성한 화면에 방금만든 오브젝트를 추가할 수 있다.

카메라 생성

const sizes = {
  width: 800,
  height: 600
}
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 5
camera.position.x = 1
camera.position.y = 1
scene.add(camera)

PerspectiveCamera 를 이용하면 원근을 처리하는 카메라를 생성할 수 있다.

첫 번째 매개변수로는 화각을 넘겨줄 수 있다. 화각이 좁을수록(작을수록) 물체가 확대된 것처럼 보이고 넓을수록(클수록) 화면의 왜곡이 심해진다.

두 번째 매개변수는 가로세로의 비율을 넘겨준다.

추가로 position으로 카메라의 위치를 조절할 수 있다. 최초 랜더링 시 카메라와 물체(mesh)가 같은 위치에 존재하기에 카메라를 z축으로 값을 주어 물체가 보이도록 한다.

scene.add(camera) 를 이용하면 화면에 카메라를 추가할 수 있다.

HTML에 랜더링

const canvas = document.querySelector('canvas.webgl')

const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

html에 존재하는 엘리먼트를 지정하고 new THREE.WebGLRenderer({ canvas }) 를 이용하여 Webgl을 객체를 생성한다.

renderer.setSize(sizes.width, sizes.height) 로 캔버스의 사이즈를 정해준다.

renderer.render(scene, camera) 을 이용해 앞서 생성했던 화면과 카메라를 캔버스(공간)에 랜더링한다.

전체 코드

const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0xff00000 })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

const sizes = {
  width: 800,
  height: 600
}

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 5
camera.position.x = 1
camera.position.y = 1
scene.add(camera)

const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({ canvas })
renderer.setSize(sizes.width, sizes.height)
renderer.render(scene, camera)

스터디 내용