Utilisation du composant Sites 3D

AEM 3D comprend un composant AEM Sites que vous pouvez utiliser pour implémenter l'affichage interactif de modèles 3D sur des pages Web.

Une fois que vous avez ajouté votre composant 3D, vous pouvez afficher la ressource 3D dans ce composant.

Ajout du composant 3D au modèle de page

Vous devez activer le composant 3D dans la page avant de pouvoir le placer sur une page. Voir Modification de modèles pour obtenir des informations détaillées sur l'activation de composants dans les modèles.

Ajout du composant 3D au modèle de page:

  1. Accédez à Outils > Général > Modèles.

  2. Accédez au modèle de page dans lequel vous souhaitez activer le composant 3D, puis sélectionnez le modèle.

  3. Appuyez sur Modifier pour ouvrir le modèle.

  4. Près de l’angle supérieur droit de la page, dans le menu déroulant, sélectionnez le mode Structure, s’il n’est pas déjà actif.

    image2017-11-14_15-33-57

  5. Appuyez sur la région Conteneur de mise en page pour la sélectionner.

  6. Appuyez sur le bouton Stratégie pour ouvrir Éditeur de stratégie.

  7. Dans la section Propriétés, cochez la case 3D, puis appuyez sur Terminé pour enregistrer les modifications et fermer l'Éditeur de stratégie.

    Vous pouvez maintenant placer le composant Sites 3D sur toutes les pages qui utilisent ce modèle.

Ajout du composant 3D Viewer à une page web

ATTENTION

Cette version d’AEM 3D prend en charge une seule instance du composant 3D sur chaque page web. Plusieurs composants 3D sur la même page ne fonctionnent pas correctement.

Pour ajouter le composant de lecteur 3D à une page Web :

  1. Ouvrez AEM Sites et sélectionnez la page Web à laquelle vous souhaitez ajouter le composant 3D.

  2. Appuyez sur l’icône Modifier (en forme de crayon) pour ouvrir la page dans l’éditeur de pages. Assurez-vous que le mode Modifier situé en haut à droite de la page est sélectionné.

    image2017-11-14_15-44-40

  3. Appuyez sur le sélecteur de rail pour ouvrir le panneau latéral.

  4. Appuyez sur l’icône + pour ouvrir la liste Composants.

  5. Faites glisser le composant Visionneuse 3D de la liste Composants vers l’emplacement de la page où doit apparaître la visionneuse 3D.

Configuration du composant 3D

  1. Dans l’éditeur de page AEM Sites, sélectionnez le composant Visionneuse 3D que vous avez précédemment ajouté à la page.

  2. Appuyez sur l’icône Configuration (en forme de clé à molette) pour ouvrir la boîte de dialogue de configuration du composant.

    Vous pouvez définir les propriétés de composant suivantes :

    Propriété Description Applicabilité
    Hauteur (px) Spécifiez la hauteur désirée du composant 3D en pixels. Si aucune valeur n’est spécifiée, la valeur par défaut est de 600 pixels.
    Nom de l’étape

    Sélectionnez une scène 3D dans la liste des scènes disponibles. La scène fournit l’arrière-plan et l’éclairage.

    Voir A propos de l'utilisation des étapes dans AEM sites 3D.

    Ignoré pour les ressources Adobe Dimension.
    Vitesse de rotation automatique (RPM)

    La visionneuse 3D satellise la caméra sans interruption après le chargement et la réinitialisation. La rotation automatique s’interrompt lorsque l’utilisateur lance une action d’orbite manuelle.

    Vous pouvez spécifier la vitesse de rotation en RPM à l’aide des valeurs suivantes :

    • Définir une valeur positive pour tourner à droite
    • Définir une valeur négative pour faire pivoter à gauche
    • Définissez une valeur de 0 pour désactiver la rotation automatique.

    La valeur par défaut est de 3 tr/min, soit 20 secondes par révolution complète.

    Remarque : La vitesse de rotation suppose une fréquence d’images de 60/s. Ce taux est généralement atteint avec des modèles de petite ou moyenne taille sur des matériels graphiques plus puissants. Des modèles plus grands ou des périphériques plus lents fonctionnent automatiquement à des vitesses de rotation plus basses.

    Ignoré pour les ressources Adobe Dimension.
    Couleur du bouton de navigation Utilisez le sélecteur de couleurs pour sélectionner la couleur principale des boutons de contrôle de la visionneuse. Ignorée pour les fichiers Adobe Dimension.
    Couleur de survol de navigation Utilisez le sélecteur de couleurs pour sélectionner la couleur de survol/de sélection des boutons de contrôle de la visionneuse. Ignoré pour les ressources Adobe Dimension.
    Afficher les échantillons Pour une utilisation ultérieure. Ignoré pour les ressources Adobe Dimension.
    Afficher les paramètres prédéfinis de caméra GLTF Affichez ou masquez les paramètres prédéfinis de caméra qui peuvent être présents dans les fichiers Adobe Dimension. Pour les ressources Adobe Dimension uniquement.
    Couleur d'arrière-plan GLTF Couleur d'arrière-plan par défaut si le modèle 3D n'inclut pas d'arrière-plan. Pour les ressources Adobe Dimension uniquement.
  3. Appuyez sur la coche pour enregistrer vos modifications.

    Outre les paramètres disponibles dans la boîte de dialogue de configuration des composants, un certain nombre de paramètres de configuration globale peuvent être modifiés par le CRXDE Lite.
    Voir Paramètres de configuration avancée pour plus d’informations sur ces paramètres globaux.

Attribution d’un modèle 3D au composant

  1. Dans l’éditeur de page AEM Sites, cliquez sur l’icône Ressources pour ouvrir la liste Ressources dans le panneau latéral.

  2. Sélectionnez le filtre Modèles 3D pour masquer les types de ressources indésirables.

    screen_shot_2017-12-11at124258

  3. Recherchez ou faites défiler l’écran jusqu’à atteindre la ressource 3D que vous souhaitez afficher sur la page en cours de modification.

  4. Faites glisser le fichier 3D de la liste Ressources vers le composant Visionneuse 3D précédemment placé sur la page.

    Les ressources Adobe Dimension sont rendues à l’aide de la nouvelle technologie de lecteur basée sur la norme ouverte glTF, tandis que tous les autres types de ressources 3D reposent sur la visionneuse WebGL 3D classique AEM. Le composant sélectionne automatiquement la visionneuse appropriée en fonction du type du modèle 3D.

Prévisualisation d’une page Web contenant un composant 3D

Bien que la page Web soit en mode Modifier, le composant 3D affiche le modèle 3D mais aucune interaction avec le modèle n'est possible.

Vous pouvez prévisualisation la page Web dans l'éditeur de page en accédant pleinement aux fonctionnalités du composant 3D.

Voir aussi Affichage des ressources 3D dans le composant Sites 3D.

Pour prévisualisation d’une page Web qui comporte un composant 3D :

  1. Effectuez l’une des opérations suivantes :

    • Près de l’angle supérieur droit de la page, cliquez sur Prévisualisation pour passer en mode prévisualisation.
    • Supprimez /edit.html de l’URL de la page dans le navigateur.

Publication de la page et des ressources

Voir Publication de ressources pour obtenir des informations sur la publication des ressources. Voir Publication de pages pour obtenir des informations sur la publication des pages.

REMARQUE

L'utilisation de l'option de menu Publier la page du menu Informations sur la page permet de publier la page et toutes les dépendances Principales de la page. Les dépendances secondaires qui peuvent être référencées par le modèle 3D et/ou la scène 3D, telles que les textures plaquées et les images IBL, ne sont pas publiées lorsque vous publiez la page de cette manière.

Adobe vous recommande de publier tous les actifs 3D et leurs dépendances directement depuis AEM Assets, avant de publier la page Web qui les référence.

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now