aframe glTF cube-env-map

Question

aframe glTF cube-env-map

Demandé el 19 de Novembre, 2020: Quand la question a-t-elle été
296 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'arrive pas à voir de réflexion sur mon modèle gtLF en utilisant "cube-env-map". J'aimerais obtenir quelque chose comme ceci : casque des exemples de threejs.org Je ne sais pas si c'est à cause des fichiers .jpg que j'utilise, ou du html ou des scripts liés au javascript, ou... autre chose ? Voici mon html :

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- webcam/mobilecam --> 
    <script src="https://mkwy.fr/js/play-all-model-animations.js"></script><!-- animation -->
    <script src="https://mkwy.fr/js/aframe-orbit-controls.min.js"></script><!-- orbit cam around target -->
    <script src="https://mkwy.fr/js/aframe-extras.js"></script><!-- cub-env-map -->
  </head>
  <body>
<a-scene vr-mode-ui="enabled: false" embedded>
     <a-assets>
     <a-asset-item id="toy" src="https://mkwy.fr/assets/toyDrummerSolo.glb"></a-asset-item>
     </a-assets>
     <a-entity 
        gltf-model="#toy"
        cube-env-map="path: https://mkwy.fr/assets/cube-env/; extension: jpg; reflectivity: 0.9;" 
        play-all-model-animations >
     </a-entity>
      <a-entity camera look-controls  orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
</a-scene>
</body>
</html>

Merci d'avance pour votre aide,

Demandé el 19 de Novembre, 2020 par Éric Loillieux

Answer 1

2 Réponses

Answer 2

1voto

Piotr Adam Milewski Points 6423

(En supposant qu'il n'y ait pas d'erreurs de console suggérant des chemins cubemap incorrects, ou des extensions erronées)

Si votre modèle ressemble à celui-ci :

Et vous voulez que ce soit plus comme ça :

La réponse se trouve alors dans deux facteurs - la métallisation et la rugosité .

rugosité détermine si le matériau est comme un miroir (0), ou s'il diffuse complètement la réflexion (1).
métallurgie détermine si le matériau est métallique (1) ou non (0).

Vous pouvez faire face à cette situation de deux manières au moins :

Modifiez les matériaux dans un logiciel de modélisation comme Blender ou Maya.
Modifier les propriétés d'un composant personnalisé a-frame.

Un composant devrait attendre que le modèle soit chargé et modifier tous les nœuds du modèle (ou certains nœuds sélectionnés). Voici comment procéder :

AFRAME.registerComponent("foo", {
  init: function() {
    // wait until the model is loaded
    this.el.addEventListener("model-loaded", e => {
      // grab the mesh
      let mesh = this.el.getObject3D("mesh");
      mesh.traverse(node => {
        // ignore nodes without materials
        if (!node.material) return;
        // assign the values.
        node.material.metalness = 1;
        node.material.roughness = 0;
      })
    })
  }
})

Vous pouvez le consulter dans este exemple.

Le casque travaille avec les deux jpg y png cartes. En ce qui concerne les arjs, si votre modèle est défaillant et que vous rencontrez des problèmes de sécurité, il est préférable d'utiliser les arjs. z-combat , il suffit de définir l'option logarithmicDepthBuffer dans le renderer :

<a-scene renderer="logarithmicDepthBuffer: true" embedded arjs>

Exemple aquí Il semble fonctionner comme prévu :

Répondu el 20 de Novembre, 2020 par Piotr Adam Milewski (6423 Points )

Answer 3

0voto

Éric Loillieux Points 23

Ok, j'ai changé les paramètres dans Blender, en ajoutant du métal, et maintenant ça marche comme un charme. C'était déroutant parce que dans Blender, il n'est pas nécessaire de régler l'épaisseur du métal pour obtenir des reflets (par exemple, une bouteille en plastique peut avoir des reflets). Je dois jouer avec ces paramètres. Merci beaucoup !

Répondu el 20 de Novembre, 2020 par Éric Loillieux (23 Points )

aframe glTF cube-env-map

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

aframe glTF cube-env-map

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: