带有envmap的Aframe gltf模型演示 [英] Aframe gltf-model demo with envmap

问题描述

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

It's very convenient to load GLTF- model in aframe, but no case is found that contains envmap texture. I'd like to see that the official can provide the same case as three official. pmremGenerator.fromEquirectangular(texture) function is used to make gltf model produce real reflection effect

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

推荐答案

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

One way would be creating a custom component, which will:

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

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

The envmap needs to be a CubeTexture - which adds another level of complication, when you want to use a panorama. You can use a the WebGLRenderTargetCube - It's an object which provides a texture from a Cube Camera 'watching' the panorama.

总体组件代码可能如下所示:

Overall The component code could look like this:

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

在此故障中进行检查.

这篇关于带有envmap的Aframe gltf模型演示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！