three.js를 로컬에서 실행하는 방법에 대한 자세한 설명

이 기사에서는 three.js 중국어 문서 학습을 로컬에서 실행하는 방법에 대한 관련 정보를 주로 소개합니다. 이 기사에서는 샘플 코드를 통해 이를 매우 자세하게 소개합니다. 학습이나 작업이 필요한 모든 사람에게 확실한 참고 학습 가치가 있습니다. 따라갈 수 있어요 편집자와 함께 배워봐요, 모두에게 도움이 됐으면 좋겠어요.

절차적 지오메트리만 사용하고 자료를 로드할 필요가 없다면 파일 시스템에서 웹페이지를 직접 로드해야 합니다. 파일 관리자에서 HTML 파일을 두 번 클릭하면 브라우저에서 실행됩니다( 주소 표시줄은 다음과 같습니다: file:///yourFile.html)

외부 파일에서 콘텐츠 로드

외부 파일에서 모듈과 자료를 다운로드하는 경우 브라우저의 동일 출처 정책의 보안 제한으로 인해 보안 예외가 발생하고 로딩이 실패합니다.

두 가지 해결 방법이 있습니다.

브라우저에서 로컬 파일의 보안을 수정합니다. 다음과 같이 웹페이지를 입력할 수 있습니다:

file:///yourFile.html

로컬 웹 서버에서 파일을 실행하면 다음과 같이 웹페이지를 입력할 수 있습니다.

http://localhost/yourFile.html

첫 번째 방법을 사용하는 경우 반드시 동일한 브라우저( 보안 수정 후) 일반적으로 인터넷 서핑을 하면 취약해집니다. 보안을 보장하기 위해 로컬 개발에 대해서만 별도의 브라우저 구성 및 바로가기를 생성할 수 있습니다. 각 방법을 차례로 살펴보겠습니다.

로컬 서버 실행

많은 프로그래밍 언어에는 HTTP 서버가 내장되어 있습니다. Apache 또는 NGINX의 전체 기능은 없지만 three.js 애플리케이션을 테스트하는 데는 충분합니다.

Node.js server

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

npm install http-server -g

실행:

http-server -p 8000

Python server

Python이 설치되어 있는 경우 작업 디렉터리에서 다음 명령줄을 실행하세요.

//Python 2.x
python -m SimpleHTTPServer

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

서비스를 시작하기 위해 현재 디렉토리에서 로컬 호스트의 포트 80으로 이동합니다. 주소 표시줄은 다음과 같습니다:

http://localhost:8000/

PHP 서버

PHP에는 PHP 5.4.0 이상인 웹 서버도 내장되어 있습니다.

php -S localhost:8000

Ruby 서버

이를 설치했다면 다음과 같은 코드를 실행할 수 있습니다:

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

Lighttpd

매우 가벼운 범용 웹 서버입니다. HomeBrew가 설치된 OSX 시스템을 예로 들어보겠습니다. 위의 서버와 달리 lighttpd는 성숙한 서버 제품입니다.

homebrew를 통해 설치

brew install loghttpd

웹 서버를 실행할 곳에 lighttpd.conf라는 구성 파일을 만듭니다. 예:

server.document-root = "/var/www/servers/www.example.org/pages/"

server.port = 3000

mimetype.assign = (
 ".html" => "text/html", 
 ".txt" => "text/plain",
 ".jpg" => "image/jpeg",
 ".png" => "image/png" 
)

구성 파일에서 server.document-root를 제공해야 하는 디렉터리로 변경합니다.

활성화:

lighttpd -f lighttpd.conf

선택한 디렉터리에서 정적 파일을 제공하려면 http://localhost:3000/을 입력하세요.

로컬 파일에 대한 보안 정책 변경

Safari

기본 설정 패널을 사용하여 개발자 옵션: 고급-> "메뉴 표시줄에 개발 메뉴 표시"를 켭니다.

그런 다음 개발 중-> 파일 제한. 편집 및 디버깅을 위해 Safari를 사용하는 경우 Safari가 캐싱과 관련하여 항상 이상하게 동작한다는 점에 유의할 가치가 있으므로 동일한 메뉴에서 캐시 비활성화를 클릭하는 것이 현명한 선택입니다.

chrome

먼저 실행 중인 모든 Chrome 인스턴스를 닫고 모두 기억하세요.

Windows에서는 프로세스 관리자를 사용하여 모두 닫혔는지 확인해야 합니다. 또는 시스템 트레이에 크롬 아이콘이 보이면 마우스 오른쪽 버튼 클릭 메뉴를 열고 종료를 클릭하세요. 그러면 모든 인스턴스가 종료됩니다.

그런 다음 명령줄 플래그를 통해 Chrome 프로그램을 시작하세요.

chrome --allow-file-access-from-files

창에서 가장 쉬운 방법은 특수 바로가기 아이콘을 만들고 끝에 위 로고를 추가하는 것입니다. (크롬-> 속성-> 대상 바로가기를 마우스 오른쪽 버튼으로 클릭)

Firefox

주소 표시줄에 about:config

security.fileuri.strict_origin_policy 매개변수 찾기

false로 설정

다른 방법은 간단합니다. 두 방법 모두 스택 오버플로에서도 논의됩니다.

관련 추천:

JS 라이브러리 - Three.js 기본 소개

Three.js로 장면을 만드는 방법

Three.js의 기본 부분 알아보기

위 내용은 three.js를 로컬에서 실행하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!