[游戏开发]Three.js中的几种贴图效果

Three.js中通过给物体对象设置不同纹理，达到不同的显示效果，本篇通过效果图，简单的介绍几种纹理效果。
普通贴图
作用在物体上，显示图片的本身效果，three.js上设置的方式：

const texture = new THREE.TextureLoader().load(贴图路径);
let material = new THREE.MeshBasicMaterial();
material.map = texture;

凹凸贴图
作用在物体上，具有凹凸的效果，three.js上设置的方式：

const bumpTexture = new THREE.TextureLoader().load(贴图路径);
  let bumpMaterial = new THREE.MeshPhongMaterial({
               //普通纹理贴图
               map:texture,
               //凹凸纹理
               bumpMap:bumpTexture,
               bumpScale:2
      });

凹凸贴图示例图片效果：

法向贴图
作用在物体上，显示物体的细节效果，three.js上设置的方式：

const normalTexture = new THREE.TextureLoader().load(贴图路径);
let normalMaterial = new THREE.MeshPhongMaterial({
                //普通贴图
                map:texture,
              //法向贴图
                        normalMap:normalTexture,
                       normalScale:new THREE.Vector2(1,1)
                    });

法向贴图示例图片效果：

高光贴图

作用在物体上，部分区域显示高光的效果，three.js上设置的方式：

const specularMap = new THREE.TextureLoader().load(贴图路径); 
let specMaterial = new THREE.MeshPhongMaterial({

             //基础贴图
              map:map,
              specularMap:specularMap,
              specular:0x0000ff,
              shininess:2
        });

高光贴图示例图片效果：

其他还有光照贴图、环境贴图等，具体的参见three.js官方文档查看。