javascript - Three.js 不尊重我的常态

Question

我正在为非正交立方体制作自定义的 Three.js 几何图形。它松散地基于 Three.js 中现有的 Box-geometry，但其顶点的绝对位置直接提供给它。

我有一个问题， Three.js 似乎不尊重我传递到几何体表面的法线。当我在将法线分配给面部之前对法线进行 console.log 时，它们看起来很好:

normal: Object { x=0, y=0, z=-1, more...}
normal: Object { x=0, y=0, z=1, more...}

这些法线正好适合直立方体的上边和下边。然而，从这个屏幕截图中可以看出(如果我适当倾斜了相机)，第一个法线似乎已应用于两个表面:

这是一个 200x200x200 立方体的两条边，以原点为中心且与所有轴正交。白线表示 z 轴。

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

THREE.Box3Geometry = function (quadruplets, normals, debug) {

THREE.Geometry.call(this);

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

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

function buildPlane(quadruplet, normal, materialIndex, debug) {


    var offset = constructee.vertices.length;

    // 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);  //(u:0, v:1), uvb: (u:0, v:0) uvc: (u:1, v:0), uvd: (u:1, v: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

    if (debug) { console.log("normal: ", normal); }

    // make a face:
    var face1 = new THREE.Face3(a + offset, b + offset, d + offset);
    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 ]);

    // make another face:
    var face2 = new THREE.Face3(b + offset, c + offset, d + offset);
    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);

这是我的几何测试实例:

var quadruplets = [
    [new THREE.Vector3(-100, -100, -100), new THREE.Vector3(100, -100, -100), new THREE.Vector3(-100, 100, -100), new THREE.Vector3(100, 100, -100)],
    [new THREE.Vector3(-100, -100,  100), new THREE.Vector3(100, -100,  100), new THREE.Vector3(-100, 100,  100), new THREE.Vector3(100, 100,  100)],
    [new THREE.Vector3(-100, -100, -100), new THREE.Vector3(100, -100, -100), new THREE.Vector3(-100, -100, 100), new THREE.Vector3(100, -100, 100)],
    [new THREE.Vector3(-100,  100, -100), new THREE.Vector3(100,  100, -100), new THREE.Vector3(-100,  100, 100), new THREE.Vector3(100,  100, 100)],
    [new THREE.Vector3(-100, -100, -100), new THREE.Vector3(-100, 100, -100), new THREE.Vector3(-100, -100, 100), new THREE.Vector3(-100, 100, 100)],
    [new THREE.Vector3( 100, -100, -100), new THREE.Vector3( 100, 100, -100), new THREE.Vector3( 100, -100, 100), new THREE.Vector3( 100, 100, 100)]
];

var normals = [
    new THREE.Vector3( 0,  0, -1),
    new THREE.Vector3( 0,  0,  1),
    new THREE.Vector3( 0, -1,  0),
    new THREE.Vector3( 0,  1,  0),
    new THREE.Vector3(-1,  0,  0),
    new THREE.Vector3( 1,  0,  0)
];

var myBox3Geometry = new THREE.Box3Geometry(
    quadruplets,
    normals,
    true
);

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

Answer 1

Three.js 有一些非常好的 Helper 函数:

THREE.BoxHelper( mesh )
THREE.FaceNormalsHelper( mesh )
THREE.VertexNormalsHelper( mesh )
THREE.WireframeHelper( mesh )

仅举几例。

看起来您正在设置顶点法线，所以为什么不使用 THREE.VertexNormalsHelper(mesh) 来验证 Three.js 是否使用您期望的内容。

注意:您的变量 normal 在代码中不可见。