在 Three.js 上从一个 Face4 到两个 Face3 的纹理映射

Question

我在玩Three.js。我正在开发一个使用旧版本 Three.js 的项目。我正在尝试用新库 (r71) 替换旧库。除了纹理映射，一切都很好。

在旧项目中，我们使用已弃用并已在最新版本 Three.js 中删除的 Face4。所以我创建了两个 Face3 而不是一个 Face4。现在的问题是：如何制作一个纹理来覆盖两个 Face3，因为它们就像一个 Face4？

使用 Face4 的旧伪代码

numberOfFaces = 10;

function createMyGeometry(){
var geometry = new THREE.Geometry();
...

for (var i = 0; i < numberOfFaces; i++) {
    var face = new THREE.Face4(v1.index, v2.index, v3.index, v4.index, [v1.clone(), v2.clone(), v3.clone(), v4.clone()]);
    face.centroid.add(v1).add(v2).add(v3).add(v4).divideScalar(4);
    face.normal = face.centroid.clone().normalize();
    face.materialIndex = matIdx;
    geometry.faces.push(face);
    geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone(), uv4.clone()]);
}
...
return geometry;
}

for (var i = 0; i < numberOfFaces; i++) {
var texture = THREE.ImageUtils.loadTexture("MyImage"+ i + '.jpg');
var material  = new THREE.MeshBasicMaterial();  
material.map   = texture;
material.side  = THREE.FrontSide;
materials.push(material);
}
materials = new THREE.MeshFaceMaterial(materials);
myGeometry = new THREE.Mesh(createMyGeometry(), materials);
scene.add(myGeometry);

使用 Face3 的伪代码

numberOfFaces = 10;

function createMyGeometry(){
var geometry = new THREE.Geometry();
...

for (var i = 0; i < numberOfFaces; i++) {
        var face1 = new THREE.Face3(v1.index, v2.index, v3.index, [v1.clone(), v2.clone(), v3.clone()]);
        var face2 = new THREE.Face3(v1.index, v3.index, v4.index, [v1.clone(), v3.clone(), v4.clone()]);
        face1.materialIndex = matIdx;
        face2.materialIndex = matIdx;
        geometry.faces.push(face1);
        geometry.faces.push(face2);
        geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone(), uv4.clone()]);
}
...
return geometry;
}
for (var i = 0; i < numberOfFaces; i++) {
var texture = THREE.ImageUtils.loadTexture("MyImage"+ i + '.jpg');
var material  = new THREE.MeshBasicMaterial();  
material.map   = texture;
material.side  = THREE.FrontSide;
materials.push(material);
}
materials = new THREE.MeshFaceMaterial(materials);
myGeometry = new THREE.Mesh(createMyGeometry(), materials);
scene.add(myGeometry);

Answer 1

您应该对顶点 uv 执行与顶点相同的操作。

例如：

 geometry.faceVertexUvs[0].push([uv1.clone(), uv2.clone(), uv3.clone()]);
 geometry.faceVertexUvs[0].push([uv1.clone(), uv3.clone(), uv4.clone()]);

在 Three.js 上从一个 Face4 到两个 Face3 的纹理映射

Texture mapping from one Face4 to two Face3 on Three.js

three.js

texture-mapping