Aframe GLTF-модель демо с envmap - PullRequest
Новая
       85

Aframe GLTF-модель демо с envmap

1 голос
/ 07 января 2020

Очень удобно загружать GLTF-модель в рамке, но не найдено ни одного случая, содержащего текстуру envmap. Я хотел бы видеть, что чиновник может предоставить тот же случай, что и три чиновника. Функция pmremGenerator.fromEquirect angular (текстура) используется для того, чтобы модель gltf производила реальный эффект отражения

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

Ответы [ 2 ]

1 голос
/ 07 января 2020

Одним из способов будет создание пользовательского компонента, который будет:

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

Проверьте это в этот глюк .

0 голосов
/ 07 января 2020

В ТРИ демо я помню, что WebGLRenderTargetCube использовался для создания envmap, но недавно было обнаружено, что PMREMGenerator в основном использовался для генерации текстуры envmap с помощью mipmap. Он также поддерживает формат изображения HDR, что делает модель gltf лучше, чем текстура JPG.

Я не знаю, как эти JS модули PMREMGenerator и RGBELoader используются вместе с компонентами Aframe. Может ли кто-нибудь привести такой пример в Aframe, спасибо

Это тот же диапазон High Dynami c (RGBE), основанный на изображениях (IBL), с использованием сгенерированных во время выполнения предварительно отфильтрованных мип-карт шероховатости (PMREM) )

...