如何使用设置 "Park (Day)" 设置从 gltf 查看器到 A-Frame 的光照下的环境？

Question

我正在尝试加载一个 gltf 模型（link) to A-frame, but it appears dark, I've checked it using the link，不同之处在于在 gltf 查看器中，在光照下，有一个名为环境的字段设置为 "Park (Day)"。

环境设置为：None

环境设置为：公园（白天）

如何将此设置应用到 A-Frame 中的模型？

另一个区别是 gammeOutput 属性，我已经在场景渲染器中用 "colorManagement: true" 修复了它。

目前使用 A-Frame 0.9.0 版本

Answer 1

如果您看到模型反射的图像，那就是 environment map。当您希望您的对象反映其周围或任何其他环境时使用它。

您可以使用 envMap（立方体贴图）或 sphericalEnvMap（360 图像）在图元上设置它属性:

<a-sphere material="roughness:0; sphericalEnvMap: #myImage>

在thisfiddle中查看。

对于模型，您需要更深入地挖掘。您需要 traverse 模型，并设置每个网格 envMap 属性:

let texture = THREE.TextureLoader()
const mesh = element.getObject3D('mesh');
const envMap = texture;
if (!mesh) return;

mesh.traverse(function (node) {
  if (node.material && 'envMap' in node.material) {
    node.material.envMap = envMap;
    node.material.needsUpdate = true;
  }
});

如何使用设置 "Park (Day)" 设置从 gltf 查看器到 A-Frame 的光照下的环境？

How do I use the setting "Park (Day)" for the environment under Lighting from the gltf viewer to A-Frame?

aframe

gltf