点击选择本地图片为Three.js地板加纹理却显示黑色求解决

嘿，我来帮你搞定这个Three.js纹理显示黑色的问题！你的代码里有两个关键问题导致了这个结果，我来一步步帮你修正：

问题根源 #

1. 错误传递参数给纹理加载方法：你直接把FileReader对象传给了THREE.ImageUtils.loadTexture，但这个方法需要的是图片的URL（或者HTMLImageElement），而不是FileReader实例。你应该用reader.result（FileReader读取后生成的DataURL）作为纹理源。
2. 使用了已弃用的API：THREE.ImageUtils在Three.js的新版本里已经被弃用了，官方现在推荐使用THREE.TextureLoader来加载纹理，它的用法更灵活，也更稳定。

修正后的完整代码 #

先给你HTML部分（确保文件选择器正确）：

<input type="file" accept="image/*" onchange="preview_image(event)">

然后是JavaScript部分，我已经修正了问题并添加了必要的细节：

function preview_image(event) {
  // 先获取用户选中的文件
  const selectedFile = event.target.files[0];
  if (!selectedFile) return; // 如果没选文件就直接返回

  const reader = new FileReader();
  reader.onload = function() {
    // 用TextureLoader替代弃用的ImageUtils
    const textureLoader = new THREE.TextureLoader();
    
    // 传入reader.result（这是一个DataURL，包含了图片的内容）
    textureLoader.load(reader.result, function(floorTexture) {
      // 设置纹理的重复模式，和你原来的需求一致
      floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
      floorTexture.repeat.set(10, 10);
      
      // 必须设置这个属性，确保Three.js更新纹理
      floorTexture.needsUpdate = true;

      // 下面是创建地板材质和网格的示例代码（根据你的场景调整）
      const floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture });
      const floorGeometry = new THREE.PlaneGeometry(100, 100); // 尺寸按需调整
      const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial);
      
      // 把平面旋转成地板的方向（默认是垂直的）
      floorMesh.rotation.x = -Math.PI / 2;
      floorMesh.position.y = 0; // 按需调整地板位置

      // 假设你已经初始化了scene对象，把地板添加到场景里
      scene.add(floorMesh);
    });
  };

  // 把读取的文件转换成DataURL格式
  reader.readAsDataURL(selectedFile);
}

额外注意事项 #

• 如果你的地板用的是带光照的材质（比如MeshLambertMaterial或MeshPhongMaterial），一定要给场景添加光源（比如DirectionalLight或AmbientLight），否则材质会因为没有光照而显示黑色。
• 确保你的Three.js场景、相机、渲染器已经正确初始化，这是显示任何物体的前提。
• 如果纹理还是有问题，可以打开浏览器的开发者工具，检查Console面板里有没有报错信息，排查是否有其他场景配置问题。

内容的提问来源于stack exchange，提问作者Evelina Diksaitė