带有 envmap 的 Aframe gltf 模型演示

Question

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

https://threejs.org/examples/#webgl_loader_gltf https://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;
                }
           });
}

在这个故障中检查一下。