javascript - 自定义的 Three.js 几何体不会显示它的脸

Question

我正在为非正交立方体制作自定义的 Three.js 几何图形。它松散地基于 Three.js 中现有的 Box-geometry，但大大简化了，它仅支持每侧一个段，并且还直接提供其顶点的绝对位置。

我在线框渲染和纹理渲染方面都遇到问题。在线框渲染中，我只能看到六个面之一，如下所示:

这是我用于设置 Material 的片段:

if (woodTexture) {
    texture = THREE.ImageUtils.loadTexture( 'crate.gif' );
    texture.anisotropy = makeRenderer.renderer.getMaxAnisotropy();
    material = new THREE.MeshBasicMaterial( { map: texture } );
} else {
    material = new THREE.MeshBasicMaterial( { color: color, wireframe: true, side: THREE.DoubleSide } );
}

我确信 crate.gif 的路径是有效的，因为它适用于盒子几何形状。

这是我错误的几何形状。 “quadruplets”数组包含六个数组，每个数组有四个 Vector3 实例。每个内部数组都描绘了立方体的一侧。

THREE.Box3Geometry = function (quadruplets, debug) {

THREE.Geometry.call(this);

var constructee = this;  // constructee = the instance currently being constructed by the Box3Geometry constructor

buildPlane(quadruplets[0], 0, debug); // px
buildPlane(quadruplets[1], 1); // nx
buildPlane(quadruplets[2], 2); // py
buildPlane(quadruplets[3], 3); // ny
buildPlane(quadruplets[4], 4); // pz
buildPlane(quadruplets[5], 5); // nz

function buildPlane(quadruplet, materialIndex, debug) {

    // populate the vertex array:
    constructee.vertices.push(quadruplet[0]);
    constructee.vertices.push(quadruplet[1]);
    constructee.vertices.push(quadruplet[2]);
    constructee.vertices.push(quadruplet[3]);

    // construct faceVertexUvs:
    var uva = new THREE.Vector2(0, 1);
    var uvb = new THREE.Vector2(0, 0);
    var uvc = new THREE.Vector2(1, 0);
    var uvd = new THREE.Vector2(1, 1);

    // construct faces:
    var a = 0;  // vertex: u:50, v:50
    var b = 2;  // vertex: u:50, v:-50
    var c = 3;  // vertex: u:-50, v:-50
    var d = 1;  // vertex: u:-50, v:50

    // construct normal:
    var pv0 = quadruplet[1].clone().sub(quadruplet[0]);  // pv = plane vector
    var pv1 = quadruplet[2].clone().sub(quadruplet[0]);
    normal = new THREE.Vector3(0,0,0).crossVectors(pv0, pv1).normalize();;

    var face1 = new THREE.Face3(a, b, d);
    face1.normal.copy(normal);
    face1.vertexNormals.push(normal.clone(), normal.clone(), normal.clone());
    face1.materialIndex = materialIndex;

    constructee.faces.push(face1);
    constructee.faceVertexUvs[ 0 ].push([ uva, uvb, uvd ]);

    var face2 = new THREE.Face3(b, c, d);
    face2.normal.copy(normal);
    face2.vertexNormals.push(normal.clone(), normal.clone(), normal.clone());
    face2.materialIndex = materialIndex;

    constructee.faces.push(face2);
    constructee.faceVertexUvs[ 0 ].push([ uvb.clone(), uvc, uvd.clone() ]);

}
this.mergeVertices();

};

THREE.Box3Geometry.prototype = Object.create(THREE.Geometry.prototype);

和this is the Box geometry from which I was "inspired" .

Answer 1

您构建了一个很好的顶点数组，但为每个face1/face2组合提供了相同的索引集到该数组中:0、1、2、3。您基本上定义了相同的四边形6次。

您需要做的是保持运行的基础偏移并将其添加到用于定义每个面的顶点索引中。如果您查看 BoxGeometry 示例，您会发现它们正是这样做的。