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.

在vue中使用纹理时，请用下面的写法引入纹理

const grassAmbientOcclusionTexture = textureLoader.load(require("./static/textures/grass/ambientOcclusion.jpg"));