Question

我正在玩Three.js。我正在开发一个使用旧版Three.js的项目。我试图用新的库替换旧库（r71）。除纹理贴图外，一切进展顺利。

在旧项目中，我们使用不推荐使用的Face4，并且已在最新版本的Three.js中删除。所以我创建了两个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的纹理映射

1 个答案: