自定义three.js几何体不会显示它的面孔

Question

我正在为非正交立方体制作自定义的three.js几何体。它松散地基于three.js中现有的Box几何，但是大大简化了它只支持每边一个段并且其顶点的绝对位置直接馈送到它。

线框渲染和纹理渲染都有问题。在线框渲染中，我只能看到六个边中的一个，如下所示：

这是我用来设置素材的片段：

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的路径是有效的，因为它适用于Box几何。

这是我错误的几何学。 ＆＃39;四胞胎＆＃39;数组包含六个数组，每个数组包含四个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。你基本上定义了相同的四次顶点。

您需要做的是保持一个正在运行的基础偏移并将其添加到用于定义每个面的顶点索引。如果你看一下你的BoxGeometry例子，你就会完全相同。