Explication détaillée de la façon d'exécuter three.js localement

Cet article vous présente principalement les informations pertinentes sur la façon d'exécuter l'apprentissage du document chinois three.js localement. L'article le présente en détail à travers l'exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de chacun. j'en ai besoin Suivons l'éditeur pour apprendre ensemble, j'espère que cela pourra aider tout le monde.

Si vous utilisez simplement la géométrie procédurale et n'avez pas besoin de charger de matériel, la page Web doit être chargée directement à partir du système de fichiers. Double-cliquez simplement sur le fichier HTML dans le gestionnaire de fichiers et il devrait s'exécuter. votre navigateur (la barre d'adresse ressemble à ceci : file:///yourFile.html)

Chargement de contenu à partir de fichiers externes

Si vous téléchargez des modules et du matériel à partir de fichiers externes, en raison de la politique de même origine du navigateur. Les restrictions de sécurité provoqueront une exception de sécurité et ne pourront pas se charger.

Il existe deux solutions :

Modifier la sécurité des fichiers locaux dans le navigateur. Vous pouvez accéder à la page Web comme ceci :

file:///yourFile.html

Pour exécuter le fichier à partir du serveur Web local, vous pouvez accéder à la page Web comme ceci :

http://localhost/yourFile.html

Si vous utilisez la première méthode, sachez que vous serez vulnérable si vous utilisez le même navigateur (après modification de la sécurité) pour une navigation Internet normale. Vous pouvez créer une configuration de navigateur distincte et des raccourcis pour le développement local uniquement afin de garantir la sécurité. Examinons chaque méthode tour à tour.

Exécutez un serveur local

De nombreux langages de programmation ont des serveurs HTTP intégrés. Ils ne disposent pas de toutes les fonctionnalités d'Apache ou de NGINX, mais sont suffisants pour tester les applications three.js.

Le serveur Node.js

dispose d'un package d'installation de serveur HTTP simple, installez :

npm install http-server -g

Exécutez :

http-server -p 8000

Python serveur

Si vous avez installé Python, exécutez la ligne de commande suivante dans votre répertoire de travail :

//Python 2.x
python -m SimpleHTTPServer

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

Il ira du répertoire courant vers le port 80 de localhost pour lancer le service. La barre d'adresse ressemble à ceci :

http://localhost:8000/

Serveur PHP

PHP dispose également d'un serveur Web intégré, php 5.4.0 et versions ultérieures :

php -S localhost:8000

Serveur Ruby

Si vous l'avez installé, vous pouvez exécuter le code suivant :

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

Lighttpd

C'est un serveur Web à usage général très léger. Prenons comme exemple un système OSX avec HomeBrew installé. Contrairement aux serveurs ci-dessus, lighttpd est un produit serveur mature.

Installer via homebrew

brew install loghttpd

Créez un fichier de configuration appelé lighttpd.conf où vous souhaitez exécuter le serveur Web. Exemple :

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

Dans le fichier de configuration, remplacez server.document-root par le répertoire que vous devez servir.

Activer :

lighttpd -f lighttpd.conf

Entrez http://localhost:3000/ pour servir les fichiers statiques à partir du répertoire de votre choix.

Modifiez la politique de sécurité des fichiers locaux

Safari

Activez les options du développeur à l'aide du panneau Préférences : Avancé -> menu Le menu de développement ".

apparaît dans la barre puis dans Développer-> désactiver les restrictions de fichiers locaux. Si vous utilisez Safari pour l'édition et le débogage, il convient de noter que Safari se comporte toujours étrangement avec la mise en cache, donc cliquer sur Désactiver le cache dans le même menu est un choix judicieux.

chrome

Fermez d'abord toutes les instances Chrome en cours d'exécution, rappelez-vous tout.

Sous Windows, vous devez utiliser le gestionnaire de processus pour vérifier s'ils sont tous fermés. Ou, si vous voyez l'icône Chrome dans la barre d'état système, ouvrez le menu contextuel et cliquez sur Quitter. Cela devrait arrêter toutes les instances.

Démarrez ensuite le programme Chrome via le drapeau de ligne de commande :

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

Sous Fenêtre, le moyen le plus simple est de créer une icône de raccourci spéciale et d'ajouter le logo ci-dessus à la fin. (Cliquez avec le bouton droit sur le raccourci Chrome-> Propriétés-> Cible)

Firefox

Dans la barre d'adresse, saisissez about:config

pour trouver la sécurité Le paramètre .fileuri.strict_origin_policy

est défini sur false

D'autres méthodes simples sont également abordées dans Stack Overflow.

Recommandations associées :

Introduction de base de la bibliothèque JS à Three.js

Comment créer une scène avec Three.js

Apprendre les bases de Three.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!