自定义three.js几何图形不会显示其外观

Question

I'm making a custom three.js geometry for non-orthogonal cubes. It is loosely based on the existing Box-geometry in three.js, but greatly simplified insofar that it only supports one segment per side and also has the absolute position of its vertices fed directly to it.

I have problems both in wire frame rendering and texture rendering. In wire frame rendering I only get to see one of the six sides, as can be seen here:

This is the snippet that I use for setting the 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 } );
}

I know for sure the path for crate.gif is valid, as it works for Box geometries.

Here follows my faulty geometry. The 'quadruplets' array contains six arrays with each four Vector3 instances. Each inner array delineates a side of the cube.

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);

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

Answer 1

You build a nice array of vertices, but give every face1/face2 combo the same set of indexes into that array: 0, 1, 2, 3. You essentially define the same quad 6 times.

What you need to do is keep a running base offset and add that to the vertex indices used to define each face. If you look at your BoxGeometry example, you'll that they do exactly that.