Ausführliche Erklärung, wie man three.js lokal ausführt

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zum lokalen Ausführen des Three.js-Dokuments ein. Der Artikel stellt es im Detail anhand des Beispielcodes vor Brauchen Sie es? Lassen Sie uns gemeinsam mit dem Herausgeber unten lernen.

Laden von Inhalten aus externen Dateien

Wenn Sie Module und Materialien aus externen Dateien herunterladen, wird aufgrund der Sicherheitsbeschränkungen der Same Origin Policy des Browsers eine Sicherheitsausnahme ausgelöst und die Das Laden schlägt fehl.

Es gibt zwei Lösungen:

Ändern Sie die Sicherheit lokaler Dateien im Browser. Sie können die Webseite wie folgt aufrufen:

file:///yourFile.html

Um die Datei vom lokalen Webserver auszuführen, können Sie die Webseite wie folgt aufrufen:

http://localhost/yourFile.html

Wenn Sie die erste Methode verwenden, beachten Sie, dass Sie anfällig sind, wenn Sie denselben Browser (nach Änderung der Sicherheit) für das normale Surfen im Internet verwenden. Sie können zur Gewährleistung der Sicherheit eine separate Browserkonfiguration und Verknüpfungen nur für die lokale Entwicklung erstellen. Schauen wir uns die einzelnen Methoden der Reihe nach an.

Führen Sie einen lokalen Server aus

Viele Programmiersprachen verfügen über integrierte HTTP-Server. Sie verfügen nicht über die volle Funktionalität von Apache oder NGINX, reichen aber zum Testen von three.js-Anwendungen aus.

Node.js-Server

verfügt über ein einfaches HTTP-Server-Installationspaket, installieren Sie:

npm install http-server -g

Ausführen:

http-server -p 8000

Python server

Wenn Sie Python installiert haben, führen Sie die folgende Befehlszeile in Ihrem Arbeitsverzeichnis aus:

//Python 2.x
python -m SimpleHTTPServer

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

Es wird vom aktuellen Verzeichnis zu Port 80 von localhost gehen, um das zu initiieren Die Adressleiste sieht folgendermaßen aus:

http://localhost:8000/

PHP-Server

PHP verfügt auch über einen integrierten Webserver, PHP 5.4.0 und höher:

php -S localhost:8000

Ruby-Server

Wenn Sie dies installiert haben, können Sie den folgenden Code ausführen:

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

Lighttpd

Das ist es ein sehr leichter Allzweck-Webserver. Nehmen wir als Beispiel ein OSX-System mit installiertem HomeBrew. Im Gegensatz zu den oben genannten Servern ist lighttpd ein ausgereiftes Serverprodukt.

Über Homebrew installieren

brew install loghttpd

Erstellen Sie eine Konfigurationsdatei namens lighttpd.conf, in der Sie den Webserver ausführen möchten. Beispiel:

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" 
)

Ändern Sie in der Konfigurationsdatei server.document-root in das Verzeichnis, das Sie bereitstellen müssen.

Aktivieren:

lighttpd -f lighttpd.conf

Geben Sie http://localhost:3000/ ein, um statische Dateien aus dem von Ihnen gewählten Verzeichnis bereitzustellen.

Ändern Sie die Sicherheitsrichtlinie für lokale Dateien

Safari

Aktivieren Sie Entwickleroptionen über das Einstellungsfenster: Erweitert -> Menü Das Entwicklungsmenü ".

erscheint in der Leiste und dann in Entwickeln-> lokale Dateibeschränkungen deaktivieren. Wenn Sie Safari zum Bearbeiten und Debuggen verwenden, ist zu beachten, dass sich Safari beim Caching immer seltsam verhält. Daher ist es eine kluge Entscheidung, im selben Menü auf „Cache deaktivieren“ zu klicken.

Chrome

Schließen Sie zunächst alle laufenden Chrome-Instanzen und merken Sie sich alles.

Unter Windows müssen Sie mit dem Prozessmanager prüfen, ob alle geschlossen sind. Oder, wenn Sie das Chrome-Symbol in der Taskleiste sehen, öffnen Sie das Rechtsklick-Menü und klicken Sie auf „Beenden“. Dadurch sollten alle Instanzen heruntergefahren werden.

Starten Sie dann das Chrome-Programm über das Kommandozeilen-Flag:

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

Unter Fenster erstellen Sie am einfachsten ein spezielles Verknüpfungssymbol und fügen am Ende das obige Logo hinzu. (Klicken Sie mit der rechten Maustaste auf die Chrome-Verknüpfung-> Eigenschaften-> Ziel)

Firefox

Geben Sie in der Adressleiste about:config

ein um Sicherheit zu finden Der .fileuri.strict_origin_policy-Parameter

ist auf false gesetzt

Andere einfache Methoden werden auch in Stack Overflow besprochen.

Verwandte Empfehlungen:

Three.js-Implementierung der 3D-Kartenbeispielfreigabe

Ein von drei geschriebenes Projektklassenbeispiel. js-Codefreigabe

Beispielerklärung zum Laden eines externen Modells durch Three.js

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man three.js lokal ausführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!