Three.js 카메라 간결한 튜토리얼

2024-07-12

카메라 보정은 실제 카메라의 관점과 동작을 시뮬레이션하기 위해 가상 카메라를 설정하는 것과 관련된 3D 컴퓨터 그래픽의 기본 개념입니다. 인기 있는 3D 렌더링 JavaScript 라이브러리인 Three.js에서 현실적이고 몰입도 높은 3D 장면을 생성하려면 카메라 보정을 이해하는 것이 중요합니다. 이 기사에서는 3D 그래픽 기술을 향상시키려는 초보자를 위해 Three.js의 카메라 보정 기본 사항을 살펴보겠습니다.

전제 조건: 카메라 보정을 시작하기 전에 JavaScript, HTML 및 Three.js에 대한 기본적인 이해가 있어야 합니다. 3D 좌표, 변환 및 렌더링에 대해 잘 알고 있으면 도움이 됩니다.

NSDT 도구 권장 사항： Three.js AI 텍스처 개발 키트 - YOLO 합성 데이터 생성기 - GLTF/GLB 온라인 편집 - 3D 모델 형식 온라인 변환 - 프로그래밍 가능한 3D 장면 편집기 - REVIT 내보내기 3D 모델 플러그인 - 3D 모델 의미 검색 엔진 - Three.js 가상 축 개발 키트 - 3D 모델 온라인 표면 축소 - STL 모델 온라인 절단

1. 환경 설정

먼저 Three.js 라이브러리를 포함하여 필요한 상용구 코드가 포함된 HTML 파일을 만듭니다.


<!DOCTYPE html>
<html>
<head>
    <title>Camera Calibration in Three.js</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <script>
        // Your Three.js code will go here
    </script>
</body>
</html>

2. 장면과 카메라 만들기

Three.js를 초기화하려면 장면, 카메라 및 렌더러를 만듭니다.


// Set up the scene, camera, and renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 카메라 배치

카메라의 위치에 따라 장면이 렌더링되는 시점이 결정됩니다. 위치 속성을 사용하여 카메라를 3D 공간에 배치할 수 있습니다.

camera.position.set(0, 5, 10);

이 코드는 카메라의 위치를 (0, 5, 10)으로 설정합니다. 이는 3D 세계에서 x=0, y=5, z=10에 있음을 의미합니다.

4. 카메라를 가리킨다

카메라lookAt메소드를 사용하면 살펴봐야 할 지점을 정의할 수 있습니다.


const target = new THREE.Vector3(0, 0, 0);
camera.lookAt(target);

이 예에서는 카메라가 장면의 원점인 (0, 0, 0) 지점을 향하고 있습니다.

5. 시야(FOV)

카메라의 시야(FOV)는 카메라를 통해 보이는 장면의 범위를 결정합니다. FOV 값이 높을수록 시야가 넓어지고, 값이 낮을수록 시야가 확대됩니다.당신이 사용할 수있는fov속성 조정 FOV:

camera.fov = 60; // Example FOV value in degrees

6. 종횡비

카메라의 종횡비는 렌더링된 장면의 모양을 결정합니다. 일반적으로 뷰포트의 너비를 높이로 나눈 값으로 설정됩니다.


const aspectRatio = window.innerWidth / window.innerHeight;
camera.aspect = aspectRatio;

7. 가까운 클리핑 평면과 먼 클리핑 평면

근거리 및 원거리 클리핑 평면은 카메라에서 보이는 거리 범위를 정의합니다. 가까운 평면보다 가깝거나 먼 평면보다 먼 개체는 잘리고 렌더링되지 않습니다.당신이 사용할 수있는near그리고far속성은 다음 값을 설정합니다.


camera.near = 0.1;
camera.far = 1000;

8. 조리개

"카메라 조리개" 또는 "렌즈 조리개"라고도 하는 조리개는 카메라 보정의 핵심 요소이며 피사계 심도와 카메라에 들어오는 빛의 양에 영향을 미칩니다. Three.js에서는 카메라의 조리개 속성을 조정하여 조리개 효과를 시뮬레이션할 수 있습니다.


// Aperture (Camera's f-stop) - Controls depth of field and light gathering
const aperture = 0.1; // Increase this value for a shallower depth of field
camera.aperture = aperture;

9. 장면에 객체 추가

장면을 렌더링하기 전에 몇 가지 3D 개체를 추가하여 보정을 더 눈에 띄게 만들어 보겠습니다.


const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

10. 장면 렌더링

이제 장면, 카메라 및 객체가 설정되었으므로 장면을 렌더링할 수 있습니다.


function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

11. 결론

축하해요! Three.js 카메라 보정의 세계로 첫 발을 내디뎠습니다. 카메라 속성과 렌더링된 장면에 미치는 영향을 이해함으로써 시각적으로 매력적이고 몰입도 높은 3D 경험을 만들 수 있습니다. 다양한 카메라 위치, FOV 값, 장면의 개체를 실험하여 Three.js와 카메라 보정의 잠재력을 최대한 활용해 보세요.

원본 링크:Three.js 카메라에 대한 간단한 튜토리얼 - BimAnt

기술나눔