3

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

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

4

3 回答 3

7

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

  1. 等到模型加载完毕
  2. 遍历对象的孩子
  3. 如果它们具有材质属性 - 应用 envMap

envmap 需要是 CubeTexture - 当您想使用全景图时，这会增加另一层复杂性。您可以使用WebGLRenderTargetCube - 它是一个提供来自 Cube 相机“观看”全景图的纹理的对象。

总体而言，组件代码可能如下所示：

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

在这个故障中检查一下。

于 2020-01-07T12:28:46.470 回答
1

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

在 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>
于 2020-07-12T18:59:51.943 回答
0

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

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

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

于 2020-01-07T15:58:18.730 回答