Aframe 带envmap的框架gltf模型演示

在一个帧中加载GLTF-model非常方便，但是没有发现包含envmap纹理的案例。我希望看到该官员能够提供与三名官员相同的案例。pmremGenerator.FromEquirectangle（纹理）函数用于使gltf模型产生真实的反射效果

---

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

等待模型加载

遍历对象的子对象

如果它们具有材质属性-应用环境贴图

envmap需要是一个立方体结构-当您想要使用全景图时，这会增加另一个复杂程度。你可以使用一个-它是一个从立方体相机“观看”全景图中提供纹理的对象

总的来说，组件代码可能如下所示：

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

---

查看。

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

我不知道这些JS模块PMREMGenerator和RGBELoader是如何与Aframe的组件一起使用的。有人能在一个框架中提供这样一个例子吗，谢谢

---

这是同样的高动态范围（RGBE）基于图像的照明（IBL），使用运行时生成的预过滤粗糙度mipmap（PMREM）

我也有同样的问题，我发现来自a-frame-extras的立方体环境贴图工作起来很有魅力

其文件将其描述为：

将CubeTexture应用为实体的envMap，而不使用其他方式 修改预设材质

代码非常简单：

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>

纱线添加一个额外的框架
导入“aframe extra”

非常感谢，它可以工作，但我发现不起作用，测试后，发现它应该在三个演示中，我记得WebGLRenderTargetCube用于生成envmap，但最近发现PMRemGenerator基本上用于使用mipmap生成envmap纹理。它还支持HDR图像格式，使gltf模型优于JPG纹理。我不知道这些JS模块PMREMGenerator和RGBELoader是如何与Aframe的组件一起使用的。你能再演示一遍吗