javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html><html lang="ko"><head>
    <meta charset="utf-8">
    <title>개발 환경 구성하기</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 – 개발 환경 구성하기">
    <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">
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>

<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>개발 환경 구성하기</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">
          <p>※ 이 글은 Three.js의 튜토리얼 시리즈로서,
먼저 <a href="fundamentals.html">Three.js의 기본 구조에 관한 글</a>을
읽고 오길 권장합니다.</p>
<p>Three.js의 다른 요소를 더 살펴보기 전에, 개발 환경을 구축하는 방법에 대해
알아보겠습니다. WebGL은 보안 때문에 기본적으로 로컬 파일을 직접 가져다 쓸
수 없습니다. 말인즉 실제 프로젝트를 배포/테스트하려면 웹 서버를 써야한다는
이야기죠. 다행히도 웹 서버 관련 라이브러리는 굉장히 많고, 사용하기도 쉽습니다.</p>
<p>먼저 서버에 올릴 예시를 준비해야 합니다. 원한다면 <a href="https://github.com/gfxfundamentals/threejsfundamentals/archive/gh-pages.zip">이 사이트 전체를 다운</a>
받을 수도 있죠. 다운 받은 뒤에는 압축 프로그램으로 압축을 풀어주세요.</p>
<p>다음으로 간단한 웹 서버를 하나 다운 받습니다.</p>
<p>만약 UI가 있는 웹 서버를 찾는다면
<a href="https://greggman.github.io/servez">Servez</a>를 추천합니다.</p>
<p></p><div class="threejs_image border">
  <img class="" src="../resources/servez.gif">
</div>

<p></p>
<p>압축을 푼 경로를 지정하고, "Start" 버튼을 클릭하세요. 그런 다음
<a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a>로 이동하기만
하면 됩니다. 만약 예제를 보고 싶다면 <a href="http://localhost:8080/threejs"><code class="notranslate" translate="no">http://localhost:8080/threejs</code></a>로
이동하세요.</p>
<p>서버를 중지하려면 Servez를 멈추거나 종료하면 됩니다.</p>
<p>만약 CLI(Command Line Interface, 명령 줄 인터페이스)를 선호한다면(전 선호합니다)
<a href="https://nodejs.org">node.js</a>를 써도 좋습니다. 다운 받아 설치한 다음 프롬프트 /
콘솔 / 터미널 창을 엽니다. 윈도우를 사용한다면 설치 마법사가 "Node Command Prompt"를
추가할 테니 그걸 사용해도 좋습니다.</p>
<p>창을 띄웠으면 <a href="https://github.com/greggman/servez-cli"><code class="notranslate" translate="no">servez</code></a>를 설치합니다.</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">npm -g install servez
</pre><p>OS X를 사용한다면 다음과 같이 설치할 수 있습니다.</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">sudo npm -g install servez
</pre><p>설치가 완료되면 다음과 같이 Servez를 실행합니다.</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">servez path/to/folder/where/you/unzipped/files
</pre><p>사족이지만, 다음처럼 쓸 수도 있죠.</p>
<pre class="prettyprint showlinemods notranslate notranslate" translate="no">cd path/to/folder/where/you/unzipped/files
servez
</pre><p>정상적으로 작동했다면 다음과 같은 메시지가 뜰 겁니다.</p>
<p></p><div class="threejs_image ">
  <img class="" src="../resources/servez-response.png">
</div>

<p></p>
<p>다음으로 브라우저에서 <a href="http://localhost:8080/"><code class="notranslate" translate="no">http://localhost:8080/</code></a>로
접속하세요. 경로를 지정하지 않으면 현재 경로를 서버의 ROOT 경로로 사용합니다.</p>
<p>만약 Servez가 마음에 들지 않는다면, <a href="https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-servez-or-simplehttpserver">다른 간단한 웹 서버</a>를 사용해도 좋습니다.</p>
<p>이제 개발 환경을 갖추었으니, <a href="textures.html">텍스처</a>에 대해 알아봅시다.</p>

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


</body></html>