Search
TUTORIEL

Publication d'un maillage sur le web avec 3DHop

Niveau technique
3/5
Matériel
1/5

Prérequis

  • Un modèle 3D à publier sur le web
  • Un espace pour héberger le fichier en ligne

Contenu

Comment publier facilement un maillage 3D sur le web sans passer par une plateforme de services 3D comme Sketchfab et sans être limité par la taille du fichier ?

Dans ce tutorial, nous allons présenter une technique très simple afin de mettre en ligne notre maillage 3D avec ou sans texture. Nous utiliserons le “3D Heritage Online Presenter” connu sous le nom de 3DHop. 3DHop est un viewer opensource que l’on peut télécharger sur le site: www.3dhop.net

La première étape consiste à exporter le maillage que l’on veut publier sur le web au format .obj. Au moment de l’exportation, il faut être attentif au fait que l’application 3DHop, qui sera utilisée pour visionner le modèle sur le web, utilise l’axe Y comme axe vertical. Dans Realitycapture, qui utilise l’axe Z comme axe vertical, il faut donc effectuer un rotation de -90° sur l’axe X lors de l’exportation du modèle.

Dans l’application Meshlab, il faut s’assurer que les textures sont associées au modèle 3D par les coins et non par les points. Pour cela, on utilise un filtre Meshlab: filters>texture>convert PerVertex UV into PerWedgeUV. 

On peut ensuite sauver le fichier au format .ply en sélectionnant les caractéristiques suivantes:

 

L’application 3DHop utilise le format de fichier NXS. Le format de fichier “Nexus” utilisé par 3Dhop est un format de données 3D qui contient des informations sur la structure et l’apparence d’un modèle 3D interactif, notamment des données de géométrie, de texture, d’éclairage et d’interactivité. Il permet à 3Dhop de présenter des modèles 3D de manière interactive dans les navigateurs web en conservant la qualité visuelle et les fonctionnalités interactives.

Pour effectuer la conversion du fichier .ply ou format .nxs, on utilise l’outil de conversion disponible à l’adresse suivante:
Télécharger gratuitement l’outil de conversion

Il faut ensuite décompresser le fichier ZIP sur son ordinateur. On glisse ensuite le fichier .ply que l’on vient d’exporter depuis Meshlab sur l’exécutable nxsbuild.exe. Un fichier .NXS va alors être créé dans le même dossier que le fichier .ply d’origine.

On peut ensuite compresser ce fichier en le glissant sur l’exécutable nxscompress.exe afin d’obtenir un fichier NXZ. C’est ce fichier .NXZ qui sera publié sur le serveur web.

Afin de pouvoir visionner le modèle 3D sur le web, on doit mettre en ligne le viewer 3DHop et notre modèle 3D au format .NXS ou .NXZ.

Pour mettre en ligne le viewer 3DHop, il suffit de télécharger le framework 3Dhop à l’adresse suivante: https://3dhop.net/download.php

Un fois le fichier téléchargé, on peut décompresser le dossier et le transférer sur notre hébergement web.

Dans l’exemple repris dans la partie haute de la page, le framework 3Dhop est hébergé sur l’hébergement www.450ppm.io. Sur ce domaine, un dossier 450_MESHVeiwer a été créé dans la zone public_html. Le contenu du fichier .zip 3Dhop a été décompresser et transféré à cet emplacement.

Il suffit ensuite de charger le modèle 3D au format .nxs ou .nxz dans le dossier models. On peut ensuite dupliquer l’un des fichiers .html. En éditant ce fichier .html, on peut alors remplacer l’url repris à la ligne 48 par l’url du modèle 3D publié dans le dossier models.

Votre modèle 3D est maintenant en ligne, il vous suffit de copier l’adresse html complète du fichier que vous avez créer sur votre hébergement web. Dans notre exemple : https://www.450ppm.io/450_MESHViewer/wagon.html

Si vous désirez insérez le viewer sur un page web il vous suffit de créer une iframe avec le code suivant: <iframe id="inlineFrameExample" title="Inline Frame Example" width="300" height="600" src="https://www.450ppm.io/450_MESHViewer/wagon.html"> </iframe> Pour plus de renseignements sur le framework 3DHop, vous pouvez consulter le guide à l’adresse suivante: https://3dhop.net/documentation/3DHOP_Models_Preparation.pdf

Author

Benoît Lemmens

Autres tutoriels

Tutoriel

Publication d’un maillage sur le web avec 3DHop

Dans ce tutorial, nous allons présenter une technique très simple afin de mettre en ligne notre maillage 3D avec ou sans texture. Nous utiliserons le ...
Tutoriel

3 heures pour produire des orthovues

Dans ce tutotiel, nous allons découvrir une méthode pour produire rapidement les orthovues d'un bâtiment
Tutoriel

CloudCompare – Cartographier la planéité d’une paroi

Dans ce tutoriel, on réalisera l'ensemble des opérations qui, à partir d'un nuage de points, permettent de générer une cartographie précise de la planéité d'une ...