【Three.js】十三、three.js纹理的使用

为物体添加纹理相当于给物体添加一层皮肤。使用TextureLoader加载器可用来加载纹理。

一、使用凹凸贴图

  凹凸贴图用于为材质添加厚度。效果如下:

  观察上图会发现，右侧墙体比左侧墙体更加真实，这是因为右侧墙体设置了bumpMap(凹凸贴图)及bumpScale(凹凸高度)：

	let stoneTexture = new THREE.TextureLoader().load('../../static/stone/stone.jpg');
    let bumpStoneTexture = new THREE.TextureLoader().load('../../static/stone/stone-bump.jpg');
    let boxGeometry1 = new THREE.BoxBufferGeometry(30,30,30);
    let boxMaterial1 = new THREE.MeshPhongMaterial({
        map: stoneTexture
    });
    let box1 = new THREE.Mesh(boxGeometry1, boxMaterial1);
    box1.position.set(-40, 15, -20);
    box1.castShadow = true;
    scene.add(box1);
    let boxMaterial2 = new THREE.MeshPhongMaterial({
        map: stoneTexture,
        bumpMap: bumpStoneTexture,
        bumpScale: 0.2
    });
    let box2 = new THREE.Mesh(boxGeometry1, boxMaterial2);
    box2.position.set(10, 15, -20);
    box2.castShadow = true;
    scene.add(box2);

    这里使用的凹凸贴图是一张灰度图，当然也可以使用彩色图。像素密集程度就是凹凸的高度，但凹凸图只包含像素的相对高度，没有任何倾斜方向的信息，要想实现更多细节可使用法向贴图。

二、使用法向贴图

    法向贴图可使用normalMap属性设置：

	let boxMaterial3 = new THREE.MeshPhongMaterial({
        map: new THREE.TextureLoader().load('../../static/general/plaster.jpg')
    });
    let box3 = new THREE.Mesh(boxGeometry1, boxMaterial3);
    box3.position.set(-40, 15,30);
    box3.castShadow = true;
    scene.add(box3);
    let boxMaterial4 = boxMaterial3.clone();
    boxMaterial4.normalMap = new THREE.TextureLoader().load('../../static/general/plaster-normal.jpg');
    let box4 = new THREE.Mesh(boxGeometry1, boxMaterial4);
    box4.position.set(10, 15,30);
    box4.castShadow = true;
    scene.add(box4);

完整示例(src/pages/three_Texture_demo):https://github.com/MAXLZ1/threejs_demo