123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536 |
- <!DOCTYPE html><html lang="ko"><head>
- <meta charset="utf-8">
- <title>카메라(Cameras)</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – 카메라(Cameras)">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- <link rel="stylesheet" href="/manual/ko/lang.css">
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>카메라(Cameras)</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>※ 이 글은 Three.js의 튜토리얼 시리즈로서,
- 먼저 <a href="fundamentals.html">Three.js의 기본 구조에 관한 글</a>을
- 읽고 오길 권장합니다.</p>
- <p>이번 장에서는 카메라(cameras)에 대해 알아보겠습니다. <a href="fundamentals.html">첫 번째 장</a>에서
- 일부 다루긴 했지만, 중요 요소인 만큼 더 자세히 살펴볼 필요가 있습니다.</p>
- <p>Three.js에서 가장 자주 사용하는 카메라는 여태까지 썼던 <a href="/docs/#api/ko/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a>(원근 카메라)입니다.
- 이 카메라는 멀리 있는 물체를 가까이 있는 것보다 상대적으로 작게 보이도록 해주죠.</p>
- <p><a href="/docs/#api/ko/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a>는 <em>절두체(frustum)</em>를 만듭니다. <a href="https://ko.wikipedia.org/wiki/%EC%A0%88%EB%91%90%EC%B2%B4">절두체(frustum)는 입체(보통 원뿔이나 각뿔)를
- 절단하는 하나나 두 평행면 사이의 부분</a>을
- 의미하죠. 여기서 입체란 정육면체, 원뿔, 구, 원통, 절두체 등의 3D 요소입니다.</p>
- <div class="spread">
- <div><div data-diagram="shapeCube"></div><div>정육면체(cube)</div></div>
- <div><div data-diagram="shapeCone"></div><div>원뿔(cone)</div></div>
- <div><div data-diagram="shapeSphere"></div><div>구(sphere)</div></div>
- <div><div data-diagram="shapeCylinder"></div><div>원통(cylinder)</div></div>
- <div><div data-diagram="shapeFrustum"></div><div>절두체(frustum)</div></div>
- </div>
- <p>이걸 굳이 언급하는 이유는 글을 쓰는 저도 몇 년 동안 이를 몰랐기 때문입니다. 책이든 인터넷 글이든,
- <em>절두체</em>라는 단어를 봤다면 눈이 뒤집어졌을 겁니다. 입체의 이름을 알면 이해하기도, 기억하기도 훨씬
- 쉽죠 😅.</p>
- <p><a href="/docs/#api/ko/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a>는 4가지 속성을 바탕으로 절두체를 만듭니다. <code class="notranslate" translate="no">near</code>는 절두체가 어디서 시작할지
- 결정하는 속성이고, <code class="notranslate" translate="no">far</code>는 절두체의 끝입니다. <code class="notranslate" translate="no">fov</code>는 시아갹(field of view)으로, <code class="notranslate" translate="no">near</code>와 카메라의
- 거리에 따라 절두체의 높이를 계산해 적용합니다. <code class="notranslate" translate="no">aspect</code>는 절두체의 너비에 관여하는 비율으로, 절두체의
- 너비는 절두체의 높이에 이 비율을 곱한 값입니다.</p>
- <p><img src="../resources/frustum-3d.svg" width="500" class="threejs_center"></p>
- <p><a href="lights.html">이전 장</a>에서 썼던 바닥면, 구체, 정육면체로 이루어진 예제를 다시 사용해
- 카메라의 속성을 조정할 수 있도록 만들겠습니다.</p>
- <p><code class="notranslate" translate="no">near</code> 속성은 항상 <code class="notranslate" translate="no">far</code> 속성보다 커야 하니, 이를 제어할 <code class="notranslate" translate="no">MinMaxGUIHelper</code> 헬퍼 클래스를
- 만들겠습니다. 이 클래스는 lil-gui가 제어할 <code class="notranslate" translate="no">min</code>과 <code class="notranslate" translate="no">max</code> 속성이 있고, lil-gui가 이를 조정할
- 때 지정한 두 가지 속성을 동시에 변경합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">class MinMaxGUIHelper {
- constructor(obj, minProp, maxProp, minDif) {
- this.obj = obj;
- this.minProp = minProp;
- this.maxProp = maxProp;
- this.minDif = minDif;
- }
- get min() {
- return this.obj[this.minProp];
- }
- set min(v) {
- this.obj[this.minProp] = v;
- this.obj[this.maxProp] = Math.max(this.obj[this.maxProp], v + this.minDif);
- }
- get max() {
- return this.obj[this.maxProp];
- }
- set max(v) {
- this.obj[this.maxProp] = v;
- this.min = this.min; // min setter로 작동
- }
- }
- </pre>
- <p>이제 GUI를 만들어보죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function updateCamera() {
- camera.updateProjectionMatrix();
- }
- const gui = new GUI();
- gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
- const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
- gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
- gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
- </pre>
- <p>카메라의 속성을 변경할 때마다 카메라의 <a href="/docs/#api/ko/cameras/PerspectiveCamera#updateProjectionMatrix"><code class="notranslate" translate="no">updateProjectionMatrix</code></a>
- 메서드를 호출해야 하므로, <code class="notranslate" translate="no">updateCamera</code>라는 함수를 만들어 값이 변경될 때마다 함수를 호출하도록
- 합니다.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-perspective.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-perspective.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>값을 조정하며 카메라가 어떤 식으로 작동하는지 확인해보세요. <code class="notranslate" translate="no">aspect</code>는 창의 비율을 그대로 사용하도록
- 설정되어 있으므로, 이를 바꾸고 싶다면 예제를 새 창에서 열어 코드를 직접 수정해야 합니다.</p>
- <p>아직도 카메라가 어떤 식으로 작동하는지 보기 어려운가요? 까짓것 그럼 카메라를 하나 더 만들어보죠.
- 하나는 위의 예제와 같은 방식의 카메라이고, 다른 하나는 이 카메라의 시야와 절두체를 렌더링해
- 카메라가 어떻게 움직이는지 관찰할 수 있도록 만들겠습니다.</p>
- <p>Three.js의 가위 함수(scissor function)을 이용하면 쉽습니다. 가위 함수를 사용해 양쪽에
- 장면 두 개, 카메라 두 개를 렌더링하겠습니다.</p>
- <p>먼저 HTML과 CSS로 양쪽에 div 요소를 배치합니다. 이러면 각각의 카메라에 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를
- 두어 이벤트 처리하기도 훨씬 간단합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><body>
- <canvas id="c"></canvas>
- + <div class="split">
- + <div id="view1" tabindex="1"></div>
- + <div id="view2" tabindex="2"></div>
- + </div>
- </body>
- </pre>
- <p>CSS로 두 div 요소가 canvas 위 양쪽에 자리하게 합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">.split {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- }
- .split > div {
- width: 100%;
- height: 100%;
- }
- </pre>
- <p>카메라의 절두체를 시각화할 <a href="/docs/#api/ko/helpers/CameraHelper"><code class="notranslate" translate="no">CameraHelper</code></a>를 추가합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cameraHelper = new THREE.CameraHelper(camera);
- ...
- scene.add(cameraHelper);
- </pre>
- <p>다음으로 두 div 요소를 참조합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const view1Elem = document.querySelector('#view1');
- const view2Elem = document.querySelector('#view2');
- </pre>
- <p>그리고 기존 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>가 왼쪽 div 요소의 이벤트에만 반응하도록 설정합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const controls = new OrbitControls(camera, canvas);
- +const controls = new OrbitControls(camera, view1Elem);
- </pre>
- <p>다음으로 <a href="/docs/#api/ko/cameras/PerspectiveCamera"><code class="notranslate" translate="no">PerspectiveCamera</code></a>와 두 번째 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를 추가합니다. 이 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>를
- 두 번째 카메라에 종속시키고, 오른쪽 div 요소의 이벤트에만 반응하도록 합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera2 = new THREE.PerspectiveCamera(
- 60, // 시야각(fov)
- 2, // 비율(aspect)
- 0.1, // near
- 500, // far
- );
- camera2.position.set(40, 10, 30);
- camera2.lookAt(0, 5, 0);
- const controls2 = new OrbitControls(camera2, view2Elem);
- controls2.target.set(0, 5, 0);
- controls2.update();
- </pre>
- <p>끝으로 가위 함수를 사용해 화면을 분할하겠습니다. 카메라 각각의 시점에 따라
- 장면을 canvas의 양쪽에 나눠 렌더링하게끔 할 것입니다.</p>
- <p>아래의 함수는 canvas 위에 덮어 씌운 요소의 사각 좌표(rectangle)를 구합니다.
- 그리고 해당 사각 좌표로 <code class="notranslate" translate="no">renderer</code>의 화면(viewport)과 가위(scissor)의 값을
- 정의한 뒤, 사각 좌표의 가로세로 비율을 반환합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function setScissorForElement(elem) {
- const canvasRect = canvas.getBoundingClientRect();
- const elemRect = elem.getBoundingClientRect();
- // canvas에 대응하는 사각형을 구하기
- const right = Math.min(elemRect.right, canvasRect.right) - canvasRect.left;
- const left = Math.max(0, elemRect.left - canvasRect.left);
- const bottom = Math.min(elemRect.bottom, canvasRect.bottom) - canvasRect.top;
- const top = Math.max(0, elemRect.top - canvasRect.top);
- const width = Math.min(canvasRect.width, right - left);
- const height = Math.min(canvasRect.height, bottom - top);
- // canvas의 일부분만 렌더링하도록 scissor 적용
- const positiveYUpBottom = canvasRect.height - bottom;
- renderer.setScissor(left, positiveYUpBottom, width, height);
- renderer.setViewport(left, positiveYUpBottom, width, height);
- // 비율 반환
- return width / height;
- }
- </pre>
- <p>이제 이 함수를 사용해 <code class="notranslate" translate="no">render</code> 함수에서 장면을 두 번 렌더링할 수 있습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no"> function render() {
- - if (resizeRendererToDisplaySize(renderer)) {
- - const canvas = renderer.domElement;
- - camera.aspect = canvas.clientWidth / canvas.clientHeight;
- - camera.updateProjectionMatrix();
- - }
- + resizeRendererToDisplaySize(renderer);
- +
- + // 가위 활성화
- + renderer.setScissorTest(true);
- +
- + // 기존 화면 렌더링
- + {
- + const aspect = setScissorForElement(view1Elem);
- +
- + // 비율에 따라 카메라 조정
- + camera.aspect = aspect;
- + camera.updateProjectionMatrix();
- + cameraHelper.update();
- +
- + // 기존 화면에서 가이드라인(CameraHelper)이 노출되지 않도록 설정
- + cameraHelper.visible = false;
- +
- + scene.background.set(0x000000);
- +
- + // 렌더링
- + renderer.render(scene, camera);
- + }
- +
- + // 두 번째 카메라 렌더링
- + {
- + const aspect = setScissorForElement(view2Elem);
- +
- + // 비율에 따라 카메라 조정
- + camera2.aspect = aspect;
- + camera2.updateProjectionMatrix();
- +
- + // 가이드라인 활성화
- + cameraHelper.visible = true;
- +
- + scene.background.set(0x000040);
- +
- + renderer.render(scene, camera2);
- + }
- - renderer.render(scene, camera);
- requestAnimationFrame(render);
- }
- requestAnimationFrame(render);
- }
- </pre>
- <p>위 예제에서는 분할된 두 화면을 구별하기 쉽두록 두 번째 화면의 배경을 진한
- 파란색으로 칠했습니다.</p>
- <p>또한 <code class="notranslate" translate="no">render</code> 함수 안에서 모든 것을 처리하기에, <code class="notranslate" translate="no">updateCamera</code> 함수도
- 제거하였습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function updateCamera() {
- - camera.updateProjectionMatrix();
- -}
- const gui = new GUI();
- -gui.add(camera, 'fov', 1, 180).onChange(updateCamera);
- +gui.add(camera, 'fov', 1, 180);
- const minMaxGUIHelper = new MinMaxGUIHelper(camera, 'near', 'far', 0.1);
- -gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
- -gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far').onChange(updateCamera);
- +gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near');
- +gui.add(minMaxGUIHelper, 'max', 0.1, 50, 0.1).name('far');
- </pre>
- <p>이제 두 번째 화면에서 첫 번째 카메라의 절두체를 확인할 수 있습니다.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-perspective-2-scenes.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-perspective-2-scenes.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>왼쪽은 기존의 화면과 같고 오른쪽에 왼쪽 카메라의 절두체가 보입니다.
- 패널에서 <code class="notranslate" translate="no">near</code>, <code class="notranslate" translate="no">far</code>, <code class="notranslate" translate="no">fov</code> 값을 조정하거나 마우스로 화면을 움직여보면,
- 오른쪽 화면의 절두체 안에 있는 물체만 왼쪽 화면에 노출됨을 확인할 수
- 있을 겁니다.</p>
- <p>누군가 이렇게 물을지도 모르겠네요. 그냥 <code class="notranslate" translate="no">near</code>를 0.0000000001로 설정하고 <code class="notranslate" translate="no">far</code>를
- 10000000000000로 설정해버리면요? 이러면 모든 게 항상 다 보이지 않나요? 이유를
- 설명하자면, GPU는 어떤 물체가 앞에 있거나 다른 물체의 뒤에 있을 때만 정밀도가
- 높기 때문입니다. 정밀도는 일정량이 <code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code> 사이에 퍼져 있는데, 기본적으로
- 카메라에 가까울 수록 정밀도가 높고 멀수록 정밀도가 낮아집니다.</p>
- <p>현상을 직접 확인해보죠. 위의 예제를 수정해 20개의 구체를 한 줄로 세우겠습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const sphereRadius = 3;
- const sphereWidthDivisions = 32;
- const sphereHeightDivisions = 16;
- const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
- const numSpheres = 20;
- for (let i = 0; i < numSpheres; ++i) {
- const sphereMat = new THREE.MeshPhongMaterial();
- sphereMat.color.setHSL(i * .73, 1, 0.5);
- const mesh = new THREE.Mesh(sphereGeo, sphereMat);
- mesh.position.set(-sphereRadius - 1, sphereRadius + 2, i * sphereRadius * -2.2);
- scene.add(mesh);
- }
- }
- </pre>
- <p><code class="notranslate" translate="no">near</code> 속성을 0.00001로 설정합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const fov = 45;
- const aspect = 2; // canvas 기본값
- -const near = 0.1;
- +const near = 0.00001;
- const far = 100;
- const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- </pre>
- <p>그리고 기존의 GUI 코드를 수정해 0.00001의 작은 단위도 설정할 수 있도록 합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-gui.add(minMaxGUIHelper, 'min', 0.1, 50, 0.1).name('near').onChange(updateCamera);
- +gui.add(minMaxGUIHelper, 'min', 0.00001, 50, 0.00001).name('near').onChange(updateCamera);
- </pre>
- <p>어떤 결과가 나올 것 같나요?</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-z-fighting.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-z-fighting.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>이는 <em>z-파이팅(z-fighting, Stitching)</em>의 한 예입니다. 컴퓨터의 GPU가 어떤 픽셀이
- 앞이고 어떤 픽셀을 뒤로 보내야할지 결정할 정밀도가 모자를 때 발생하는 현상이죠.</p>
- <p>위 예제가 어떻게 해도 정상적으로 보인다면, 아래 이미지를 보기 바랍니다.</p>
- <div class="threejs_center"><img src="../resources/images/z-fighting.png" style="width: 570px;"></div>
- <p>한 가지 해결책은 Three.js에게 픽셀의 앞 뒤를 결정할 때 다른 방법을 쓰도록 설정하는
- 것입니다. <a href="/docs/#api/ko/renderers/WebGLRenderer"><code class="notranslate" translate="no">WebGLRenderer</code></a>를 생성할 때 <code class="notranslate" translate="no">logarithmicDepthBuffer</code> 속성을 활성화해주면
- 되죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
- +const renderer = new THREE.WebGLRenderer({
- + antialias: true,
- + canvas,
- + logarithmicDepthBuffer: true,
- +});
- </pre>
- <p>대게의 경우 정상적으로 보일 겁니다.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-logarithmic-depth-buffer.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-logarithmic-depth-buffer.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>문제가 그대로라면 <em>이 해결책을 쓸 수 없는 건가?</em>라는 의문에 빠질 수 있습니다.
- 이 해결책이 먹히지 않은 이유는 일부 GPU만 이 기능을 지원하기 때문이죠. 2018년
- 9월 기준으로 거의 모든 데스크탑 GPU가 이 기능을 지원하나, 모바일 기기는 대부분
- 이 기능을 지원하지 않습니다.</p>
- <p>이 기능을 쓰지 말아야 하는 또 다른 이유는, 이 기능이 일반적인 해결책보다 훨씬
- 성능이 나쁘기 때문입니다.</p>
- <p>게다가 이 기능을 활성화해도, <code class="notranslate" translate="no">near</code>를 더 작게, <code class="notranslate" translate="no">far</code>를 더 멀게 설정하다보면
- 결국 같은 현상을 만나게 될 겁니다.</p>
- <p>이는 항상 <code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code>를 설정하는데 많은 공을 들여야 한다는 의미입니다.
- <code class="notranslate" translate="no">near</code>는 대상이 보이는 한 가장 멀게, <code class="notranslate" translate="no">far</code>도 대상이 보이는 한 카메라와 가장
- 가깝게 설정하는 것이 좋죠. 만약 거대한 공간을 렌더링하는 경우, 예를 들어 사람의
- 속눈썹과 50km 떨어진 산을 동시에 보이게 하려면 다른 해결책-나중에 다룰지도 모르는-을
- 찾아야 합니다. 당장은 <code class="notranslate" translate="no">near</code>와 <code class="notranslate" translate="no">far</code>를 적절하게 설정하는 게 중요하다는 것만
- 알아둡시다.</p>
- <p>두 번째로 자주 사용하는 카메라는 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>(정사영 카메라)입니다.
- 절두체 대신 <code class="notranslate" translate="no">left</code>, <code class="notranslate" translate="no">right</code>, <code class="notranslate" translate="no">top</code>, <code class="notranslate" translate="no">bottom</code>, <code class="notranslate" translate="no">near</code>, <code class="notranslate" translate="no">far</code>로 육면체를
- 정의해 사용하죠. 육면체로 화면을 투사하기에 원근 효과가 없습니다.</p>
- <p>2분할 화면 예제를 수정해 첫 번째 화면을 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>로 바꾸겠습니다.</p>
- <p>먼저 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>를 만들어보죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const left = -1;
- const right = 1;
- const top = 1;
- const bottom = -1;
- const near = 5;
- const far = 50;
- const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
- camera.zoom = 0.2;
- </pre>
- <p>먼저 <code class="notranslate" translate="no">left</code>와 <code class="notranslate" translate="no">bottom</code>을 -1로, <code class="notranslate" translate="no">right</code>와 <code class="notranslate" translate="no">top</code>을 1로 설정했습니다. 이러면 육면체는
- 기본적으로 너비 2칸, 높이 2칸이 되겠죠. 그리고 육면체의 비율을 조정해 <code class="notranslate" translate="no">left</code>와 <code class="notranslate" translate="no">top</code>의
- 값을 조정할 수 있도록, <code class="notranslate" translate="no">zoom</code> 속성을 이용해 카메라에 보이는 범위를 조정할 수 있도록
- 했습니다.</p>
- <p>다음으로 <code class="notranslate" translate="no">zoom</code> 속성을 조정할 GUI를 추가합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const gui = new GUI();
- +gui.add(camera, 'zoom', 0.01, 1, 0.01).listen();
- </pre>
- <p><code class="notranslate" translate="no">listen</code> 메서드를 호출하면 lil-gui가 변화를 감지합니다. 이렇게 한 이유는 <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>이
- 마우스 휠 스크롤을 감지해 <code class="notranslate" translate="no">zoom</code> 속성을 변경하기 때문이죠.</p>
- <p>끝으로 왼쪽 화면을 렌더링할 때 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>를 업데이트하도록 설정합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const aspect = setScissorForElement(view1Elem);
- // 요소의 비율에 맞춰 카메라 업데이트
- - camera.aspect = aspect;
- + camera.left = -aspect;
- + camera.right = aspect;
- camera.updateProjectionMatrix();
- cameraHelper.update();
- // 기존 화면에서 가이드라인(CameraHelper)이 노출되지 않도록 설정
- cameraHelper.visible = false;
- scene.background.set(0x000000);
- renderer.render(scene, camera);
- }
- </pre>
- <p>이제 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>가 어떻게 작동하는지 확인할 차례입니다.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-orthographic-2-scenes.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-orthographic-2-scenes.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p>Three.js에서 <a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>는 주로 2D 요소를 표현하기 위해 사용합니다.
- 카메라에 얼마나 많은 요소를 보여줄지만 결정하면 되죠. 만약 canvas의 1픽셀을
- 카메라의 한 칸과 같은 크기로 지정하고 싶다면...</p>
- <p>중점을 장면의 중심에 두고 1 픽셀을 Three.js의 한 칸으로 만들 수 있습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">camera.left = -canvas.width / 2;
- camera.right = canvas.width / 2;
- camera.top = canvas.height / 2;
- camera.bottom = -canvas.height / 2;
- camera.near = -1;
- camera.far = 1;
- camera.zoom = 1;
- </pre>
- <p>2D canvas처럼 중점을 상단 왼쪽에 두려면 다음과 같이 설정할 수 있죠.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">camera.left = 0;
- camera.right = canvas.width;
- camera.top = 0;
- camera.bottom = canvas.height;
- camera.near = -1;
- camera.far = 1;
- camera.zoom = 1;
- </pre>
- <p>중점이 상단 왼쪽에 있을 경우의 좌표는 2D canvas처럼 0, 0입니다.</p>
- <p>한 번 만들어보죠! 먼저 카메라를 설정합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const left = 0;
- const right = 300; // canvas 기본 크기
- const top = 0;
- const bottom = 150; // canvas 기본 크기
- const near = -1;
- const far = 1;
- const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
- camera.zoom = 1;
- </pre>
- <p>다음으로 평면(plane) 6개를 만들어 각각 다른 텍스처를 적용하겠습니다.
- 각 평면마다 <a href="/docs/#api/ko/core/Object3D"><code class="notranslate" translate="no">THREE.Object3D</code></a> 인스턴스를 만들어 평면의 부모로 설정합니다.
- 이러면 중점을 0, 0, 상단 좌측으로 지정해 좌표를 지정하기가 쉽습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
- const textures = [
- loader.load('resources/images/flower-1.jpg'),
- loader.load('resources/images/flower-2.jpg'),
- loader.load('resources/images/flower-3.jpg'),
- loader.load('resources/images/flower-4.jpg'),
- loader.load('resources/images/flower-5.jpg'),
- loader.load('resources/images/flower-6.jpg'),
- ];
- const planeSize = 256;
- const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
- const planes = textures.map((texture) => {
- const planePivot = new THREE.Object3D();
- scene.add(planePivot);
- texture.magFilter = THREE.NearestFilter;
- const planeMat = new THREE.MeshBasicMaterial({
- map: texture,
- side: THREE.DoubleSide,
- });
- const mesh = new THREE.Mesh(planeGeo, planeMat);
- planePivot.add(mesh);
- // 평면을 움직여 상단 좌측이 중점이 되도록 설정
- mesh.position.set(planeSize / 2, planeSize / 2, 0);
- return planePivot;
- });
- </pre>
- <p>그리고 <code class="notranslate" translate="no">render</code> 함수 안에 canvas의 사이즈가 변경되었을 때 카메라를 업데이트하는
- 코드를 추가합니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render() {
- if (resizeRendererToDisplaySize(renderer)) {
- camera.right = canvas.width;
- camera.bottom = canvas.height;
- camera.updateProjectionMatrix();
- }
- ...
- </pre>
- <p><code class="notranslate" translate="no">planes</code>는 <a href="/docs/#api/ko/objects/Mesh"><code class="notranslate" translate="no">THREE.Mesh</code></a>, 평면의 배열입니다. 시간값을 기반으로 이 평면이 따로
- 움직이도록 하겠습니다.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
- time *= 0.001; // 초 단위로 변경
- ...
- const distAcross = Math.max(20, canvas.width - planeSize);
- const distDown = Math.max(20, canvas.height - planeSize);
- // total distance to move across and back
- const xRange = distAcross * 2;
- const yRange = distDown * 2;
- const speed = 180;
- planes.forEach((plane, ndx) => {
- // compute a unique time for each plane
- const t = time * speed + ndx * 300;
- // get a value between 0 and range
- const xt = t % xRange;
- const yt = t % yRange;
- // set our position going forward if 0 to half of range
- // and backward if half of range to range
- const x = xt < distAcross ? xt : xRange - xt;
- const y = yt < distDown ? yt : yRange - yt;
- plane.position.set(x, y, 0);
- });
- renderer.render(scene, camera);
- </pre>
- <p>이미지가 완벽하게 가장자리에서 튕기는 것을 확인할 수 있을 겁니다. 2D canvas에서
- 픽셀값을 이용해 구현할 때와 같은 방식이죠.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/cameras-orthographic-canvas-top-left-origin.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/cameras-orthographic-canvas-top-left-origin.html" target="_blank">새 탭에서 보기</a>
- </div>
- <p></p>
- <p><a href="/docs/#api/ko/cameras/OrthographicCamera"><code class="notranslate" translate="no">OrthographicCamera</code></a>는 게임 엔진 에디터 등에서처럼 3D 모델링 결과물의 상, 하, 좌, 우,
- 앞, 뒤를 렌더링할 때도 사용합니다.</p>
- <div class="threejs_center"><img src="../resources/images/quad-viewport.png" style="width: 574px;"></div>
- <p>위 스크린샷의 1개의 화면만 원근(perspective) 카메라이고 나머지 3개는 정사영(orthographic)
- 카메라입니다.</p>
- <p>여기까지 카메라의 기초에 대해 살펴보았습니다. 카메라를 움직이는 방법에 대해서는 다른
- 글에서 좀 더 상세히 설명할 거예요. 다음은 장에서는 <a href="shadows.html">그림자(shadows)</a>에
- 대해 먼저 살펴보겠습니다.</p>
- <p><canvas id="c"></canvas></p>
- <script type="module" src="../resources/threejs-cameras.js"></script>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|