如何在Three.js中将用户上传纹理加载至已有几何体？

嘿，我完全懂你现在的卡壳点——把HTML文件上传的图片和Three.js里已经建好的平面网格关联起来，其实核心就是更新已有材质的纹理属性，不用重新创建整个网格或者材质。我给你整理了一个适配你场景的示例，一步步来：

第一步：确保你已有基础的Three.js场景和平面网格 #

假设你已经初始化好了这些（你说你已经有带占位纹理的平面了，这部分可以直接用你现有的代码）：

// 基础场景、相机、渲染器（用你自己的即可）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('container').appendChild(renderer.domElement);

// 你的已有平面网格（带占位纹理）
const placeholderTexture = new THREE.TextureLoader().load('你的占位图路径');
const planeMaterial = new THREE.MeshBasicMaterial({ map: placeholderTexture });
const planeGeometry = new THREE.PlaneGeometry(5, 5);
const planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(planeMesh);
camera.position.z = 8;

// 渲染循环（你应该已经有这个了）
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

第二步：绑定文件上传的事件处理 #

接下来给你的HTML文件输入框添加监听逻辑，关键是读取用户上传的图片，然后更新已有平面材质的纹理：

<!-- 你的HTML文件输入框 -->
<input id="userImage" type="file" accept="image/*" />

// 获取文件输入元素
const fileInput = document.getElementById('userImage');

// 监听文件选择事件
fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  if (!file) return;

  // 创建FileReader读取图片
  const reader = new FileReader();
  reader.onload = (e) => {
    // 创建图片元素
    const img = new Image();
    img.onload = () => {
      // 创建新纹理，替换已有材质的map
      const newTexture = new THREE.Texture(img);
      newTexture.needsUpdate = true; // 必须设置这个，Three.js才会更新纹理
      planeMaterial.map = newTexture;
      planeMaterial.needsUpdate = true; // 材质属性变化，也要通知Three.js更新
    };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
});

关键知识点解释 #

• texture.needsUpdate = true：Three.js的纹理默认不会自动检测图片内容的变化，所以当我们用新的图片源更新纹理后，必须手动设置这个属性，让渲染器知道需要重新加载纹理。
• material.needsUpdate = true：当我们替换了材质的map属性后，需要告诉Three.js材质已经变化，它才会重新编译材质（如果是普通材质的话，这个有时候可以省略，但加上更稳妥）。
• FileReader的作用：把用户本地的图片文件转换成浏览器能识别的DataURL，这样才能作为图片元素的src，进而被Three.js的Texture使用。

和你找到的JSFiddle的区别 #

你看到的那个示例是用ShaderMaterial自定义着色器渲染纹理，而你的场景是用普通的Mesh材质（比如MeshBasicMaterial、MeshStandardMaterial），所以不用写复杂的着色器代码，直接更新材质的map属性就可以，比那个示例更简单！

内容的提问来源于stack exchange，提问作者Josh Bowman