Tiny Online Tools
Quatre façons de poser un modèle sur une page, toutes complètes
Intégrer un modèle 3D fait partie de ces tâches où le code d'exemple est toujours presque juste. L'extrait de code de la documentation oublie le gestionnaire de redimensionnement. L'article de blog omet controls.update(), si bien que l'amortissement ne fait silencieusement rien. L'exemple React saute la limite Suspense et plante au premier rendu. Ce générateur produit l'ensemble, avec les réglages que vous avez réellement choisis déjà intégrés.
<model-viewer>
Le composant web de Google est le chemin le plus court entre rien et une visionneuse fonctionnelle : une balise <script type="module"> et un élément personnalisé. Il gère tout seul les contrôles de caméra, la rotation automatique, la RA sur Android comme sur iOS, l'éclairage basé sur image et une image d'affiche. Si vous voulez un modèle sur une page marketing cet après-midi, prenez celui-ci.
La balise générée inclut touch-action="pan-y", facile à oublier et qui fait toute la différence entre une visionneuse qui paraît native sur téléphone et une autre qui se bat avec le défilement de la page.
Three.js
Pour une scène que vous maîtrisez. L'extrait de code importe depuis three/addons/* — un véritable export de sous-chemin du paquet three, donc compatible avec n'importe quel bundler —, configure le moteur de rendu avec le tone mapping ACES et votre exposition, construit un environnement de studio neutre via PMREMGenerator et RoomEnvironment, ajoute OrbitControls avec amortissement, charge le modèle via GLTFLoader, gère le redimensionnement et tourne sur renderer.setAnimationLoop() plutôt que sur un requestAnimationFrame nu, afin que la même boucle continue de fonctionner si la page passe plus tard en WebXR.
React Three Fiber
La version React : @react-three/fiber pour le canvas, @react-three/drei pour useGLTF, OrbitControls, Environment et ContactShadows. useGLTF.preload() est appelé en dehors du composant pour que le téléchargement démarre avant le rendu de React, et le modèle se place dans une limite Suspense avec un vrai repli de progression alimenté par useProgress.
Page HTML autonome
Un index.html complet : doctype, meta viewport, styles, script CDN, visionneuse. Enregistrez-le, envoyez-le sur n'importe quel hébergement statique, terminé. Ce n'est pas la même chose que le premier extrait de code : celui-ci est un fragment destiné à une page existante, celui-là est un fichier entier.
Distance de caméra
Deviner la distance de caméra est la partie la plus pénible de l'intégration d'un modèle, car elle dépend de l'échelle réelle du modèle. Chargez votre fichier localement et l'outil mesure sa sphère englobante puis calcule la distance à laquelle il remplit un frustum de 45° avec une petite marge. Le fichier n'est jamais envoyé et n'apparaît jamais dans le code généré — seul le nombre y figure.