javascript
/
three.js
kopia lustrzana https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149
							<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8">
    <base href="../../../" />
    <script src="page.js"></script>
    <link type="text/css" rel="stylesheet" href="page.css" />
</head>

<body>
    <h1>로컬 환경에서 구동 방법([name])</h1>
    <p>
        만약 procedural geometries 만을 사용하고 다른 텍스쳐를 불러오지 않았다면, 웹페이지는 파일 매니저에서 HTML파일을 더블클릭하는 즉시 작업을 시작할 것이고,
        브라우저에서 바로 작업되는 화면이 나타날 것입니다. (주소창에 <em>file:///yourFile.html</em> 를 치면 확인이 될 것입니다.).
    </p>

    <h2>외부 파일에서 컨텐츠 불러오기</h2>
    <div>
        <p>
            외부 파일에서 모델이나 텍스쳐를 불러올 경우, 브라우저의' [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
            보안 제한때문에 파일 불러오기가 실패가 될 것입니다.
        </p>

        <p>이 문제의 해결법은 두 가지가 있습니다.</p>

        <ol>
            <li>
                브라우저에서 로컬 파일의 보안설정을 변경합니다. 이를 통해<code>file:///yourFile.html</code>로 들어가 확인할 수 있을 것입니다.
            </li>
            <li>
                파일을 로컬 웹 서버에서 돌리는 방법입니다. <code>http://localhost/yourFile.html</code>로 들어가 확인할 수 있을 것입니다.
            </li>
        </ol>

        <p>
            1번 방법을 쓸 때, 일반 웹서핑을 같은 방식으로 쓰게되면 보안적으로 취약해지는 점을 인지해야 합니다. 안전한 개발을 위해
            각각의 브라우저 프로필, 바로가기를 만드는 것도 좋습니다. 차례대로 방법을 알아봅시다.
        </p>
    </div>


    <h2>로컬 서버에서 실행</h2>
    <div>
        <p>
            많은 프로그래밍 언어는 기본적으로 간단한 HTTP 서버가 설치되어 있습니다. [link:https://www.apache.org/ Apache]나 [link:https://nginx.org NGINX]같은 프로덕션용 정도로 갖추어져 있지는 않지만, three.js를 테스트해보기에는 충분합니다.
        </p>

        <h3>유명 코드 에디터 관련 플러그인</h3>
        <div>
            <p>몇몇 코드 에디터들은 간단한 서버를 필요할 때 구축할 수 있게 플러그인을 마련해 두고 있습니다.</p>
            <ul>
                <li>Visual Studio Code의 [link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server]
                    .</li>
                <li>Atom의 [link:https://atom.io/packages/atom-live-server Live Server].</li>
            </ul>
        </div>

        <h3>Servez</h3>
        <div>
            <p>
                [link:https://greggman.github.io/servez Servez]는 GUI 환경의 간단한 서버입니다.
            </p>
        </div>

        <h3>Node.js http-server</h3>
        <div>
            <p>Node.js에는 간단한 HTTP 서버 패키지가 있습니다. 설치 방법:</p>
            <code>npm install http-server -g</code>

            <p>실행 (로컬 저장소에서):</p>
            <code>http-server . -p 8000</code>
        </div>

        <h3>Python 서버</h3>
        <div>
            <p>
                [link:http://python.org/ Python]이 설치되어 있다면, 커맨드라인으로 충분히 실행할 수 있습니다. (작업 디렉토리 내에서):
            </p>
            <code>
//Python 2.x
python -m SimpleHTTPServer

//Python 3.x
python -m http.server
				</code>

            <p>이 코드는 현재 디렉토리의 파일들을 localhost 8000번 포트로 내보내 줄 것입니다. 주소 예시는 다음과 같습니다.
                </p>

            <code>http://localhost:8000/</code>
        </div>

        <h3>Ruby 서버</h3>
        <div>
            <p>Ruby가 설치되어 있다면, 아래 코드를 사용하면 같은 결과를 확인할 수 있습니다.</p>
            <code>
ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
				</code>
        </div>

        <h3>PHP 서버</h3>
        <div>
            <p>PHP도 내장된 웹서버가 있어, php 5.4.0부터 다음과 같이 활용 가능합니다:</p>
            <code>php -S localhost:8000</code>
        </div>

        <h3>Lighttpd</h3>
        <div>
            <p>
                Lighttpd는 일반적인 목적의 아주 가벼운 웹서버입니다. 여기서에는 Homebrew를 통해 OSX에 설치하는 예를 소개해 보겠습니다.
                다른 서버들과는 달리, lighttpd 프로덕션 서버로 사용될 모든 것이 갖추어져 있습니다.
            </p>

            <ol>
                <li>
                    homebrew를 통해 설치합니다.
                    <code>brew install lighttpd</code>
                </li>
                <li>
                    웹서버에서 실행하고자 하는 디렉토리에 lighttpd.conf라는 설정파일을 만듭니다.
                    예제는 여기([link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration link])에서 확인할 수 있습니다.
                </li>
                <li>
                    설정 파일에서, server.document-root를 서버로 쓰고자 하는 디렉토리로 설정합니다.
                </li>
                <li>
                    다음과 같이 실행합니다.
                    <code>lighttpd -f lighttpd.conf</code>
                </li>
                <li>
                    http://localhost:3000/ 로 들어가면 선택한 디렉토리의 파일들을 보여줄 것입니다.
                </li>
            </ol>
        </div>
        <h3>IIS</h3>
        <div>
            <p>마이크로소프트 IIS를 웹서버로 사용한다면, 실행하기에 앞서 .fbx 확장자와 관련된 MIME 타입 설정을 추가해야 합니다.</p>
            <code>File name extension: fbx        MIME Type: text/plain</code>
            <p>기본적으로 IIS는 .fbx, .obj 파일의 다운로드를 막아 놓았습니다. IIS에서 이러한 파일들이 다운로드 될 수 있도록 설정해야 합니다.</p>
        </div>
        <p>
            다른 간단한 방법으로는 Stack Overflow에서 논의된 내용([link:http://stackoverflow.com/q/12905426/24874 link])을 확인해 보세요.
        </p>
    </div>

</body>

</html>