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

외부 파일에서 컨텐츠 불러오기

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

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

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

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

로컬 서버에서 실행

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

유명 코드 에디터 관련 플러그인

몇몇 코드 에디터들은 간단한 서버를 필요할 때 구축할 수 있게 플러그인을 마련해 두고 있습니다.

Visual Studio Code의 [link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] .
Atom의 [link:https://atom.io/packages/atom-live-server Live Server].

Servez

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

Node.js http-server

Node.js에는 간단한 HTTP 서버 패키지가 있습니다. 설치 방법:

npm install http-server -g

실행 (로컬 저장소에서):

http-server . -p 8000

Python 서버

[link:http://python.org/ Python]이 설치되어 있다면, 커맨드라인으로 충분히 실행할 수 있습니다. (작업 디렉토리 내에서):


//Python 2.x
python -m SimpleHTTPServer

//Python 3.x
python -m http.server

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

http://localhost:8000/

Ruby 서버

Ruby가 설치되어 있다면, 아래 코드를 사용하면 같은 결과를 확인할 수 있습니다.


ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"

PHP 서버

PHP도 내장된 웹서버가 있어, php 5.4.0부터 다음과 같이 활용 가능합니다:

php -S localhost:8000

Lighttpd

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

homebrew를 통해 설치합니다. brew install lighttpd
웹서버에서 실행하고자 하는 디렉토리에 lighttpd.conf라는 설정파일을 만듭니다. 예제는 여기([link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration link])에서 확인할 수 있습니다.
설정 파일에서, server.document-root를 서버로 쓰고자 하는 디렉토리로 설정합니다.
다음과 같이 실행합니다. lighttpd -f lighttpd.conf
http://localhost:3000/ 로 들어가면 선택한 디렉토리의 파일들을 보여줄 것입니다.

IIS

마이크로소프트 IIS를 웹서버로 사용한다면, 실행하기에 앞서 .fbx 확장자와 관련된 MIME 타입 설정을 추가해야 합니다.

File name extension: fbx MIME Type: text/plain

기본적으로 IIS는 .fbx, .obj 파일의 다운로드를 막아 놓았습니다. IIS에서 이러한 파일들이 다운로드 될 수 있도록 설정해야 합니다.

다른 간단한 방법으로는 Stack Overflow에서 논의된 내용([link:http://stackoverflow.com/q/12905426/24874 link])을 확인해 보세요.

로컬 환경에서 구동 방법([name])