Three.js 法线贴图置换带光答案

【问题标题】：Three.js normalmap displacement with lightThree.js 法线贴图置换带光
【发布时间】：2023-03-26 09:37:01
【问题描述】：

我想用 Three.js 的法线贴图着色器渲染一个带有置换贴图的球体。我还在我的场景中使用了 PointLight。

问题是我无法正确点亮置换球。事实上，如果我省略纹理，球体在法线贴图着色器材质下全是黑色，但使用简单的 meshLambertMaterial 时，它会被正确点亮。（见下图）

我尝试使用法线贴图/置换着色器和 meshLambertMaterial 制作多材质网格，但结果尚无定论。

我在创建着色器材质时是否做错了什么（参见下面的代码）？

var specularColor = 0xcccccc;
var diffuseColor = 0xffffff;
var ambiantColor = 0x888888;

var shader = THREE.ShaderLib["normalmap"];
var uniforms = THREE.UniformsUtils.clone(shader.uniforms);

uniforms["enableAO"].value = 0;
uniforms["enableDiffuse"].value = 1;
uniforms["enableSpecular"].value = 1;
uniforms["enableReflection"].value = 0;
uniforms["enableDisplacement"].value = 1;
uniforms["tNormal"].value = normalTexture;
uniforms["tSpecular"].value = specularTexture;
uniforms["uNormalScale"].value = 1.0;
uniforms["tDisplacement"].value = heightTexture;
uniforms["uDisplacementScale"].value = 5;
uniforms["uDiffuseColor"].value.setHex(diffuseColor);
uniforms["uSpecularColor"].value.setHex(specularColor);
uniforms["uAmbientColor"].value.setHex(ambiantColor);
uniforms["uShininess"].value = 1;

var parameters = {
    fragmentShader : shader.fragmentShader,
    vertexShader : shader.vertexShader,
    uniforms : uniforms,
    lights : true
};
var material = new THREE.ShaderMaterial(parameters);
var geometry = new THREE.SphereGeometry(radius, 100, 100);
geometry.computeTangents();

var mesh = new THREE.Mesh(geometry, material);

【问题讨论】：

标签： three.js

【解决方案1】：

有一件事显然是错误的。应该是

uniforms[ "uNormalScale" ].value.set( 1.0, 1.0 );

three.js r.58

【讨论】：

很好，我在从 r50 迁移到 r58 时错过了这一点，谢谢。