javascript - Mesh 未呈现其真实颜色 Three.js

Question

我正在尝试在 Threejs （反应原生纤维版本）中将图像渲染到平面上，我正在使用 MeshBasicMaterial 但平面上的颜色（图像）没有从源头显示其真实颜色。 图片

  const geo = new THREE.Geometry();
  
  geo.vertices.push(new THREE.Vector3(0,0,-1))
  geo.vertices.push(new THREE.Vector3(width,0,-1))
  geo.vertices.push(new THREE.Vector3(width,-height,-1))
  geo.vertices.push(new THREE.Vector3(0,-height,-1))

  geo.faces.push(new THREE.Face3(1,0,2))
  geo.faces.push(new THREE.Face3(2,0,3))
  geo.faceVertexUvs[0].push([
      new THREE.Vector2(1,1),
      new THREE.Vector2(0,1),
      new THREE.Vector2(1,0),
    ])
  
  geo.faceVertexUvs[0].push([
      new THREE.Vector2(1,0),
      new THREE.Vector2(0,1),
      new THREE.Vector2(0,0),
    ])
  geo.uvsNeedUpdate = true;
  geo.computeVertexNormals();
  geo.computeFaceNormals();
  const loader = new THREE.TextureLoader();
  const material = new THREE.MeshBasicMaterial({
    map: loader.load(img),
  });
  return (
    <mesh name='model' geometry = {geo} material = {material} >
    </mesh>
  )
}

标签： javascript3d