Bienvenue sur Pinou GLB Viewer ! 🎉 Ce visualiseur de fichiers GLB est votre nouvel outil incontournable pour intégrer facilement des modèles 3D dans vos sites web. Il est conçu pour être simple, rapide et personnalisable sans nécessiter de connaissances techniques avancées. 🚀

🎨 Fonctionnalités

• Intégration Facile : Ajoutez des éléments 3D à vos pages web en quelques étapes simples.

• Personnalisation Illimitée : Configurez l'affichage de votre modèle 3D avec une large gamme de paramètres.

• Open Source : Modifiez et utilisez le code comme vous le souhaitez tant que vous mentionnez l'auteur. Vous êtes libre de l'adapter à vos besoins ! 💡

🛠️ Installation et Configuration

⚠️ Avertissement Important

Notez que Pinou GLB Viewer doit être utilisé sur un serveur réel. Si vous essayez de l'exécuter localement en ouvrant simplement le fichier index.html dans votre navigateur, cela peut ne pas fonctionner correctement. Pour résoudre ce problème sur Windows, vous pouvez installer l'extension Go Live dans Visual Studio Code. Nous vous montrerons comment faire cela dans le tutoriel ci-dessous.

📥 Téléchargement avec Git

1. Cloner le dépôt :

• Ouvrez une ligne de commande ou un terminal.

• Exécutez la commande suivante pour cloner le dépôt :

gh repo clone Pinou007/GLB-Viewer

2. Accéder aux fichiers :

• Naviguez vers le répertoire cloné avec la commande :

cd pinou-glb-viewer

📂 Préparation du Fichier GLB

Placez votre fichier 3D .glb dans le même répertoire que votre page index.html ou la page intégrée. Ce fichier doit être nommé modeles3d.glb.

🎛️ Personnalisation

Une fois le fichier .glb en place, personnalisez l'affichage et les options directement via l'URL en suivant les instructions ci-dessous.

🌍 Structure de l'URL

L'URL se compose de deux parties principales :

1. URL de Base 🏠 : L'adresse de la page HTML où le visualiseur est intégré.

2. Paramètres de Configuration ⚙️ : Ces paramètres suivent le symbole ? dans l'URL et contrôlent divers aspects de l'affichage.

Exemple d'URL

Voici un exemple d'URL avec des paramètres de configuration :

http://votre-domaine.com/index.html?x=0.08&y=3.41&z=7.59&far=10000&fov=72.78&shadowEnabled=true

📝 Descriptions des Paramètres

Voici une liste des principaux paramètres que vous pouvez utiliser dans l'URL :

Position de la Caméra :

• x : Positionne la caméra sur l'axe X pour ajuster la vue horizontalement par rapport au modèle 3D. Exemple : x=1.0

• y : Positionne la caméra sur l'axe Y pour ajuster la hauteur de la caméra par rapport au modèle 3D. Exemple : y=2.0

• z : Positionne la caméra sur l'axe Z pour ajuster la distance de la caméra par rapport au modèle 3D. Exemple : z=3.0

Plan de Clipping :

• far : Détermine la distance maximale à laquelle les objets seront rendus avant d'être "coupés" par le plan de clipping. Exemple : far=10000

• near : Définit la distance minimale à laquelle les objets commencent à être rendus. Exemple : near=0.1

Champ de Vision :

• fov : Spécifie l'angle de champ de vision de la caméra en degrés. Exemple : fov=90

Effets et Graphiques :

• shadowEnabled : Active ou désactive le rendu des ombres projetées par les objets. Exemple : shadowEnabled=true

• shadowType : Détermine le type d'ombre utilisé, comme les ombres douces (PCFSoft). Exemple : shadowType=2

Personnalisation de l'Interface Utilisateur (UI) :

• guiWidth : Contrôle la largeur de l'interface utilisateur graphique (GUI). Exemple : guiWidth=800px

• guiPadding : Définit l'espacement interne de l'interface utilisateur graphique. Exemple : guiPadding=30px

• guiBorderRadius : Ajuste le rayon des coins de l'interface utilisateur graphique. Exemple : guiBorderRadius=30px

• guiFontSize : Contrôle la taille de la police utilisée dans l'interface utilisateur graphique. Exemple : guiFontSize=19px

Effets Visuels :

• filmEnabled : Active ou désactive un effet de grain de film. Exemple : filmEnabled=true

• glitchEnabled : Active ou désactive un effet de distorsion numérique. Exemple : glitchEnabled=true

• displacementEnabled : Active ou désactive l'effet de déplacement qui modifie la géométrie du modèle. Exemple : displacementEnabled=true

• dotScreenEnabled : Active ou désactive un effet de demi-teinte. Exemple : dotScreenEnabled=true

• asciiArtEnabled : Active ou désactive un effet visuel transformant l'affichage en art ASCII. Exemple : asciiArtEnabled=true

• psychedelicEnabled : Active ou désactive un effet psychédélique. Exemple : psychedelicEnabled=true

🛠️ Exemple de Personnalisation

Si vous souhaitez désactiver les ombres et utiliser un champ de vision plus large, vous pouvez configurer votre URL comme suit :

http://votre-domaine.com/index.html?x=0.08&y=3.41&z=7.59&far=10000&fov=90&shadowEnabled=false&guiWidth=800px&guiPadding=30px

Cela configurera l'application avec ces paramètres spécifiques. 🔧

🚀 Tutoriel : Exécution sur Windows et Serveur

📥 Téléchargement et Exécution sur Windows

1. Téléchargez les fichiers :

• Clonez ou téléchargez le dépôt GitHub contenant le fichier index.html et placez-le dans un répertoire dédié sur votre machine.

2. Installez Visual Studio Code (si non déjà installé) :

• Téléchargez Visual Studio Code depuis le site officiel.

• Installez-le en suivant les instructions d'installation.

3. Installez l'extension Go Live :

• Ouvrez Visual Studio Code.

• Allez dans l'onglet Extensions (icône d'un carré avec un petit bloc dans la barre latérale gauche).

• Recherchez "Live Server" dans la barre de recherche.

• Cliquez sur "Installer" pour ajouter l'extension à votre environnement.

4. Démarrez le serveur local :

• Ouvrez le répertoire contenant votre fichier index.html dans Visual Studio Code.

• Cliquez sur "Go Live" dans la barre de statut en bas de l'écran.

• Une fenêtre de navigateur s'ouvrira automatiquement, exécutant votre projet sur un serveur local.

🌐 Déploiement sur un Serveur

1. Téléchargez les fichiers sur le serveur :

• Transférez vos fichiers de projet (y compris index.html et modeles3d.glb) sur votre serveur via FTP, Git ou une interface d'administration web.

2. Configurez les paramètres :

• Ajustez les paramètres de votre serveur si nécessaire pour servir correctement les fichiers .glb, surtout si vous utilisez un serveur HTTP.

3. Testez l'accès :

• Accédez à votre site via le domaine ou l'adresse IP fournie par votre service d'hébergement et assurez-vous que tout fonctionne comme prévu.

🤝 Contribution

Ce projet a été développé par un jeune développeur passionné. N'hésitez pas à modifier et utiliser ce projet pour vos propres besoins. Cependant, veuillez mentionner l'auteur original si vous redistribuez ou utilisez ce code dans un autre projet. 🛠️💻

Merci d'utiliser Pinou GLB Viewer. Si vous avez des suggestions, des bugs à signaler, ou des améliorations à proposer, n'hésitez pas à ouvrir un problème ou une demande de tirage sur GitHub ! 🚀