📌 기본 장면 구성요소(4)
1. Sence 장면,무대
2. Mesh 메쉬 - Geometry(모양) + Material(재질)
3. Camera
4. Light
📌 렌더링 순서
✅ canvas 가져와서 렌더링 화면으로 지정하기 - 사이즈 : window.innerWidth, window.innerHeigth
✅ Scene 만들기
✅ Camera 설정하기 ---> Scene 추가하기
✅ Mesh 설정하기 ---> Scene 추가하기
✅ 렌더링
👉 canvas : 렌더링 되는 공간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>렌더링 기본</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
✅ canvas 렌더링 화면으로 지정하기
const canvas = document.querySelector('#canvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
✅ Scene 만들기
const scene = new THREE.Scene();
✅ Camera 설정(Scene 추가)
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
camera.position.y = 2;
camera.position.x = 1;
scene.add(camera);
✅ Mesh 설정(Scene 추가)
const geometry = new THREE.BoxGeometry(1, 1, 1);
const matrial = new THREE.MeshBasicMaterial({
color: 'yellow',
});
const mesh = new THREE.Mesh(geometry, matrial);
scene.add(mesh);
✅ Render
renderer.render(scene, camera);