BufferGeometry不可见

Question

我使用BufferGeometry已经有一段时间了，我觉得我对它相当熟悉。现在，我试图创建一个简单的正方形平面，它没有做任何事情--没有可见的平面，没有错误，也没有我能看到的明显的问题。我在这里看到过其他类似的帖子，但是没有一个解决方案是成功的。

当我检查现场，网格在那里，它有一个合适的材料，它的几何形状似乎是正确的设置。但我只得到了一个黑色的视野。我一定是错过了一个痛苦的明显/简单的步骤，但现在它正在回避我。我做错了什么？

小提琴+代码：http://jsfiddle.net/TheJim01/kafybhge/34/

// BufferGeometry Tester

var hostDiv, scene, renderer, camera, root, controls, light;

var WIDTH = 500;//window.innerWidth,
    HEIGHT = 500;//window.innerHeight,
    FOV = 35,
    NEAR = 1,
    FAR = 1000;

function createBufferGeometryMesh(){
    var geo = new THREE.BufferGeometry();

    var vertices = 
        [
            -10.,  10., 0., // 0 - top left
             10.,  10., 0., // 1 - top right
             10., -10., 0., // 2 - bottom right
            -10., -10., 0.  // 3 - bottom left
        ],
    normals =
        [
            0., 0., 1.,
            0., 0., 1.,
            0., 0., 1.,
            0., 0., 1.
        ],
    indices = [ 0, 1, 2, 0, 2, 3 ];

    geo.addAttribute( 'position', new THREE.BufferAttribute( new Float32Array( vertices ), 3 ) );
    geo.addAttribute( 'normal', new THREE.BufferAttribute( new Float32Array( normals ), 3 ) );
    geo.addAttribute( 'index', new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );

    var mat = new THREE.MeshPhongMaterial( {
                    color: 0xffffff,
                    ambient: 0xffffff,
                    specular: 0xffffff,
                    shininess: 50,
                    side: THREE.DoubleSide
                } );

    var msh = new THREE.Mesh(geo, mat);

    return msh;
}

function init() {
    hostDiv = document.createElement('div');
    document.body.appendChild(hostDiv);

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(WIDTH, HEIGHT);
    hostDiv.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(FOV, WIDTH / HEIGHT, NEAR, FAR);
    camera.position.z = 50;

    controls = new THREE.TrackballControls(camera, renderer.domElement);

    light = new THREE.PointLight(0xffffff, 1, 1000);
    light.position.copy(camera.position);

    scene = new THREE.Scene();
    scene.add(camera);
    scene.add(light);

    var square = createBufferGeometryMesh();
    scene.add(square);

    animate();
}

function render() {
    renderer.render(scene, camera);
}

function animate() {
    light.position.copy(camera.position);    

    requestAnimationFrame(animate);
    render();
    controls.update();
}

init();

为了表明我对BufferGeometry并不陌生，下面是我以前做过的一些事情，如果我将它插入到我的代码中，而不是上面的createBufferGeometryMesh()，它就能工作。我尝试过像下面这样定义缓冲区(甚至是显式的)，但是它没有改变任何东西。

function colorCube(scale){
    scale = scale || 1;
    var geo = new THREE.BufferGeometry();

    var positions = new Float32Array( 72 );
    var normals = new Float32Array( 72 );
    var colors = new Float32Array( 72 );
    var indices = new Uint16Array( 36 );

    var face = 0, idx = 0, vert = 0;
    var x = 0, r = 0, y = 1, g = 1, z = 2, b = 2;

    // front face (RED)
    positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = 1.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 0.;
    vert += 3;

    indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2;
    indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3;
    idx += 6;
    ++face;

    // back face (BLUE)
    positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.;
    colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.;
    colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.;
    colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = 0.; normals[vert + z] = -1.;
    colors[vert + r] = 0.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2;
    indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3;
    idx += 6;
    ++face;

    // right face (GREEN)
    positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2;
    indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3;
    idx += 6;
    ++face;

    // left face (MAGENTA)
    positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5;
    normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5;
    normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5;
    normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5;
    normals[vert + x] = -1.; normals[vert + y] = 0.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 0.; colors[vert + b] = 1.;
    vert += 3;

    indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2;
    indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3;
    idx += 6;
    ++face;

    // top face (CYAN)
    positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = 0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = 1.; normals[vert + z] = 0.;
    colors[vert + r] = 0.; colors[vert + g] = 1.; colors[vert + b] = 1.;
    vert += 3;

    indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2;
    indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3;
    idx += 6;
    ++face;

    // bottom face (YELLOW)
    positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = 0.5;
    normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = -0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    positions[vert + x] = 0.5; positions[vert + y] = -0.5; positions[vert + z] = -0.5;
    normals[vert + x] = 0.; normals[vert + y] = -1.; normals[vert + z] = 0.;
    colors[vert + r] = 1.; colors[vert + g] = 1.; colors[vert + b] = 0.;
    vert += 3;

    indices[idx + 0] = (face * 4) + 0; indices[idx + 1] = (face * 4) + 1; indices[idx + 2] = (face * 4) + 2;
    indices[idx + 3] = (face * 4) + 0; indices[idx + 4] = (face * 4) + 2; indices[idx + 5] = (face * 4) + 3;
    idx += 6;
    ++face;

    geo.addAttribute( 'index', new THREE.BufferAttribute( indices, 1 ) );
    geo.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    geo.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
    geo.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

    var mat = new THREE.MeshPhongMaterial( {
                    color: 0xffffff,
                    ambient: 0xffffff,
                    specular: 0xffffff,
                    shininess: 50,
                    side: THREE.DoubleSide,
                    vertexColors: THREE.VertexColors
                } );    

    var msh = new THREE.Mesh(geo, mat);
    msh.scale.multiplyScalar(scale);

    return msh;
}

Answer 1

由于WestLangley是谦虚的，下面是我上面代码中的错误所在。

我主要的心理障碍是，我对法线在画面孔方面的作用有一个误解。我开始思考，顶点法线可以定义人脸的方向，但这根本不是真的。顶点法线用于计算表面的光照，与定义面方向无关。这是顶点顺序，定义了脸的方向(脸法线)。另外，当three.js使用右侧系统时，我使用的是左手系统。

在我的原始代码中，我有：

indices = [ 0, 1, 2, 0, 2, 3 ];

要把脸画在正确的方向上，应该是：

indices = [ 0, 2, 1, 0, 3, 2 ];

这些差异是微妙的，但在我的例子中，它们分别指的是在-Z和+Z方向上正常指向的脸之间的差异。这些面孔以错误的方式接受光线。明显的法线甚至没有发挥作用，因为表面没有反射任何光。索引使用右手系统固定脸的方向。

面对脸的方向问题，我做了一个练习来巩固我的理解，我把我的顶点法线翻转到(再次)指向脸法线的相反方向。正如预期的那样(这次)，广场变成了黑色。即使脸部指向正确的方向，法线基本上告诉GL将光线反射到物体上，将其变成某种黑洞。

我从这个抓取的东西是:脸的方向(脸的法线)是从构成脸的顶点的顺序计算出来的，并使用RHS。顶点法线影响人脸表面的光照，与确定人脸方向无关。