Aframe gltf-model demo with envmap

Question

It's very convenient to load GLTF- model in aframe, but no case is found that contains envmap texture. I'd like to see that the official can provide the same case as three official. pmremGenerator.fromEquirectangular(texture) function is used to make gltf model produce real reflection effect

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

Answer 1

I was having the same issue and i found that cube-env-map from a-frame-extras works like a charm.

View component on GitHub

Its docs describe it as:

Applies a CubeTexture as the envMap of an entity, without otherwise modifying the preset materials

And the code is 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>

Answer 2

In THREE demo, I remember that WebGLRenderTargetCube was used to produce envmap, but recently it was found thatPMREMGenerator was basically used to generate envmap texture with mipmap. It also supports HDR image format, making gltf model better than JPG texture.

I don't know how these JS modules PMREMGenerator and RGBELoader are used together with the components of Aframe. Can someone provide such an example in Aframe ,Thanks

That's the same High dynamic range (RGBE) Image-based Lighting (IBL) using run-time generated pre-filtered roughness mipmaps (PMREM)

Answer 3

One way would be creating a custom component, which will:

1. wait until the model is loaded
2. traverse through the object's children
3. if they have a material property - apply the envMap

The envmap needs to be a CubeTexture - which adds another level of complication, when you want to use a panorama. You can use a the WebGLRenderTargetCube - It's an object which provides a texture from a Cube Camera 'watching' the panorama.

Overall The component code could look like this:

// 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;
                }
           });
}

Check it out in this glitch.