Three TextureLoader紋理貼圖不顯示圖片（顯示黑色）的原因分析

兩種原因：

1、物體材質不對

代碼：

// 紋理貼圖映射到一個矩形平面上
var geometry = new THREE.PlaneGeometry(204, 102); //矩形平面
// TextureLoader創建一個紋理加載器對象，可以加載圖片作爲幾何體紋理
var textureLoader = new THREE.TextureLoader();
// 執行load方法，加載紋理貼圖成功後，返回一個紋理對象Texture
textureLoader.load('Earth.png', function(texture) {
  var material = new THREE.MeshLambertMaterial({
    // color: 0x0000ff,
    // 設置顏色紋理貼圖：Texture對象作爲材質map屬性的屬性值
    map: texture,//設置顏色貼圖屬性值
  }); //材質對象Material
  var mesh = new THREE.Mesh(geometry, material); //網格模型對象Mesh
  scene.add(mesh); //網格模型添加到場景中
 
  //紋理貼圖加載成功後，調用渲染函數執行渲染操作
  // render();
})

原因：

問題在MeshLambertMaterial材質，把它改成MeshBasicMaterial即可顯示圖片。

 

2、寫法不對

代碼：

// 平臺
const floor = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(200, 200),
  new THREE.MeshStandardMaterial({
    map: grassColorTexture,
    aoMap: grassAmbientOcclusionTexture,
    normalMap: grassNormalTexture,
    roughnessMap: grassRoughnessTexture,
  })
);
floor.geometry.setAttribute(
  "uv2",
  new THREE.Float32BufferAttribute(floor.geometry.attributes.uv.array, 2)
);

原因：

在three.js 文檔中，有一個引用

The aoMap requires a second set of UVs.

當使用aoMap,屬性時，必須指定uv2.