Configuration d'un serveur HTTP local pour WebGL
Pour éviter les erreurs CORS lors du chargement de textures en WebGL, vous devez servir vos fichiers via un serveur HTTP local. Voici trois méthodes simples pour le faire.
Méthode 1: Utiliser Live Preview dans VS Code
Prérequis : VS Code doit être installé sur votre système. Cette méthode est la plus simple si vous utilisez déjà VS Code comme éditeur.
- Installez l'extension Live Preview depuis le marketplace VS Code :
- Ouvrez VS Code
- Appuyez sur
Ctrl+P (ou Cmd+P sur Mac)
- Tapez :
ext install ms-vscode.live-server
- Ou recherchez "Live Preview" dans l'onglet Extensions
- Ouvrez votre fichier HTML dans VS Code
- Cliquez sur le bouton "Show Preview" dans le coin supérieur droit de l'éditeur, ou faites un clic droit sur le fichier HTML et sélectionnez "Show Preview"
- Le serveur démarre automatiquement et votre page s'ouvre dans un navigateur intégré ou externe
Avantages : Rafraîchissement automatique lors des modifications, prévisualisation intégrée dans VS Code, pas besoin de ligne de commande. Le serveur se lance automatiquement sur un port disponible (généralement 3000 ou 3001).
Méthode 2: Utiliser Python
Prérequis : Python doit être installé sur votre système. Pour vérifier, ouvrez un terminal et tapez python --version
- Ouvrez votre terminal
- Naviguez vers le dossier de votre projet avec la commande
cd :
cd chemin/vers/votre/projet
- Lancez le serveur avec l'une des commandes suivantes :
# Pour Python 3
python -m http.server 8000
# Pour Python 2
python -m SimpleHTTPServer 8000
- Ouvrez votre navigateur et accédez à l'URL indiquée dans le terminal : (exemple)
http://localhost:8000
Méthode 3: Utiliser Node.js et npx
Prérequis : Node.js doit être installé sur votre système. Pour vérifier, ouvrez un terminal et tapez node --version
- Ouvrez votre terminal
- Naviguez vers le dossier de votre projet avec la commande
cd :
cd chemin/vers/votre/projet
- Lancez le serveur avec npx :
npx http-server
- Ouvrez votre navigateur et accédez à l'URL indiquée dans le terminal : (exemple)
http://localhost:8080
Note importante : Pour arrêter le serveur, faites Ctrl+C dans le terminal.
Résolution des problèmes courants
- Port déjà utilisé : Si le port est déjà occupé, essayez un autre port en ajoutant le numéro à la commande (exemple :
python -m http.server 8001 ou npx http-server -p 8081)
- Permissions refusées : Sous Linux/macOS, assurez-vous d'avoir les droits d'exécution dans le dossier
- Commande non trouvée : Vérifiez que Python ou Node.js est correctement installé et ajouté au PATH système