Three.js中通過(guò)給物體對(duì)象設(shè)置不同紋理，達(dá)到不同的顯示效果，本篇通過(guò)效果圖，簡(jiǎn)單的介紹幾種紋理效果。

• 普通貼圖

  作用在物體上，顯示圖片的本身效果，three.js上設(shè)置的方式：

  const?texture?=?new?THREE.TextureLoader().load(貼圖路徑);
  let?material?=?new?THREE.MeshBasicMaterial();
  material.map?=?texture;

  
  

凹凸貼圖

作用在物體上，具有凹凸的效果，three.js上設(shè)置的方式：

const bumpTexture?=?new?THREE.TextureLoader().load(貼圖路徑);
??let?bumpMaterial?=?new?THREE.MeshPhongMaterial({

? ? ? ? ? ? ? ?//普通紋理貼圖
? ? ? ? ? ? ???map:texture,

? ? ? ? ? ? ? ?//凹凸紋理
? ? ? ?????????bumpMap:bumpTexture,
? ?? ? ? ? ? ? bumpScale:2

? ? ? });

凹凸貼圖示例圖片效果：

• 法向貼圖

  作用在物體上，顯示物體的細(xì)節(jié)效果，three.js上設(shè)置的方式：

  const normalTexture?=?new?THREE.TextureLoader().load(貼圖路徑);
  let?normalMaterial?=?new?THREE.MeshPhongMaterial({

  ? ? ? ? ? ? ? ? //普通貼圖
  ? ? ? ? ? ? ? ? map:texture,

  ?? ? ? ? ? ? ?//法向貼圖

? ? ? ? ? ? ? ? ? ? ? ? normalMap:normalTexture,
? ? ? ? ? ? ? ? ? ? ? ?normalScale:new?THREE.Vector2(1,1)
? ? ? ? ? ? ? ? ?? ?});

法向貼圖示例圖片效果：

高光貼圖

作用在物體上，部分區(qū)域顯示高光的效果，three.js上設(shè)置的方式：

const specularMap?=?new?THREE.TextureLoader().load(貼圖路徑);?
let?specMaterial?=?new?THREE.MeshPhongMaterial({

? ? ? ? ? ? ?//基礎(chǔ)貼圖
? ????????????map:map,
? ? ? ? ? ????specularMap:specularMap,
? ? ? ? ? ? ? specular:0x0000ff,
? ? ? ? ? ? ? shininess:2
? ? ? ? });

高光貼圖示例圖片效果：

其他還有光照貼圖、環(huán)境貼圖等，具體的參見(jiàn)three.js官方文檔查看。