带有 envmap 的 Aframe gltf-model 演示答案

【问题标题】：Aframe gltf-model demo with envmap带有 envmap 的 Aframe gltf-model 演示
【发布时间】：2020-04-24 18:55:09
【问题描述】：

在aframe中加载GLTF-model非常方便，但没有找到包含envmap纹理的案例。我想看看官方可以提供三个官方一样的案例。 pmremGenerator.fromEquirectangular(texture)函数用于使gltf模型产生真实的反射效果

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

【问题讨论】：

标签： aframe gltf hdr

【解决方案1】：

我遇到了同样的问题，我发现来自 a-frame-extras 的 cube-env-map 就像一个魅力。

View component on GitHub

其文档将其描述为：

将 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>

【讨论】：

【解决方案2】：

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

不知道这些JS模块PMREMGenerator和RGBELoader是怎么和Aframe的组件一起使用的。有人可以在 Aframe 中提供这样的例子吗，谢谢

这与使用运行时生成的预过滤粗糙度 mipmap (PMREM) 的高动态范围 (RGBE) 基于图像的照明 (IBL) 相同

【讨论】：

【解决方案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。

【讨论】：

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