본문 바로가기

Three.js/Intro12

[threejs-journey 1-6] Control 개요Three.js에서는 다양한 카메라 및 오브젝트 제어 컨트롤(Controls)이 제공되어, 3D 장면을 보다 자유롭고 직관적으로 탐색하거나 조작할 수 있도록 도와줍니다. 각 컨트롤은 사용 목적과 조작 방식이 다르므로, 모든 기능을 암기할 필요는 없습니다. 대신, 사용하려는 상황에 따라 적절한 컨트롤을 선택하여 문서를 참고하면서 적용하면 됩니다.- 각 컨트롤은 Three.js 공식 문서에서 예제와 함께 확인할 수 있습니다.- 대표적인 컨트롤로는 OrbitControls, FlyControls, FirstPersonControls, PointerLockControls, TrackballControls, TransformControls, DragControls 등이 있으며, 각각의 특성과 입력 방식이 다릅.. 2025. 6. 10.
[threejs-journey 1-6] Camera 개요 이번 글에서는 Three.js에서 제공하는 다양한 카메라 클래스들의 특성과 용도를 알아보고, 마우스 인터랙션을 통해 카메라를 조작하여 3D 메쉬를 관찰하는 방법까지 실습을 통해 정리합니다. 특히 PerspectiveCamera, OrthographicCamera, CubeCamera 등 카메라의 종류와 차이점을 설명하며, 마지막에는 마우스를 이용해 카메라를 회전 궤도로 이동시키는 방법을 삼각함수를 이용해 구현합니다. - Camerahttps://threejs.org/docs/#api/en/cameras/Camera three.js docs threejs.org Camera는 추상 클래스이기 때문에 직접 인스턴스를 생성해 사용할 수 없습니다. 대신 다양한 용도에 맞는 하위 클래스들(ArrayCamer.. 2025. 6. 10.
[threejs-journey 1-5] Animation 개요혹시 플립북(flip book)을 아시나요? 이름은 몰라도 한 번쯤은 보신 적이 있을 겁니다. 종이에 한 장씩 그림을 그리고 빠르게 넘기면 마치 그림이 움직이는 것처럼 보이죠? 이게 바로 애니메이션의 기본 원리입니다. - 예시https://www.youtube.com/watch?v=uMky_iMPVM4이 원리는 컴퓨터 애니메이션에도 그대로 적용됩니다. 컴퓨터는 매 순간 장면을 한 프레임씩 계싼해 화면에 그려냅니다. 다만, 사람이 손으로 넘기는 것보다 훨씬 빠르게, 초당 60프레임(60FPS) 혹은 144프레임(144FPS) 속도로 그리기 때문에 부드럽고 생동감 있게 느껴지는 것이죠. - requestAnimationFrame https://developer.mozilla.org/ko/docs/W.. 2025. 6. 3.
[threejs-journey 1-4 부록] 좌표계, 벡터 연산, 디버깅 도구, Group 구조 개요이 글은 1-4의 부록이며, Three.js를 사용하여 3D 씬을 구성할 때 필수적으로 알아야 할 좌표계, 변환, 디버깅 도구, 그리고 객체 간 관계(Scene Graph) 개념을 중심으로 설명합니다. 특히 다음과 같은 핵심 개념들을 다룹니다. 이러한 개념들은 Three.js에서 객체를 정확하게 제어하고, 의도한 장면을 표현하는 데 핵심적인 역할을 합니다. - Axes helperhttps://threejs.org/docs/#api/en/helpers/AxesHelper three.js docs threejs.orgAxesHelper는 씬(Scene) 내에서, X, Y, Z축의 방향을 시각적으로 표시해주는 도우미 객체입니다. 주로 객체의 회전 방향, 기준 축 파악에 사용되며, 3D 작업에서 매우 유용.. 2025. 6. 3.
[threejs-journey 1-4] : Object Transform(position, rotation, scale) - 개요Three.js에서 Object3D는 모든 3D 객체의 기반이 되는 클래스이며, 위치(position), 회전(rotation), 크기(scale) 세 가지 기본 속성을 가지고 있습니다. 이 글에서는 각각의 속성이 어떤 구조를 가지고 있고, 어떻게 동작하며, 코드로 어떻게 조작할 수 있는지를 간단히 정리합니다. import './style.css'import * as THREE from 'three' // Canvasconst canvas = document.querySelector('canvas.webgl')// Sceneconst scene = new THREE.Scene()/** * Objects */const geometry = new THREE.BoxGeometry(1, 1, 1)cons.. 2025. 6. 1.
[threejs-journey 1-3] : Scene 구성(깊게 통찰해보자!) 개요안녕하세요. 이번에는 3D 웹을 살펴보게 되었습니다. 3D 웹은 webGL만 있는 줄 알았는데, Three.js라는 라이브러리가 있더군요. 해당 라이브러리를 이용해서 3D 웹을 공부하게 되었습니다. 저는 위 제목처럼 강의를 구매했고, 해당 강의에서 설명하는 것을 기반으로 더 깊게파서 포스팅하려 합니다. 저는 이 코드의 근거가 무엇이며, 왜 라이브러리에서는 이렇게 사용해야 할까? 를 원론적으로 파고들 생각입니다. 그래서 포스팅이 상당 부분 이해가 안될 수 도 있으며, 저 또한 공부중이기 때문에 설명에 대한 실수가 나올 수 있습니다. 이 점 참고해서 더블 체킹 부탁드리고, 문제가 있는 부분을 지적해주시면, 바로 수정해보도록 하겠습니다. 본론 DOCTYPE html>html lang="en">head> .. 2025. 5. 30.

티스토리툴바