Javascript 在Three.js中使用自定义几何体在网格上显示纯一种颜色的纹理

我在三角形几何体中添加了纹理。但所有的颜色都是以最浅的颜色为基础的素色。然后我知道我应该分配UV。但同样的问题，但我的纹理颜色最深（见图）

代码如下：

var material = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load(texture), overdraw: true } );
var geometry = new THREE.Geometry();
// 1re marche de 3 (30 degrées)
geometry.vertices.push(new THREE.Vector3(0.0, 0.0, 0.0));
geometry.vertices.push(new THREE.Vector3(longueurTotalFacteur, largeur, 0.0));
geometry.vertices.push(new THREE.Vector3(0.0, largeur, 0.0));
geometry.vertices.push(new THREE.Vector3(0.0, 0.0, -epaisseur));
geometry.vertices.push(new THREE.Vector3(longueurTotalFacteur, largeur, -epaisseur));
geometry.vertices.push(new THREE.Vector3(0.0, largeur, -epaisseur));
geometry.faces.push(new THREE.Face3(0, 1, 2)); // Dessus
geometry.faces.push(new THREE.Face3(5, 4, 3)); // Dessous
geometry.faces.push(new THREE.Face3(3, 1, 0)); // Côté long
geometry.faces.push(new THREE.Face3(4, 1, 3)); // Côté long
geometry.faces.push(new THREE.Face3(4, 2, 1)); // Côté court
geometry.faces.push(new THREE.Face3(5, 2, 4)); // Côté court
geometry.faces.push(new THREE.Face3(5, 0, 2)); // Côté moyen
geometry.faces.push(new THREE.Face3(3, 0, 5)); // Côté moyen

assignUVs(geometry);
... (snipped)...
function assignUVs(geometry) {
    geometry.faceVertexUvs[0] = [];
    geometry.faces.forEach(function(face) {
        var components = ['x', 'y', 'z'].sort(function(a, b) {
            return Math.abs(face.normal[a]) > Math.abs(face.normal[b]);
        });

        var v1 = geometry.vertices[face.a];
        var v2 = geometry.vertices[face.b];
        var v3 = geometry.vertices[face.c];

        geometry.faceVertexUvs[0].push([
            new THREE.Vector2(v1[components[0]], v1[components[1]]),
            new THREE.Vector2(v2[components[0]], v2[components[1]]),
            new THREE.Vector2(v3[components[0]], v3[components[1]])
        ]);
    });
    geometry.uvsNeedUpdate = true;
}

我得到的是：

---

你不能这样做：

var material=new THREE.MeshBasicMaterial（{map:new THREE.TextureLoader（）.load（纹理），overdraw:true}）

纹理加载是一个异步过程。您需要在

onLoad

回调中应用纹理。请参阅

例如：

var material = new THREE.MeshBasicMaterial( { overdraw: true } );
var url = //your texture path...
var onLoad = function(texture){
    material.map = texture;
    material.needsUpdate = true;
}
var loader = new THREE.TextureLoader();
loader.load(url, onLoad);

---

更新 当你计算你的紫外线时，你需要做一些偏移和范围的事情。检查来自的计算机；您可能需要对楼梯几何体进行一些更改

function computeUVs(geometry) {

  geometry.computeBoundingBox();

  var max = geometry.boundingBox.max,
      min = geometry.boundingBox.min;
  var offset = new THREE.Vector2(0 - min.x, 0 - min.y);
  var range = new THREE.Vector2(max.x - min.x, max.y - min.y);
  var faces = geometry.faces;
  var vertices = geometry.vertices;

  geometry.faceVertexUvs[0] = [];

  for (var i = 0, il = faces.length; i < il; i++) {

    var v1 = vertices[faces[i].a],
        v2 = vertices[faces[i].b],
        v3 = vertices[faces[i].c];

    geometry.faceVertexUvs[0].push([
      new THREE.Vector2((v1.x + offset.x) / range.x, (v1.y + offset.y) / range.y),
      new THREE.Vector2((v2.x + offset.x) / range.x, (v2.y + offset.y) / range.y),
      new THREE.Vector2((v3.x + offset.x) / range.x, (v3.y + offset.y) / range.y)
    ]);
  }
  geometry.uvsNeedUpdate = true;
}

函数计算机（几何）{
geometry.computeBoundingBox（）；
var max=geometry.boundingBox.max，
min=geometry.boundingBox.min；
var偏移=新的三个矢量2（0-min.x，0-min.y）；
var范围=新的三个矢量2（最大x-最小x，最大y-最小y）；
var faces=geometry.faces；
var顶点=geometry.vertices；
geometry.faceVertexUvs[0]=[]；
对于（var i=0，il=faces.length；i

---

此代码基于。

我用您的答案更新了代码，但没有任何更改。var material1=新的三个.MeshBasicMaterial（）；var geometry=new THREE.geometry（）；//几何体设置向量（几何体）；var onLoad=function（_texture）{material1.map=_texture；material1.needsUpdate=true；}；geometry.userData=modele；//留着以后用。网格[no]=新的三个网格（几何体、材料1）；添加组（网格[编号]）；var loader=新的3.TextureLoader；加载（纹理，加载）@Wilt

TextureLoader.load

函数返回纹理对象。异步部分位于更新纹理的

THREE.ImageLoader

中的

TextureLoader.load

函数中。您发布并说的代码不起作用，实际上起作用。不过，我不确定这样做的含义way@MartinPineault我更新了我的答案。。。我只是引用了不起作用的东西。你应该仔细检查一些例子。加载纹理并不复杂，只要你遵循文档…@2pha我发布了“你不能这样做”：D我现在格式化为引号；）并添加了一个示例。。。