학습 계기
웹에서 유저가 좀 더 재밌는 경험을 주기 위해서 3D요소가 첨가되면 좋겠다는 생각을 종종했다.
이러한 생각은 유튜브에 interactive Developer님이 올려주신 포트폴리오들을 보면서 더욱 많이 하게 되었다.
https://www.youtube.com/@cmiscm/videos
Interactive Developer
코드로 만드는 애니메이션, 영감, 실리콘밸리의 생활과 해외취업에 대해 이야기 합니다. http://links.cmiscm.com/
www.youtube.com
3D를 React에서 쉽게 구현하도록 도와주는 R3F가 있는데, 해당 라이브러리는 Three.js를 기반으로 jsx에 사용 가능하게 되었다. 따라서 Three.js의 요소에 대해서 우선적으로 학습하고 정리를 할 필요가 있다.
Three.js란?
WebGl 기반으로 쉽게 3D요소를 구현할 수 있게 해주는 JS 라이브러리
WebGL: OpenGL ES 2.0 기반 API를 이용하여 브라우저의 HTML canvas에 렌더링하여 3D 웹 콘텐츠 제작을 가능하게 하는 Web API
THREE.JS의 기본구조
물체를 3D로 바라보기 위해서는 바라보는 시점과, 바라보는 대상이 존재한다.
https://designbase.co.kr/threejs-03/에서 이를 알기 쉬운 그림으로 표현해주셨다.
이를 Three.js에 요소들로 나누면 아래와 같다.
Renderer : Three.js로 구현된 요소가 렌더링된 결과로 Scene과 Camera를 기반으로 만들어진 객체
Camera : Scene을 어디서 어떻게 바라볼 지 결정하는 요소
Scene : 물체들이 존재하는 곳. M
Light : 장소에 빛이 어떻게 비추고 있는지(밝기나 그림자에 영향을 줌)
Mesh : 물체로 Geometry와 Material로 구성
Geometry : 물체의 크기, 위치등 기하학적 요소들
Material : 광택이나 투명도등 물체의 성질
THREE.JS의 사용방법
npm i three
three.js를 설치하고, 자바스크립트 파일에서 관련 코드를 작성한다. 그리고 해당 모듈을 불러와서 사용한다.
<body>
<div id="app"></div>
<script type="module" src="/main.js"></script>
</body>
예시)
import * as THREE from 'three';
const width = window.innerWidth,
height = window.innerHeight;
// init
const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;
const scene = new THREE.Scene();
const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setAnimationLoop(animation);
document.body.appendChild(renderer.domElement);
// animation
function animation(time) {
mesh.rotation.x = time / 2000;
mesh.rotation.y = time / 1000;
renderer.render(scene, camera);
}
animation(2000);
https://www.npmjs.com/package/three
three
JavaScript 3D library. Latest version: 0.163.0, last published: 12 days ago. Start using three in your project by running `npm i three`. There are 3574 other projects in the npm registry using three.
www.npmjs.com
'프론트엔드' 카테고리의 다른 글
| React 유저가 느낀 Vue (0) | 2025.01.13 |
|---|---|
| 전역상태관리 라이브러리 Jotai의 WeakMap을 활용한 메모리 최적화 (0) | 2024.09.19 |
| (React)컴파운드 패턴으로 드롭다운 컴퍼넌트 만들기-1 구현하기 (0) | 2024.03.28 |
| React에 StoryBook 도입하기(tailwind) (0) | 2024.02.23 |
| DOM과 Virtual DOM (0) | 2024.02.22 |