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

最新推荐文章于 2025-06-23 22:10:48 发布

原创

最新推荐文章于 2025-06-23 22:10:48 发布 · 置顶 · 5k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#normalMap

本文通过three.js演示了如何创建法向贴图，利用THREE.MeshPhongMaterial和normalMap属性，结合normalScale控制凹凸程度。示例中还提供了交互菜单栏，用于调整法向贴图的凹凸效果。通过正常贴图和法向贴图的叠加，实现了更细致逼真的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习交流欢迎加群：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等等，所以在贴图