1
votes

Démo Aframe Gltf-Model avec envmap

Il est très pratique de charger le modèle GLTF dans une image, mais aucun cas ne contient de texture envmap. J'aimerais voir que le fonctionnaire peut fournir le même cas que trois officiels. pmremGenerator.fromLa fonction équirectangulaire (texture) est utilisée pour que le modèle gltf produise un effet de réflexion réel

https://threejs.org/examples/#webgl_loader_gltf https://threejs.org/examples/#webgl_materials_envmaps_hdr

aframe gltf hdr

0 commentaires

3 Réponses :

3
votes

Une façon serait de créer un composant personnalisé, qui:

attendez que le modèle soit chargé
parcourir les enfants de l'objet
s'ils ont une propriété matérielle - appliquez la carte d'environnement

L'envmap doit être une CubeTexture - ce qui ajoute un autre niveau de complication, lorsque vous souhaitez utiliser un panorama. Vous pouvez utiliser le WebGLRenderTargetCube - C'est un objet qui fournit une texture d'une caméra Cube «regardant» le panorama.

Dans l'ensemble Le code du composant pourrait ressembler à ceci:

// create the 'cubecamera' objct
var targetCube = new THREE.WebGLRenderTargetCube(512, 512);
var renderer = this.el.sceneEl.renderer;

// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
   let mesh = this.el.getObject3D("mesh");

   // load the texture     
   var texture = new THREE.TextureLoader().load( URL,
          function() {

             // create a cube texture from the panorama
             var cubeTex = targetCube.fromEquirectangularTexture(renderer, texture);
             mesh.traverse(function(node) {

                // if a node has a material attribute - it can have a envMap
                if (node.material) {
                  node.material.envMap = cubeTex.texture;
                  node.material.envMap.intensity = 3;
                  node.material.needsUpdate = true;
                }
           });
}

Vérifiez-le dans ce problème .

2 commentaires

Merci beaucoup, cela fonctionne et j'ai trouvé que ne fonctionnait pas, après le test, il a été constaté que cela devrait être

Dans TROIS démo, je me souviens que WebGLRenderTargetCube a été utilisé pour produire envmap, mais récemment, il a été découvert quePMREMGenerator était essentiellement utilisé pour générer une texture envmap avec mipmap. Il prend également en charge le format d'image HDR, ce qui rend le modèle gltf meilleur que la texture JPG. Je ne sais pas comment ces modules JS PMREMGenerator et RGBELoader sont utilisés avec les composants d'Aframe. Pouvez-vous les démontrer à nouveau

0
votes

Dans TROIS démo, je me souviens que WebGLRenderTargetCube était utilisé pour produire envmap, mais récemment, il a été découvert quePMREMGenerator était essentiellement utilisé pour générer une texture envmap avec mipmap. Il prend également en charge le format d'image HDR, ce qui rend le modèle gltf meilleur que la texture JPG.

Je ne sais pas comment ces modules JS PMREMGenerator et RGBELoader sont utilisés avec les composants d'Aframe. Quelqu'un peut-il fournir un tel exemple dans Aframe, merci

C'est le même éclairage basé sur l'image (IBL) à plage dynamique élevée (RGBE) utilisant des mipmaps de rugosité pré-filtrés générés à l'exécution (PMREM)

0 commentaires

1
votes

J'avais le même problème et j'ai trouvé que cube-env-map de a-frame-extras fonctionne comme un charme.

Afficher le composant sur GitHub

Ses documents le décrivent comme suit:

Applique un CubeTexture comme envMap d'une entité, sans autre modification des matériaux prédéfinis

Et le code est super simple:

yarn add aframe-extras

import 'aframe-extras'

<a-entity 
   gltf-model="src: url('/path/to/file.glb')"
   cube-env-map="path: /cubeMapFolder/;
                 extension: jpg;
                 reflectivity: 0.9;">
</a-entity>

0 commentaires