three.js创建简单的凹凸贴图

最新推荐文章于 2024-07-16 09:50:03 发布

置顶

coder_路远

最新推荐文章于 2024-07-16 09:50:03 发布

阅读量2.9k

点赞数

分类专栏： Three.js入门 Three.js开发文章标签： bumpMap map

本文链接：https://blog.csdn.net/qq_37338983/article/details/82663063

版权

本文通过THREE.MeshPhongMaterial的bumpMap和map属性，介绍如何在Three.js中为立方体添加凹凸贴图，以增强场景的层次感。文章提供了一个包含可调节凹凸程度的交互式demo，展示了不同凹凸程度的效果。

摘要由CSDN通过智能技术生成

有时候我们需要某个场景或者物体突出其凹凸特征，让物体看起来更有层次感，怎么办？Three.js的许多材质就提供了凹凸贴图的属性，下面笔者以THREE.MeshPhongMaterial为例，演示如何对一个立方体进行凹凸贴图：

 function textureBump() {
        let texture1 = new THREE.TextureLoader().load("textures/brick_bump.jpg");//凹凸
        let texture2 = new THREE.TextureLoader().load("textures/brick-wall.jpg");//打底
        let geometry = new THREE.BoxGeometry(10, 10, 10, 30, 30, 30);
        let material = new THREE.MeshPhongMaterial({
            map: texture2,
            bumpMap: texture1,
            bumpScale: 0.3
        });

        boxMesh = new THREE.Mesh(geometry, material);
        scene.add(boxMesh);
    }

上述代码利用了THREE.MeshPhoneMaterial的map和bumpMap属性对立方体进行贴图，本文将其实现为一个小demo，并添加了一个调节凹凸程度的菜单栏，不同凹凸程度实现效果如下：