Mettre un objet 3D dans une page web [Résolu], Comment faire ?

[LiliG]

Bonjour à tous
Après prise de tête et perte de temps, je viens ici pour ma Quête :
- Voilà, j'ai fait des modèles 3d pour montrer à différentes personnes mais qui n'ont pas forcément de logiciel 3d. Je pensais que comme il y a bien longtemps, de nombreuses solutions existaient pour exporter par ex. en vrml ou QTVR et hop, c'est bon, tout le monde peut le voir dans son navigateur.

Sauf que non, ça ne marche plus

Les solutions que j'ai essayées :
- Sketchfab : mais c'est payant (sauf le 1er fichier), il faut laisser son fichier sur leur site, bof. Je voulais un truc autonome
- Blender : perdu toute une matinée avec Blend4web (l'installer, l'afficher...) sans succès dans Blender 2.8. Je précise que je suis une brêle dans Blender (même si la 2.8 est plus sympa que les précédentes).
- le code python : heu... à part le serpent, je ne connais pas Je peux juste lancer un script, c'est déjà un exploit pour moi.
- Revenue à Blend4web parce que j'ai enfin trouvé qu'il n'était compatible qu'avec Blender 2.7 . Donc téléchargé ce dernier en 2.79. Re-perdu une matinée pour transformer un .obj : soit il m'importe du rien, soit il n'exporte rien, soit il exporte le mesh sans les textures. La page .html est vide. Me suis re-tapée une recherche sans trouver de solution à ce comportement instable
- essayé d'autres formats depuis Modo : .stl , fbx, vrml2 etc... : nada dans Safari ou Firefox, il faut en plus un plugin je suppose.

Ce que j'utilise mais je n'ai pas trouvé comment convertir mes fichiers ou les exporter : Modo 801 (ou antérieures) ; ZBrush 2019 (ou antérieures), Vue infinite 2015 (mais bof côté exports). J'ai en stock d'autres logiciels (Substance mais pas trouvé le temps d'y mettre le nez), et de vieux trucs qui ne fonctionneront pas sous Mac OS X 14.6 (ou Catalina sur DD externe). C'est d'autant plus rageant que preview dans Mac me montre l'objet 3d (sans les textures, mais il doit y avoir quelque chose pour ça dans l'OSX, comme pour iBooks Author, d'ailleurs qui importe surtout d'autres formats comme des .dae, de mémoire)

Bref, avez vous des pistes ? Une version Unity (mais il faut le lecteur)?
Je précise que ce n'est pas urgent, quelqu'un m'a fait la conversion sur PC du .obj => .html avec textures, grâce à ...Blend4web (argh ! ^^) mais c'est pour de futurs projets.
Merci d'avance

[Pixel44]

Acrobat sait afficher des objets 3D (je crois)

[Becco]

Bonsoir,

Exact, et même Acrobat Reader (gratuit) permet de visualiser des objets 3D (au format PDF 3D, bien sûr).

https://helpx.adobe.com/be_fr/acrobat/using...odels-pdfs.html

[magicPDF]

Le rendu 3D sur le web est toujours aléatoire et jamais universel.L'avantage des PDF-3D c'est que le rendu n'est pas aléatoire et que c'est presque universel puisqu'il suffit d'utiliser le logiciel gratuit Acrobat Reader (ou un concurrent pas bas de gamme) pour les visualiser (avec un luxe d'options pour le rendu).
L'importation se fait avec Acrobat Pro via les formats U3D édition 3 ou PRC.Voir : https://helpx.adobe.com/fr/acrobat/using/ad...dfs_acrobat_pro

[jumera]

GeoGebra (Classique) est un logiciel de Mathématiques qui possède la 3D
Tu peux créer les objets 3D que tu veux avec l'application, puis téléverser ton fichier sur le site de GeoGebra
et récupérer l'iframe de ton fichier pour le mettre dans une page web

Exemple pris au hasard (ce n'est pas de moi...)
Bouge les curseurs pour changer la forme, clic droit pour tourner la vue 3D

<iframe scrolling="no" title="Breather" src="https://www.geogebra.org/material/iframe/id/HnQVxc2s/width/1159/height/727/border/888888/sfsb/true/smb/false/stb/false/stbh/false/ai/false/asb/false/sri/true/rc/false/ld/false/sdz/true/ctl/false" width="1159px" height="727px" style="border:0px;"> </iframe>

Edit : Arrgggg Le forum n'accepte pas les iframe
(tu peux copier cet iframe sur ton site... pour voir...)

Ce message a été modifié par jumera - 14 Nov 2019, 20:45.

[LiliG]

Bonjour et merci de vos réponses.

En effet, le .pdf3d est une option à laquelle je n'avais pas pensé. Un ami architecte m'avait d'ailleurs envoyé un fichier de ce type il y a longtemps, mais il utilise un soft qui fait l'export dans ce format et que je n'ai pas (Autocad ? Je ne sais plus, je vais lui demander).

Hélas, ça ne résout pas mon problème :

- je n'ai pas Acrobat pro (juste le reader)
- je n'ai pas de site web !
- je recherche une solution à partir des logiciels que j'ai déjà. Geogebra : je crois qu'on a sur les PC du boulot, mais je ne connais pas et ne souhaite pas créer dedans ! Juste convertir des fichiers. Ça me semble surtout une solution dédiée "maths" (même si la 3D, c'en est !) Je vais quand même jeter un oeil sur les imports/exports qu'il fait, mais les modèles que je fais sont plutôt des scènes ou objets complexes types organiques.
- éventuellement du gratuit ou plugin, je ne souhaite pas apprendre à modeler ailleurs que dans ce que j'utilise pour l'instant (pas le temps!). Au pire : un soft qui serait juste utilisé pour l'import/export 3D mais autonome, je ne veux rien laisser sur le cloud ou sur un site quelconque. Avec aussi des risques : passer un même fichier 3d à la moulinette de plusieurs softs via des changements de format peut donner des résultats très bizarres au final, comme bousiller une géométrie "propre" ou décaler des textures !

- à partir de Modo : il existe un plugin que je vais tester : ModoPDF exporter, de SimLab. Hélas là encore, c'est payant. A la limite, j'aurais pu acquérir mais ils sont passés au système d'abonnement donc : non ! D'autant que ce serait pour des utilisations très ponctuelles.


Du coup, je profite de cette page pour continuer d'explorer et vous mettrai les résultats, si ça peut en aider d'autres, quand j'aurai des moments pour les tester.

Voici mes pistes actuelles :

Testé=> abandonné : pas réussi à obtenir quelque chose

- photoshop CS5 extended : exporte des .pdf en 2d ; l'affichage des imports .obj est moche pour certains UV qui bavent sur des objets adjacents. Pas d'export en pdf3d. Ilf faut dire que j'utilise pour les textures, jamais utilisé sur les mesh à part une fois ou deux, au début de l'achat.
- Blend4web : voir au-dessus, je garde quand même sous le coude si màj pour la dernière version de Blender (ou si j'ai une matinée à perdre, encore dans 2.79 )

A tester :

- Meshlab : il faut trianguler, j'ai un peu peur du résultat, surtout avec des textures ayant des UV. A voir

- en cours de test :
Encore une fois, c'est du côté du libre / Blender qu'il y a des solutions intéressantes ; mon problème restant le même : je suis une brèle en code, quelqu'il soit, Python ou HTML.

- TextEdit : hé oui... grâce à X3Dom et le tutoriel très clair trouvé sur YouTube.

Bon, mon premier essai est nul : j'ai toutes les lignes de code dans Safari je vais regarder dès que j'ai un moment où ça bloque. A mon avis, ça doit venir
- soit du copier/coller depuis la conversion en ligne d'InstantLabs : j'ai dû copier une marge ou un truc en trop. Dans text édit j'ai essayé d'enlever le n° des lignes pour que le fichier commence par : <html> mais non...j'ai toujours le code.
- soit du fichier Modo->export->x3d : les textures, par exemple, bien que j'aie fait une duplication du fichier dans un dossier dédié, continuent d'être dans un chemin différent d'après le code (celui d'origine). Il n'empêche que je n'ai même pas le mesh dans les navigateurs.

Je vais ré-essayer avec un modèle 3D simple (donc moins de code, plus "lisible"), et vous tiens au courant des tests si ça vous intéresse, ou au moins de la solution si / dès que c'est résolu ou si vous avez des pistes

Ce message a été modifié par LiliG - 15 Nov 2019, 12:44.

[joe cool]

Gratuit : fusion 360 : https://knowledge.autodesk.com/fr/support/f...360-design.html

Et pour un rendu 3D. Keyshot (payant)
https://www.keyshot.com/web/

Tu veux du embed ou c'est juste pour partager un projet ?

Qu'est ce que tu veux partager ? Pour qui, founisseurs ? Maker, clients ?

Le pdf 3D, j'ai longtemp utilisé, mais c'est vraiment dépassé. Inutilisable sur de gros projets.

Sinon tu peux les heberger sur cluts, ils ont un petit viewer 3D.
ou là : https://3dviewer.net/

Ce message a été modifié par joe cool - 15 Nov 2019, 14:01.

[magicPDF]

- photoshop CS5 extended : exporte des .pdf en 2d … Pas d'export en pdf3d.

PhotoshopCS4, CS5 et CS6* exportent en PRC. Ensuite il faut utiliser Acrobat Pro pour intégrer le PRC dans un PDF.


*Cette fonction a été supprimée dans la dernière mise à jour de CS6.

[LiliG]

Gratuit : fusion 360 : https://knowledge.autodesk.com/fr/support/f...360-design.html

Et pour un rendu 3D. Keyshot (payant)
https://www.keyshot.com/web/

Tu veux du embed ou c'est juste pour partager un projet ?

Qu'est ce que tu veux partager ? Pour qui, founisseurs ? Maker, clients ?

Le pdf 3D, j'ai longtemp utilisé, mais c'est vraiment dépassé. Inutilisable sur de gros projets.

Sinon tu peux les heberger sur cluts, ils ont un petit viewer 3D.
ou là : https://3dviewer.net/

Merci de ta réponse mais (voir plus haut) je veux un fichier en local (sur DD) et non en ligne.
Quand j'échangeais des fichiers 3D avec des pro, il suffisait de fournir le fichier dans le format de logiciel qu'on partageait (par ex. en .obj +.mtl, ou en .vob). Actuellement, c'est plutôt pour aider des étudiants à visualiser des mécanismes . Le fichier qui a débuté ce post était pour des formations géologiques, donc rien à voir avec la 3D pro. C'est pour ça aussi que je ne veux pas de solution payante ! Le résultat qu'on m'a fourni, sur PC, depuis Blender/blend4web était un fichier autonome en .html qui fonctionne parfaitement. Ce que je voudrais, c'est...le faire moi-même

@MagicPDF : en effet, et justement je n'ai pas (et n'utilise pas) la version Pro d'Acrobat.

Ce message a été modifié par LiliG - 15 Nov 2019, 14:39.

[joe cool]

ok :-)

Keyshot sait faire ça.

Il t'exporte un dossier avec les images et un .html qui s'ouvre dans n'importe quel navigateur. (à mettre en ligne, ou pas)

Si c'est juste pour un coup, la version de test peut suffire. Sinon, je ne connais pas d'autres solutions, désolé.

[scoch]

Pour afficher de la 3D dans les navigateurs, tu peux utiliser la bibliothèque three.js (moteur WebGL en JavaScript) qui permet de charger des objets issus de Blender (entre autres).
Il te faudra coder un peu la première fois. Tu trouveras des tutoriels : three.js import blender obj.

[LiliG]

Pour afficher de la 3D dans les navigateurs, tu peux utiliser la bibliothèque three.js (moteur WebGL en JavaScript) qui permet de charger des objets issus de Blender (entre autres).
Il te faudra coder un peu la première fois. Tu trouveras des tutoriels : three.js import blender obj.

Bonsoir
Coder un peu ... comment dire : j'avais déjà regardé mais n'ai aucune idée de ce qu'il faut faire avec le dossier téléchargé. Quant au code : pareil, j'ai même essayé des copier-coller depuis des tutos. En bref : je n'ai rien compris
Pareil pour le dossier hors-ligne utilisant X3Dom. C'est du js et je n'y connais rien. Au moins, le convertisseur en ligne fait le taf Mais rien à faire pour obtenir quelque chose d'autre que la liste de code en ouvrant le fichier .html dans Safari

Au moins, j'ai appris un truc : le copier-coller depuis la page en ligne de X3Dom-> text édit enlève toutes les indentations, repères, couleurs. C'est le souk et pas simple de regarder les codes. Par contre (Merci OSX !), si, au lieu de copier après avoir surligné le texte, on fait clic-droit -> ouvrir dans textEdit (depuis Services), on conserve non seulement les indentations, couleurs, mais dans "enregistrer", html est proposé, alors qu'il ne l'est pas si on crée un simple fichier texte via fichier-> nouveau.

Blend4web fait aussi des exports en .json, mais je ne sais pas quoi en faire.

Sinon, j'ai re-essayé des imports .obj dans Blender depuis Modo. Cette fois ça a fonctionné. J'ai sauvegardé le fichier en .blend pour le réutiliser plus tard. Mais encore une fois, l'export Blend4web en .html ne donne qu'un truc vide dans les navigateurs.

Un export de Blender ->x3D donne un truc visible dans InstantPlayer, mais sans lumière et, on dirait, sans les polygones à l'arrière de l'objet. Pas facile à voir, sans l'éclairage.
Je continue de creuse ce Blend4web / Blender pour voir quels réglages manquent.

Ce message a été modifié par LiliG - 15 Nov 2019, 18:57.

[baron]

Au moins, j'ai appris un truc : […]

[H.S] Ça dépend des préférences de TextEdit : Ouverture et enregistrement > décocher "Lors de l'ouverture d'un fichier, ignorer les commandes de formatage dans les fichiers HTML".

[jumera]

Tes fichiers ont été faits avec quel logiciel..? (quelle extension..?)

[LiliG]

@Baron : je n'ai rien réglé, ayant changé récemment de Mac, suis passée de Lion à Mojave. Là je teste surtout ce qui fonctionne encore ou pas, ce que je dois importer de l'ancien disque dur etc...
@ Jumera : mes fichiers sont ... comme le logiciel peut les exporter. Depuis Modo (.lxo), j'ai essayé le plus courant pour garder les textures : .obj ; sinon, essayé ce qui pouvait être compatible web avant : .stl , fbx, vrml2 puis, comme mis plus haut, importé dans Blender (depuis .obj ou .x3d) où j'ai essayé l'export avec Blend4web en .html ou .json : html => page vide ou code ; .json : je ne sais pas l'ouvrir, n'ayant pas de site web.

Le reste : moulinage en ligne, modifs dans textEdit, décrit + haut, pour essayer d'en faire de l'html.

[scoch]

Mais encore une fois, l'export Blend4web en .html ne donne qu'un truc vide dans les navigateurs.

Peut-être est-ce dû aux restrictions d’accès aux fichiers locaux. Dans le cas de three.js, il faut afficher les pages depuis un serveur (distant ou local => voir installation de mamp si tu le souhaites) ou désactiver cette restriction depuis les options du navigateur. Dans Safari, il faut d’abord activer le menu Développement puis de là Désactiver les restrictions de fichier local.

[LiliG]

Bonjour
Merci de ta réponse ; je n'avais pas activé le menu développement sur ce Mac. Mais ça m'a donné des pistes : le problème vient bien du fichier et son export, entre autres, des textures. Curieusement, elles s'affichent bien dans Blender, mais ne sont plus attribuées à l'export. Ce qui est curieux c'est que l'objet 3D lui même n'apparaît pas (mesh) même sans matière. Elles sont pourtant simples, sans effet particulier, sauf un calque sur une des faces, c'est peut-être lui qui pose pb, je vais essayer d'exporter sans. Il y a aussi un truc que j'avais repéré dans textEdit, lié à ce calque : le fichier en .tga garde son adresse initiale dans un ancien dossier, alors que j'avais enregistré sous un autre dossier une copie du fichier 3d, ailleurs, avec une copie du .tga dedans, pour être sûre que tout soit dans le même dossier.

J'ai eu ces messages via l'inspecteur / débogueur :

B4W WARN: OS X / Safari detected, force to wait complete loading. Applying playback rate hack for video textures. Applying canvas alpha hack.
B4W WARN: OS X detected, applying shadows hack
B4W WARN: material "rouge" is not assigned to any face (object "forces") (idem pour toutes les autres textures)
(...)
B4W ERROR: image "diffColor_1.tga.003" has unsupported format or broken path.

Il faut que je ré-essaie avec un modèle complètement refait à 0 sur l'iMac. Dans le fichier qu'on m'a converti obj -> Blend4web sur PC, à partir d'un autre modèle plus simple, fait à l'arrache pour test, il n'y a pas ces messages (sur le MBair, Safari 9.1.3 sous Maverick)

[Ducace]

1. Comme le souligne Scoch, je te suggère d'installer un serveur en local: Mamp, gratuit.

C'est pratiquement indispensable pour travailler efficacement pour le web.
Perso, je crée différents dossiers dans le fameux "htdocs" que je peux ouvrir dans n'importe quel navigateur par l'adresse localhost:8888/etc.
2. Pour traiter/lire le code, je préfère travailler avec Textwrangler (gratuit) ou même Dreamweaver (payant).
Chacun ses préférences.
3. Blender est vraiment très puissant et permet de faire des projets très évolués. Le hic, c'est l'apprentissage. Comme c'est du participatif pour les plugins, on doit se référer constamment au web pour les tutos. Le mode d'emploi et les bouquins que j'ai consultés ne sont vraiment pas didactiques.
Mais il faut juste se dire "dans Blender, rien d'impossible".

[LiliG]

Bonsoir
Oui mais non ... : je rappelle que c'est de l'occasionnel, que je ne code pas et ne sais pas faire un site web (ah si, avec le défunt iWeb : mais c'était le Apple d'avant, où tout le monde pouvait créer sans être pro).

Dreamweaver j'ai utilisé il y a bien longtemps (craqué, dois-je dire maintenant y'a prescription, c'était sur PPC ^^) mais un ami m'avait dit que le code généré était tout pourri (en .html, lui fait du .php). Je confirme : on a dû faire migrer à la main d'anciens fichiers .html / Dreamweaver => .php dans SPIP et on en a bavé pour enlever toute une tripotée de balises. Mais, une fois encore, c'était il y a longtemps et j'ai tt laissé tomber maintenant que je ne travaille plus ds ce secteur. En plus, j'étais petite main, me contentant de faire du contenu. Le Maître nous faisait des pages modèles, et nous avait donné une liste de signes à utiliser (un peu comme ici sur MB si on veut faire des listes, mettre en gras...sans passer par les boutons : on n'avait pas au début, il voulait nous apprendre à faire - il a craqué devant nos têtes).

Ma piste pour la 3D : j'ai encore donné un fichier, plus complexe, à mon étudiant qui l'a encore une fois converti facilement, tout comme sur les tutos que j'ai suivis, avec Blend4web. Même version de Blender, même plugin que ceux que j'ai téléchargés, mais sur PC : AAAAaargh!

Je suis têtue, je vais ré-essayer de ré-installer Blender + Blend4web mais version lourde / développeur. Peut-être qu'il y a eu un pb avec la version Mac que j'ai. Ce qui m'énerve, c'est que rien que pour importer un fichier .obj ds Blender, j'ai galèré : il fallait décocher un truc (dégrouper je crois de mémoire) et en cocher un autre. Maintenant il importe mes fichiers, mais pas toujours ...

Ce message a été modifié par LiliG - 21 Nov 2019, 20:06.

[scoch]

Je suis têtue, je vais ré-essayer de ré-installer Blender + Blend4web mais version lourde / développeur. Peut-être qu'il y a eu un pb avec la version Mac que j'ai. Ce qui m'énerve, c'est que rien que pour importer un fichier .obj ds Blender, j'ai galèré : il fallait décocher un truc (dégrouper je crois de mémoire) et en cocher un autre. Maintenant il importe mes fichiers, mais pas toujours ...

Si les fichiers d’export html que te fournit ton étudiant fonctionnent sur tes Mac, oui, tu as problablement un problème de configuration de Blender ou Blend4Web.

Tu penses installer une version développeur ? Sur le site de Blend4Web il est recommandé d’utiliser une version stable de Blender, de se référer à cette page.

Et normalement, tu ne devrais pas à avoir à utiliser un éditeur de code
À ce sujet, je te recommande Sublime Text que tu pourrais utiliser gratuitement et qui t’apporterait du confort : coloration syntaxique et surtout autocomplétion.

Ce message a été modifié par scoch - 22 Nov 2019, 00:22.

[LiliG]

Merci pour le lien, c'est vrai que Blender est puissant et j'attends parce que la nouvelle interface est plus attractive. Modo + Vue + ZBrush me satisfont tout à fait sinon, j'en ai même mis de côté mes vieux autres modeleurs (amapi/Hexagon/Carrara)

Hors-sujet mais à propos de ZBrush : je viens juste de recevoir un mail de Pixologic pour la mise à jour ZBrush 2020 : sont fous, chez Pixo ! A chaque fois, j'ai la mâchoire qui tombe devant les nouveautés et refontes des fonctions. Et tout ça gratis, sans abonnement, depuis la version 2.0 !

Et comme il y a l'export VRML, je vais aussi voir si un simple lecteur ne peut pas faire l'affaire, si j'échoue encore avec Blender.

[LiliG]

Up !
Cette fois, ayant un petit moment, j'ai ré-installé Blend4web + Blender 2.79b et là...Youkaïdi ! L'objet 3D exporté en .html s'affiche dans les navigateurs Safari et Firefox

Bon, ça m...douille encore côté textures, elles s'affichent très bien dans Blender, pas encore à l'export : tout est gris, pour l'import, il faut cocher "garder les polygroups" ; rien à signaler pour les éclairages, c'est OK.
D'après ce que j'ai vu sur le web, c'est un problème de réglages, soit de textures à refaire dans Blender, soit à l'export dans Blend4web, soit de localisation de fichiers source. En tous cas, c'était bien un problème d'installation, venant de la version de Blender 2.79b au lieu de 2.79, ou un fichier corrompu au téléchargement.

On progresse ...

Edit : ça y est, les textures s'affichent, c'était un alpha sur des matières qui mettait le souk. Par contre, je ne peux plus éditer le titre de ce message avec [résolu], le délai pour le faire semble dépassé.

Ce message a été modifié par LiliG - 18 Dec 2019, 09:07.

[Cri-cri]

Par contre, je ne peux plus éditer le titre de ce message avec [résolu], le délai pour le faire semble dépassé.

Je l'ai fait pour toi. Content que ton problème soit résolu

[LiliG]

Merci !

[siliconengineers]

The web's 3D rendering is always unpredictable, and never uniform. The benefit of PDF-3D is that the rendering is not arbitrary and is almost consistent since it is necessary to use the free Acrobat Reader program (or a non-low-end competitor) to display them

[baron]

Bonjour,

Nous souhaitons que les posts dans les forums macbidouille soient rédigés en français lisible. Cela permet de :
- mieux gérer les recherches dans les forums
- mieux se faire comprendre par tous les membres et donc d'obtenir de l'aide plus rapidement

Nous vous demandons en outre de bien vouloir lire la charte qui régit ces forums si cela n'est pas déjà fait. Elle est accessible ici.

(ce message est un message automatique de la team des modérateurs)