[ #1 ] ThreeJS의 기본 틀
2024. 5. 18. 22:46 ㆍ ThreeJS 공부 뿌셔
★☆ 이 글은 Three.js journey 강의를 통해 작성하게 되었습니다 ☆★
ThreeJS의 기본적인 틀 알아보자 호우!
※ 물론 VanillaJS의 코드로..
🍀 코드
코드 먼저 드리는게 인지상정
// script.js
import * as THREE from "three";
const canvas = document.querySelector("canvas.webgl");
// class가 webgl인 canvas태그를 가져오고 싶어
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(1, 1, 1);
// BoxGeometry(width, height, depth)
const material = new THREE.MeshBasicMaterial({ color: "red", wireframe: true });
// wireframe true 지정시, mesh를 구성하기 위한 '삼각형'들의 선분이 대신 보이게 됨
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);
// PerspectiveCamera(fov, width/height);
// fov: 시야각
camera.position.z = 3;
scene.add(camera);
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
// canvas 크기 지정
renderer.render(scene, camera);
// 렌더링// index.html
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>First Three.js Project</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<canvas class="webgl"></canvas>
<script type="module" src="./script.js"></script>
</body>
</html>
🍀 알아보기
[ ThreeJS를 구현하기 위한 기본구성 5가지! ]
- canvas
- scene
- mesh (geometry, material)
- camera
- renderer
[ Mesh는 어떻게 구현되는 걸까? ]
Three 라이브러리는 Mesh의 Geometry의 각 꼭지점 위치를 먼저 지정한 후,
각 꼭지점에서 다른 두 점들을 이어 삼각형을 만들어 면을 구성한다!
모든 오브젝트들은 삼각형을 통해 만들어지게 된다!
사각형 또한 마찬가지!
이미지를 보게되면, 박스 오브젝트의 모든 면이 2개의 삼각형으로 이루어져 있음을 볼 수 있다
'ThreeJS 공부 뿌셔' 카테고리의 다른 글
| [ #5 ] ThreeJS의 Controls (0) | 2024.05.25 |
|---|---|
| [ #4.5 ] 마우스 따라 움직이는 Perspective Camera (0) | 2024.05.25 |
| [ #4 ] ThreeJS의 Camera (0) | 2024.05.25 |
| [ #3 ] Animation 적용 (feat. RequestAnimationFrame) (0) | 2024.05.22 |
| [ #2 ] Object의 Transform 변경 (0) | 2024.05.21 |