29/02/2020, 19:35:00
Bonjour,
J'ouvre ce sujet car je travaille sur la question depuis quelques temps.
Il s'agit de visualiser des objets en 3D dans une page web.
J'utilise depuis pas mal de temps le site sketchfab pour publier les modèles que je crée puis intégrer les dans mes pages Web. Mais depuis quelques temps ce site a décidé de limiter le nombre de modèles dans la version gratuite. J'avais déjà testé des scripts permettant la visualisation en 3D mais sans grand succès.
three.js utilise WebGL supporté nativement par la plupart des navigateurs actuels. J'ai pas trop accroché au début jusqu'à ce que je découvre model-viewer qui est plus facile à mettre en oeuvre puisqu'il suffit de 3 lignes de code dans une page pour afficher un objet
Les deux premières lignes chargent le script (il est préférable de les mettre en fin de page)
La troisième affiche l'objet. Attention il faut donner l'adresse absolue du fichier
Pour contrôler les dimensions de l'objet il faut mettre width à 100% et choisir la taille de l'objet en agissant sur height.
modele-viewer affiche les objets 3D au format glb et glTF. La plupart des logiciels de modélisation exportent dans ce format sinon vous devrez passer par l'éditeur de three.js pour convertir un fichier d'un autre format.
J'ouvre ce sujet car je travaille sur la question depuis quelques temps.
Il s'agit de visualiser des objets en 3D dans une page web.
J'utilise depuis pas mal de temps le site sketchfab pour publier les modèles que je crée puis intégrer les dans mes pages Web. Mais depuis quelques temps ce site a décidé de limiter le nombre de modèles dans la version gratuite. J'avais déjà testé des scripts permettant la visualisation en 3D mais sans grand succès.
three.js utilise WebGL supporté nativement par la plupart des navigateurs actuels. J'ai pas trop accroché au début jusqu'à ce que je découvre model-viewer qui est plus facile à mettre en oeuvre puisqu'il suffit de 3 lignes de code dans une page pour afficher un objet
Code :
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<model-viewer style="width: 100%; height: 600px;" src="{root_url}/uploads/images/histoire/sortie/images/psilophyton.glb" alt="" auto-rotate camera-controls height='750'></model-viewer>La troisième affiche l'objet. Attention il faut donner l'adresse absolue du fichier
Pour contrôler les dimensions de l'objet il faut mettre width à 100% et choisir la taille de l'objet en agissant sur height.
modele-viewer affiche les objets 3D au format glb et glTF. La plupart des logiciels de modélisation exportent dans ce format sinon vous devrez passer par l'éditeur de three.js pour convertir un fichier d'un autre format.
MS-Dos, Gem, geoworks, Windows 1, 2, 3, 3.1, 95, 98, XP, seven, 8, 10
Mac system 1 à 6
Wampserver 3.1.9,
PhP 7.3.5,
CMS version 2.2.11