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 Ich brauche es. Folgen wir dem Herausgeber, um gemeinsam zu lernen. Ich hoffe, es kann allen helfen.

Wenn Sie nur prozedurale Geometrie verwenden und keine Materialien laden müssen, sollte die Webseite direkt aus dem Dateisystem geladen werden. Doppelklicken Sie einfach auf die HTML-Datei im Dateimanager und sie sollte ausgeführt werden Ihr Browser (Adressleiste sieht so aus: file:///yourFile.html)

Laden von Inhalten aus externen Dateien

Wenn Sie Module und Materialien aus externen Dateien herunterladen, aufgrund von Die Sicherheitseinschränkungen der Same-Origin-Richtlinie des Browsers führen zu einer Sicherheitsausnahme und können nicht geladen werden.

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 Verzeichnis Ihrer Wahl 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:

Grundlegende Einführung in Three.js der JS-Bibliothek

So erstellen Sie eine Szene mit Three.js

Erlernen der Grundlagen von 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!