three.js 中的 envMap 和 MeshPhong 材质答案

【问题标题】：envMap and MeshPhong Material in three.jsthree.js 中的 envMap 和 MeshPhong 材质
【发布时间】：2020-04-26 16:46:09
【问题描述】：

我尝试将环境贴图添加到我的 PhongMaterial，但是当我这样做时，我的几何图形消失了。这是我的代码：

var reflection = THREE.ImageUtils.loadTextureCube( [ 'textures/hdr/pos-x.png', 'textures/hdr/neg-x.png', 'textures/hdr/pos-y.png', 'textures/hdr/neg-y.png', 'textures/hdr/pos-z.png', 'textures/hdr/neg-z.png' ] );
    material = new THREE.MeshPhongMaterial( 
    {   
        map: textures.color,
        normalMap: textures.normal,
        specularMap: textures.specular,
        envMap: reflection,
        combine: THREE.MixOperation, 
        reflectivity: 0.25,
        specular: 0xffffff,

    } 
    );

如果我将 Phong 更改为 Lambert 材质，我可以看到几何和反射。你知道我做错了什么吗？

更新：我发现 normal 和 envMap 不能一起工作。因此，如果我不使用普通 Map，则 envMap 可以工作，而 normalMap 只能在没有 envMap 的情况下工作。这是一个已知问题吗？有什么方法可以将两张地图都添加到我的 mehsphong 材质中？

【问题讨论】：

标签： reflection three.js

【解决方案1】：

EnvMap 和 normalMap 可以一起工作 - example。你必须在现场有聚光灯。否则你会得到“'vWorldPosition' : undeclared identifier”错误。

似乎是在 phong 着色器中：

"#if MAX_SPOT_LIGHTS > 0 || defined( USE_BUMPMAP )",
    "varying vec3 vWorldPosition;",
"#endif"

【讨论】：