Javascript Three.js平面几何中的多种材质

我尝试使用一个平面来显示多个材质。我目前正在使用多重材质和我计划在其内部使用的材质（纹理）

我所面临的问题是，我使用的材料似乎在整个平面上被分割为每个面的小块。然而，我希望有一个覆盖1/n数量的平面/网格的材质

我的当前代码（简称）：

var splitX=2；
var-splitY=2；
变量几何=新的三个平面几何（800、800、splitX、splitY）；
var材料=[
新的三网格基本材料({
贴图：预加载纹理…，边：三。双面
}),
新的三网格基本材料({
颜色：0xff0000，侧面：三。双面
})
];
//将平面内的单个正方形设置为所需的纹理材质
geometry.faces[0]。materialIndex=0；
geometry.faces[1]。materialIndex=0；
//将平面内的其他正方形设置为使用彩色材质
对于（变量i=1；i

输出：

---

我标记了纹理的每个角，以查看它是否会在我指定的两个面中显示整个纹理，但它没有。如果您能帮助解决此问题，我们将不胜感激！：）

你能简单地将平面分割成n个部分吗？@PatriciaBeier我可以创建一个几何体来分割平面，但我希望纹理完全位于平面的一部分，而不是整个平面。这取决于你的需要，但一个选项可能是在添加到单个材质之前将纹理组合到画布中。示例：将两个图像合并到一个纹理中，并将其添加到一个材质。这是否有帮助？您可以使用以下模式：

texture.wrapps=texture.wrapT=THREE.RepeatWrapping；纹理偏移设置（0,0）；纹理。重复。设置（2，2）

你可以简单地将平面拆分为n个部分吗？@PatriciaBeier我可以创建一个几何体来拆分平面，但我希望纹理完全位于平面的一部分，而不是整个平面。这取决于你的需要，但一个选项可能是在添加到单个材质之前将纹理组合到画布中。示例：将两个图像合并到一个纹理中，并将其添加到一个材质。这是否有帮助？您可以使用以下模式：

texture.wrapps=texture.wrapT=THREE.RepeatWrapping；纹理偏移设置（0,0）；纹理。重复。设置（2，2）
var splitX = 2;
var splitY = 2;
var geometry = new THREE.PlaneGeometry(800, 800, splitX, splitY);
var materials = [
    new THREE.MeshBasicMaterial({
        map: preloaded texture..., side: THREE.DoubleSide
    }),
    new THREE.MeshBasicMaterial({
        color: 0xff0000, side: THREE.DoubleSide
    })
];

// set a single square inside the plane to the desired textured material
geometry.faces[0].materialIndex = 0;
geometry.faces[1].materialIndex = 0;

// set the other squares inside the plane to use the coloured material
for(var i = 1; i < geometry.faces.length / 2; i++) {
    geometry.faces[i * 2].materialIndex = 1;
    geometry.faces[i * 2 + 1].materialIndex = 1;    
}

var mesh = new THREE.Mesh(geometry, new THREE.MultiMaterial(materials));
scene.add(mesh);