three.js创建简单的法向贴图

学习交流欢迎加群：789723098，博主会将一些demo整理共享

在上一节，我们用了three.js创建了简单的凹凸贴图效果：点击查看凹凸贴图，凹凸贴图可以呈现出比普通贴图更多细节，也更具层次感，如果我们对场景要求更为细致，我们可以使用法向贴图对材质进行贴图，本文以THREE.MeshPhongMaterial为例，演示一个法向贴图的示例，法向贴图主要是利用材质的normalMap来贴图，利用normalScale来控制其纹理的凹凸程度，代码如下：

function createTextureMesh(geometry, image, otherImage) {
        let map = new THREE.TextureLoader().load(image);
        let normalMap = new THREE.TextureLoader().load(otherImage);

        let material = new THREE.MeshPhongMaterial();
            material.map = map;//打底贴图
            material.normalMap = normalMap;//法向贴图
            material.normalScale = new THREE.Vector2(0.3, 0.3);//凹凸程度

        return new THREE.Mesh(geometry, material);
    }

其中image和otherImage都是图片所在的路径；为了贴图看起来更加细致和逼真，这里用了普通贴图和法向贴图相叠加。接下来实现一个法向贴图的场景(PS：一般用于法向贴图的图片文件名字都会含有normal字眼，用于凹凸贴图的会含有bump字眼，例如：XX-normal.jpg、XX-bump.jpg等等，所以在贴图时，读者可以根据需求再去找相应的文件），这里笔者实现了一个交互菜单栏，用于实现法向贴图凹凸程度的调节，效果如下：

demo代码：