You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
6.4 KiB
149 lines
6.4 KiB
<!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>
|