Web-3D

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
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
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>
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.
MS-Dos, Gem, geoworks, Windows 1, 2, 3, 3.1, 95, 98, XP, seven, 8, 10 Smile
Mac system 1 à 6
Wampserver 3.1.9,
PhP 7.3.5,
CMS version 2.2.11
Répondre
#1
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
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>
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.
MS-Dos, Gem, geoworks, Windows 1, 2, 3, 3.1, 95, 98, XP, seven, 8, 10 Smile
Mac system 1 à 6
Wampserver 3.1.9,
PhP 7.3.5,
CMS version 2.2.11
Répondre
#2
Bonjour,

merci pour ton partage ! C'est intéressant Smile Le tout étant d'arriver à modéliser des produits ou objets à faire consulter sur le site.

Pour poursuivre sur le sujet, j'expérimente depuis quelques temps les contenus VR / AR avec Aframe et AR.js. De belles perspectives pour les années à venir !

Les sites :
https://aframe.io/
https://github.com/jeromeetienne/AR.js/

Au plaisir d'échanger là-dessus !
Répondre
#2
Bonjour,

merci pour ton partage ! C'est intéressant Smile Le tout étant d'arriver à modéliser des produits ou objets à faire consulter sur le site.

Pour poursuivre sur le sujet, j'expérimente depuis quelques temps les contenus VR / AR avec Aframe et AR.js. De belles perspectives pour les années à venir !

Les sites :
https://aframe.io/
https://github.com/jeromeetienne/AR.js/

Au plaisir d'échanger là-dessus !
Répondre
#3
Depuis la version 2.8, Blender peut exporter les fichiers GLB.

Eric
EricFreelance - Design, intégration et développement de sites internet.
Répondre
#3
Depuis la version 2.8, Blender peut exporter les fichiers GLB.

Eric
EricFreelance - Design, intégration et développement de sites internet.
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)