带有envmap的Aframe gltf模型演示

Question

在一个框架中加载GLTF-模型非常方便，但是找不到包含envmap纹理的情况。我希望看到该官员可以提供与三名官员相同的案件。 pmremGenerator.fromEquirectangular（texture）函数用于使gltf模型产生真实的反射效果

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

Answer 1

一种方法是创建自定义组件，这将：

1. 等待模型加载
2. 遍历对象的子对象
3. 如果具有材料属性，请应用envMap

envmap必须是CubeTexture-当您要使用全景时，这会增加另一层次的复杂性。您可以使用WebGLRenderTargetCube-这是一个对象，它从多维数据集相机“观看”全景中提供纹理。

总体组件代码可能看起来像这样：

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

在this glitch中检出。

Answer 2

[在三个演示中，我记得WebGLRenderTargetCube用于生成envmap，但是最近发现PMREMGenerator基本上用于生成带有mipmap的envmap纹理。它还支持HDR图像格式，使gltf模型优于JPG纹理。

我不知道这些JS模块PMREMGenerator和RGBELoader如何与Aframe的组件一起使用。有人可以在Aframe中提供这样的示例，谢谢

[[使用运行时生成的预先过滤的粗糙度多点映射（PMREM），这是相同的基于高动态范围（RGBE）的图像照明（IBL），