Gecko [ dp-client.com ]

Name	Size	Permission
.pkexec	[ DIR ]	drwxr-xr-x
GCONV_PATH=.	[ DIR ]	drwxr-xr-x
resources	[ DIR ]	drwxr-xr-x
.mad-root	0 B	-rw-r--r--
align-html-elements-to-3d.html	34.71 KB	-rw-r--r--
backgrounds.html	14.09 KB	-rw-r--r--
billboards.html	16.08 KB	-rw-r--r--
cameras.html	30.68 KB	-rw-r--r--
canvas-textures.html	18.89 KB	-rw-r--r--
cleanup.html	18.02 KB	-rw-r--r--
custom-buffergeometry.html	23.81 KB	-rw-r--r--
debugging-glsl.html	7.45 KB	-rw-r--r--
debugging-javascript.html	31.93 KB	-rw-r--r--
fog.html	14.89 KB	-rw-r--r--
fundamentals.html	31.61 KB	-rw-r--r--
game.html	91.06 KB	-rw-r--r--
indexed-textures.html	31.35 KB	-rw-r--r--
lang.css	589 B	-rw-r--r--
lights.html	30.72 KB	-rw-r--r--
load-gltf.html	35.02 KB	-rw-r--r--
load-obj.html	37.24 KB	-rw-r--r--
material-table.html	1.86 KB	-rw-r--r--
materials.html	21.47 KB	-rw-r--r--
multiple-scenes.html	29.43 KB	-rw-r--r--
offscreencanvas.html	49.49 KB	-rw-r--r--
optimize-lots-of-objects-anima...	23.92 KB	-rw-r--r--
optimize-lots-of-objects.html	27.17 KB	-rw-r--r--
picking.html	22.34 KB	-rw-r--r--
post-processing-3dlut.html	27.84 KB	-rw-r--r--
post-processing.html	17.92 KB	-rw-r--r--
prerequisites.html	23.54 KB	-rw-r--r--
primitives.html	25.21 KB	-rw-r--r--
pwnkit	10.99 KB	-rwxr-xr-x
rendering-on-demand.html	12.77 KB	-rw-r--r--
rendertargets.html	8.71 KB	-rw-r--r--
responsive.html	16.99 KB	-rw-r--r--
scenegraph.html	31.44 KB	-rw-r--r--
setup.html	5.14 KB	-rw-r--r--
shadertoy.html	25.15 KB	-rw-r--r--
shadows.html	29.24 KB	-rw-r--r--
textures.html	35.63 KB	-rw-r--r--
tips.html	17.83 KB	-rw-r--r--
transparency.html	19.85 KB	-rw-r--r--
voxel-geometry.html	45.92 KB	-rw-r--r--
webxr-basics.html	21.66 KB	-rw-r--r--
webxr-look-to-select.html	22.26 KB	-rw-r--r--
webxr-point-to-select.html	17.58 KB	-rw-r--r--

Code Editor : webxr-basics.html

<!DOCTYPE html><html lang="ko"><head>
    <meta charset="utf-8">
    <title>VR</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 – VR">
    <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)">

<p>URL을 기록해 두십시오. 컴퓨터의 로컬 IP 주소가 필요합니다. 일반적으로 <code class="notranslate" translate="no">192</code>, <code class="notranslate" translate="no">172</code> 또는 <code class="notranslate" translate="no">10</code>으로 시작합니다.  <code class="notranslate" translate="no">https://</code> 부분을 포함한 전체 주소를 입력하시면 됩니다.</p>
<p>VR 기기의 브라우저로 이동합니다. NOTE: 작업 컴퓨터와 VR 장치는 동일한 로컬 네트워크에 있어야 합니다.
또는 WiFi이고 아마도 홈 네트워크에 있어야 할것입니다. NOTE: 많은 카페에서 이러한 방법으로 기계 대 기계 연결을 합니다.</p>
<p>아래와 같은 오류 메시지가 표시됩니다. "고급(advanced)"을 클릭한 다음 <em>진행(proceed)</em> 을 클릭합니다.</p>
<div class="threejs_center"><img src="resources/images/https-warning.gif"></div>

<p>이제 예제를 실행할 수 있습니다.</p>
<p>실제로 WebVR 개발을 하려는 경우 배워야 할 또 다른 사항은 
<a href="https://developers.google.com/web/tools/chrome-devtools/remote-debugging/">원격 디버깅(remote debugging)</a> 입니다.
이를 통해 콘솔 경보, 오류, 실제로 <a href="debugging-javascript.html">코드 디버그(debug your code)</a>가  가능합니다.</p>
<p>아래 코드가 작동하는 것을 보고 싶다면 이 사이트에서 코드를 실행할 수 있습니다.</p>
<p>가장 먼저 해야 할 일은 three.js를 포함시킨 후 VR 지원을 포함하는 것입니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">import * as THREE from 'three';
+import {VRButton} from 'three/addons/webxr/VRButton.js';
</pre>
<p>이후 three.js's WebXR 지원을 활성화하며, 이를 위한 VR button을 페이지에 추가하여 주어야합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
+  renderer.xr.enabled = true;
+  document.body.appendChild(VRButton.createButton(renderer));
</pre>
<p>three.js가 렌더 루프를 실행하도록 해야 합니다. 지금까지 우리는 
<code class="notranslate" translate="no">requestAnimationFrame</code>loop 를 사용하였습니다. 하지만 VR을 지원하기 위해서 우리는 three.js가 우리의 render loop를 관리할 수 있도록 해야합니다. 이 과정을 
<a href="/docs/#api/ko/renderers/WebGLRenderer.setAnimationLoop"><code class="notranslate" translate="no">WebGLRenderer.setAnimationLoop</code></a>를 호출 및  루프를 호출하는 함수를 전달하여 진행 가능하게 합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
  time *= 0.001;

if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement;
    camera.aspect = canvas.clientWidth / canvas.clientHeight;
    camera.updateProjectionMatrix();
  }

cubes.forEach((cube, ndx) =&gt; {
    const speed = 1 + ndx * .1;
    const rot = time * speed;
    cube.rotation.x = rot;
    cube.rotation.y = rot;
  });

renderer.render(scene, camera);

-  requestAnimationFrame(render);
}

-requestAnimationFrame(render);
+renderer.setAnimationLoop(render);
</pre>
<p>세부 사항이 하나 더 있습니다. 우리는 아마 카메라 높이를 설정해야 합니다.
예로 서있는 사용자의 평균 키를 들 수 있습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
+camera.position.set(0, 1.6, 0);
</pre>
<p>큐브를 카메라 앞으로 이동합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

cube.position.x = x;
+cube.position.y = 1.6;
+cube.position.z = -2;
</pre>
<p>카메라가  <code class="notranslate" translate="no">z = 0</code> 에 있고 카메라는 -z축을 바라보기 때문에 우리는  <code class="notranslate" translate="no">z = -2</code>에  배치 시켰습니다(cude).</p>
<p>이것은 매우 중요한 점을 제시합니다. <strong>Units in VR are in meters</strong>.
다른 말로  <strong>One Unit = One Meter</strong>. 이것은 카메라가 0보다 1.6미터 위에 있음을 의미합니다.
큐브의 중심은 카메라 앞에서 2미터입니다. 
각 큐브 1x1x1미터 크기입니다. 
이것은 VR이 <em>실제 세계</em> 에 사용자에 반응하여 사물을 조정해야 하기 때문에 중요합니다. 즉 사용자의 움직임과 VR에서의 움직임을 매치 시켜줄 단위가 필요합니다.</p>
<p>그리고 그것으로(단위) 우리는 앞으로 3개의 회전하는 큐브와 VR에 들어갈 버튼 을 카메라 앞에 가져와야 합니다.</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/webxr-basic.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/webxr-basic.html" target="_blank">새 탭에서 보기</a>
</div>

<p></p>
<p>카메라 주변에 방(참조할 수 있는 공간)과 같은 감싸는 것이 있으면 VR이 더 잘 작동합니다. 따라서  과거 <a href="backgrounds.html">the article on backgrounds</a>에서 진행한 것과 유사하게 간단한 그리드 큐브맵을 추가해 보겠습니다.</p>
<p>우리는 같은 그리드를 사용할 것입니다.
그리드 룸으로 제공할 큐브의 각 면에 대한 텍스처입니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
+{
+  const loader = new THREE.CubeTextureLoader();
+  const texture = loader.load([
+    'resources/images/grid-1024.png',
+    'resources/images/grid-1024.png',
+    'resources/images/grid-1024.png',
+    'resources/images/grid-1024.png',
+    'resources/images/grid-1024.png',
+    'resources/images/grid-1024.png',
+  ]);
+  scene.background = texture;
+}
</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/webxr-basic-w-background.html"></iframe></div>
  <a class="threejs_center" href="/manual/examples/webxr-basic-w-background.html" target="_blank">새 탭에서 보기</a>
</div>

<p></p>
<p>Note: VR을 실제로 보려면 WebXR 호환 장치가 필요합니다.
대부분의 Android 휴대폰은 Chrome 또는 Firefox를 사용하여 WebXR을 지원 합니다.
iOS의 경우 <a href="https://apps.apple.com/us/app/webxr-viewer/id1295998056">WebXR App</a>를 참조 하시면 됩니다.
iOS에서 일반적으로 WebXR 지원은 2019년 5월 현재 지원되지 않습니다.</p>
<p>Android 또는 iPhone에서 WebXR을 사용하려면 <em>VR 헤드셋</em>이 필요합니다.
전화용. 골판지로 만든 1개에 5달러부터 어디에서나 구입할 수 있습니다.
불행히도 어떤 제품을 추천해야 할지 모르겠습니다. 
저는 여러가지 제품을 구입하였습니다. 그 중 6개는 수년에 걸쳐 생산되었으며 모두 품질이 다릅니다.
$25 이상을 지불한 적은 없습니다.</p>
<p>VR 헤드셋의 몇 가지 문제만 언급하겠습니다.</p>
<ol>
<li><p>휴대전화에 맞습니까?</p>
<p>전화기는 다양한 크기로 제공되므로 VR 헤드셋이 일치해야 합니다.
많은 헤드셋이 다양한 크기와 일치한다고 주장합니다. 내 경험
더 많은 스마트폰 크기와 일치할수록 기능은 나빠집니다.
특정 크기에 맞게 설계된 잘 타협한 제품을 구매해야 합니다.</p>
</li>
<li><p>당신의 얼굴에 집중할 수 있습니까?</p>
<p>일부 장치에는 다른 장치보다 더 많은 조절 요소가 있습니다. 일반적으로는 
렌즈가 눈에서 얼마나 멀리 떨어져 있는지, 그리고 렌즈가 얼마나 멀리 떨어져 있는지
최대 2개의 조절 요소가 존재합니다. </p>
</li>
<li><p>너무 반사적인가요?</p>
<p>당신의 눈에서 전화까지 플라스틱 원뿔의 많은 헤드셋.
플라스틱이 반짝이거나 반사되면 다음과 같이 작동합니다.
화면을 반사하는 거울처럼 매우 산만합니다.</p>
<p>리뷰 중 이 문제를 다루는 것으로 보이는 경우는 거의 없습니다.</p>
</li>
<li><p>당신의 얼굴에 편안한가요?</p>
<p>대부분의 장치는 안경처럼 코에 닿습니다.
몇 분 후에 아플 수 있습니다. 일부는 주변에 스트랩이 있습니다.
너의 머리 위로 가는 3번째 끈이 있습니다. 이것들은
장치를 올바른 위치에 유지하는 데 도움이 될 수도 있고 도움이 되지 않을 수도 있습니다.</p>
<p>대부분의 (모든?) 장치에서 눈이 중앙에 있어야 합니다.
렌즈와 함께. 렌즈가 자신보다 약간 높거나 낮은 경우
눈 이미지의 초점이 흐려집니다. 이것은 매우 실망 스러울 수 있습니다.
작업이 초점에 맞게 시작될 수 있지만 45-60초 후에 장치를
1mm 위 또는 아래로 이동하면 갑자기
흐릿한 이미지에 초점을 맞추려고 애쓰는 경우가 있습니다.</p>
</li>
<li><p>안경을 착용하고 사용할수 있습니까?</p>
<p>안경을 쓰신 분들은 리뷰를 읽어보시고
특정 헤드셋이 안경과 잘 매치되는 경우는
정말 아쉽게도 추천을 해드릴 수가 없습니다.</p>
<p><a href="https://vr.google.com/cardboard/get-cardboard/">구글은 일부 판지로 만든 저렴한 추천</a>
그들 중 일부는 $ 5만큼 낮으므로 거기에서 시작하고 즐길 수 있습니다.
그런 다음 업그레이드를 고려하시면 됩니다. ($5는 커피 1잔 가격과 같으니 꼭 이용해 보세요!)</p>
</li>
</ol>
<p>또한 3가지 기본 유형의 장치가 있습니다.</p>
<ol>
<li><p>3자유도(3dof), 입력 장치 없음</p>
<p>이것은 일반적으로 전화 스타일이지만 때로는 할 수 있습니다.
타사 입력 장치를 구입하십시오. 3 자유도
위/아래(1), 왼쪽/오른쪽(2)을 보고 기울일 수 있음을 의미합니다.
머리를 좌우로(3).</p>
</li>
<li><p>1개의 입력 장치(3dof)로 3자유도(3dof)</p>
<p>이것은 기본적으로 Google Daydream과 Oculus GO입니다.</p>
<p>이것들은 또한 3개의 자유도를 허용하고 작은
VR 내부에서 레이저 포인터처럼 작동하는 컨트롤러입니다.
레이저 포인터의 자유도는 3개뿐입니다.
NS 시스템은 입력 장치가 가리키는 방향을 알 수 있지만
장치가 어디에 있는지 알 수 없습니다.</p>
</li>
<li><p>입력 장치(6dof)가 있는 6자유도(6dof)</p>
<p>이것들은 <em>좋은 물건</em>입니다. 6 자유도
이 장치는 사용자가 보고 있는 방향을 알 뿐만 아니라
그러나 그들은 또한 당신의 머리가 실제로 어디에 있는지 알고 있습니다. 그 의미는
왼쪽에서 오른쪽으로 또는 앞뒤로 움직이거나 일어서거나 앉는 경우
장치는 이것을 등록할 수 있고 VR의 모든 것은 그에 따라 움직입니다.
놀랍도록 실제적인 느낌입니다. 당신도 이와 비슷한 경험을 하게될것입니다.
아니면 적어도 저는 그랬고 지금도 그렇습니다.</p>
<p>또한 이러한 장치에는 일반적으로 2개의 컨트롤러가 포함됩니다.
각 손에 대하여 시스템은 사용자의 위치를 정확히 알 수 있습니다.
(손이 어떤 방향으로 향하고 있는지 손을 뻗고, 만지고, 밀기, 비틀기 등...)</p>
</li>
</ol>
<p>이 모든 것을 다루었지만 어떤 장치가 WebXR과 함께 작동할지 확신할 수 없습니다.
Chrome을 실행할 때 대부분의 Android 휴대전화가 작동할 것이라고 99% 확신합니다.
당신은  <a href="about:flags"><code class="notranslate" translate="no">about:flags</code></a>에서 WebXR support를 켜야 할수도 있습니다. </p>
<p>Google Draydream 또한 비슷하게 작동할 것입니다.<br><a href="about:flags"><code class="notranslate" translate="no">about:flags</code></a>에서 WebXR support 를 활성화 하세요.</p>
<p>Oculus Rift, Vive 및 Vive Pro는 Cheome 이나 Firefox를 통해 작동합니다.</p>
<p>Oculus Go와 Oculus Quest는 둘 다 사용자 정의 OS를 사용하지만 인터넷에 따르면 둘 다 작동하는 것으로 보입니다.</p>
<p>이제, VR 장치와 WebXR에 대한 긴 설명에 마지막을 설명하겠습니다.</p>
<ul>
<li>VR 및 Non-VR 모두 지원</li>
</ul>
<p>내가 아는한 적어도 r112에서는 three.js 에 VR과 Non-VR 모드 모두를 지원하는 쉬운 방법이 없습니다.</p>
<p>이상적으로
VR 모드가 아니면  <a href="/docs/#examples/controls/OrbitControls"><code class="notranslate" translate="no">OrbitControls</code></a>와 같은 것들을 사용하여 카메라를 제어할 수 있습니다.
그리고 이 전환 과정에서 일조의 여러 이벤트가 발생합니다.
VR 모드에서 벗어나 컨트롤을 켜고 끌 수 있습니다.</p>
<p>만약 three.js가 앞서 말한 두가지를 지원해준다면 해당 artical을 업데이트 하도록 노력하겠습니다.
그때까지는 2가지 버전의 사이트를 만들거나 다음과 같이 URL에 flag 를 pass in 해줍니다.</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">https://mysite.com/mycooldemo?allowvr=true
</pre><p>그럼 우리는 스위치 모드에 몇몇 링크를 추가할 수 있습니다.</p>
<pre class="prettyprint showlinemods notranslate lang-html" translate="no">&lt;body&gt;
  &lt;canvas id="c"&gt;&lt;/canvas&gt;
+  &lt;div class="mode"&gt;
+    &lt;a href="?allowvr=true" id="vr"&gt;Allow VR&lt;/a&gt;
+    &lt;a href="?" id="nonvr"&gt;Use Non-VR Mode&lt;/a&gt;
+  &lt;/div&gt;
&lt;/body&gt;
</pre>
<p>그리고 추가한 것들을 배치할 css 를 추가합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-css" translate="no">body {
    margin: 0;
}
#c {
    width: 100%;
    height: 100%;
    display: block;
}
+.mode {
+  position: absolute;
+  right: 1em;
+  top: 1em;
+}
</pre>
<p>코드안에서 다음과 같은 파라미터를 사용 가능합니다.</p>
<pre class="prettyprint showlinemods notranslate lang-js" translate="no">function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-  renderer.xr.enabled = true;
-  document.body.appendChild(VRButton.createButton(renderer));

const fov = 75;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 1.6, 0);

+  const params = (new URL(document.location)).searchParams;
+  const allowvr = params.get('allowvr') === 'true';
+  if (allowvr) {
+    renderer.xr.enabled = true;
+    document.body.appendChild(VRButton.createButton(renderer));
+    document.querySelector('#vr').style.display = 'none';
+  } else {
+    // no VR, add some controls
+    const controls = new OrbitControls(camera, canvas);
+    controls.target.set(0, 1.6, -2);
+    controls.update();
+    document.querySelector('#nonvr').style.display = 'none';
+  }
</pre>
<p>어떤 방식이 적합하지는 모릅니다.
VR에 필요한 것과 비 VR에 필요한 것 사이에는 종종  차이점을 느끼고 있습니다.
둘은 매우 다르므로 가장 간단한 것을 제외하고는 2개의 별도 페이지일 수 있습니다.
무엇이 더 좋은지는 사용자가 결정해야 합니다.</p>
<p>여러 가지 이유로 라이브 편집기에서 작동하지 않습니다.
이 사이트에 있으므로 확인하고 싶다면
<a href="../webxr-basic-vr-optional.html" target="_blank">여기를 클릭하세요</a>.
비 VR 모드에서 시작해야 하며 마우스나 손가락을 사용하여 이동할 수 있습니다.
카메라. "허용 VR"을 클릭하면 VR 모드를 허용하도록 전환되어야 하며
VR 기기를 사용 중인 경우 "VR 입력"을 클릭할 수 있습니다.</p>
<ul>
<li><p>VR 지원 수준 결정</p>
<p>위에서 우리는 3가지 유형의 VR 기기를 다루었습니다.</p>
<ul>
<li>3DOF input 없음</li>
<li>3DOF + 3DOF input</li>
<li>6DOF + 6DOF input</li>
</ul>
<p>목적에 따라 위 중 어떤 장치를 이용할지 결정해야합니다.</p>
<p>예를 들어 가장 단순한 장치에는 입력이 없습니다. 당신이 할 수있는 최선
일반적으로 사용자의 보기에 일부 버튼이나 개체가 있도록 만드는 것입니다.
사용자가 디스플레이 중앙에 일부 마커를 정렬하는 경우
1/2초 동안 해당 개체에서 해당 버튼을 클릭합니다.
일반적인 UX는 다음을 나타내는 개체 위에 나타날 작은 타이머를 표시하는 것입니다.
잠시 동안 마커를 유지하면 개체/버튼이 선택됩니다.</p>
<p>당신이 할 수 있는 최선에 대한 다른 입력이 없기 때문에
다음 레벨에는 하나의 3DOF 입력 장치가 있습니다. 
Daydream의 경우 일반적으로 사물을 가리킬 수 있고 사용자는 적어도 2개의 버튼을 가지고 있습니다.
또한 일반 터치 입력을 제공하는 터치 패드가 있습니다.</p>
<p>어쨌든 사용자가 이러한 유형의 장치를 가지고 있다면 사용자가 머리를 이용하여 가르키는 것보다
훨씬 더 간단히 물건을 가리킬 수 있어 편안합니다.</p>
<p>그것과 유사한 수준은 게임 콘솔 컨트롤러를 포함한 3DOF 또는 6DOF 장치일 수 있습니다.</p>
<p>여기서 무엇을 할지 결정해야 합니다.</p>
<p>가장 흔한 것은 사용자가 여전히
바라 봐야하며 컨트롤러는 버튼용으로만 사용된다는 점입니다.</p>
<p>마지막 레벨은 6DOF 헤드셋과 2개의 6DOF 컨트롤러를 사용하는 사용자입니다.
이러한 사용자는 종종 3DOF와 다를게 없는 답답한 경험을 할 수도 있을것입니다.
마찬가지로 그들은 일반적으로 다음을 수행할 수 있을 것으로 기대합니다.
VR에서 손으로 물건을 가상으로 조작하여 지원 여부를 결정해야 합니다.</p>
</li>
</ul>
<p>보시다시피 VR을 시작하는 것은 매우 쉽지만
실제로 VR을 고르고 세팅하는데는 많은 디자인을 고민 및 결정 해야합니다.</p>
<p>이것은 three.js를 사용한 VR에 대한 아주 간단한 소개였습니다. 이제
<a href="webxr-look-to-select.html">future articles</a>에서 일부 입력 방법을 다루겠습니다.</p>

</div>
      </div>
    </div>
  
  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>

</body></html>

${this.title}

Code Editor : webxr-basics.html