three.js - 球形环境贴图模糊

Question

我从 three.js docs sample 中获取了一个 equirectangular envMap它在球体上显得尖锐。

如果我将相同的 Material 加载到我的 aframe 中具有以下参数的场景

material="spherical-env-map: /assets/models/1/envtest.jpeg; roughness: 0; metalness: 1"

看起来像这样模糊

我做错了什么？

通过故障重现的例子:https://glitch.com/edit/#!/sepia-forest-keyboard

我在设置故障时注意到了什么:

• 使用 Aframe 1.0.3 模糊
• 使用 Aframe 1.2.0 无论我做什么它都保持黑色

Answer 1

发生这种情况是因为您在代码中使用了 PBR Material ，因为 A-Frame 的默认 Material 是 MeshStandardMaterial .意思是一种试图渲染物理正确的 Material 。官方的three.js 例子使用MeshLambertMaterial这不是 PBR Material 。两种类型的 Material 以不同方式实现环境贴图。

使用 PBR Material 时，建议使用 HDR 环境贴图，该贴图也使用 PMREMGenerator 进行了预处理，如本例所示:https://threejs.org/examples/webgl_loader_gltf