javascript - Threejs 使用顶点自定义 3D 几何

Question

我正在尝试使用顶点制作圆柱体表面的四分之一(仅长表面积而不是侧面)来制作自定义几何形状。我尝试制作一个四边形列表，但此代码不起作用。 http://jsfiddle.net/R7pQB/32/

for(i = 90; i > 0; i -= 2 ){
    geometry.vertices.push( new THREE.Vector3( 0, quad1_y[i], quad1_z[i]) );
    geometry.vertices.push( new THREE.Vector3( L, quad1_y[i], quad1_z[i]) );
    geometry.vertices.push( new THREE.Vector3( L, quad1_y[i - 1], quad1_z[i - 1]) );
    geometry.vertices.push( new THREE.Vector3( 0, quad1_y[i - 1],quad1_z[i - 1]) );
    geometry.faces.push( new THREE.Face4(0,1,2,3) );
}

Answer 1

正如 @newvalue 指出的那样，您没有增加面索引。您正在将顶点插入网格。接下来你需要将它们连接到一张脸上。我发现使用第二个计数器要容易得多，对于 Face4 实例，第二个计数器会增加 4。此外，您可以在同一循环中计算并添加顶点/面，而不是两个循环:

function initGeometry( R , L) {
    var geometry = new THREE.Geometry();

    var deg;
    var f = 0;  
    for( deg = 0; deg < 90; deg++,f += 4 ){
        var ca = deg * 0.01745329252;//cache current angle
        var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle)
        var ccos = Math.cos(ca);//current cos
        var csin = Math.sin(ca);//current sin
        var ncos = Math.cos(na);//next cos
        var nsin = Math.sin(na);//next sin

        var tl = new THREE.Vector3( R * ccos, L * .5, R * csin);//top left = current angle, positive y
        var bl = new THREE.Vector3( R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y
        var tr = new THREE.Vector3( R * ncos, L * .5, R * nsin);//top right = next angle, positive y
        var br = new THREE.Vector3( R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y

        /*
        tl--tr
        |  /|
        | / |
        |/  |
        bl--br
        */
        geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order
        geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter

    }

扩展了一些代码，以便更容易理解顶点之间的连接、它们在 3D 空间中的位置，以及它们在添加面时引用的顶点数组中的位置。

根据您的 fiddle ，这是完整的列表:

var renderer;
var camera;
var scene;
var object;

initConfig();
initGeometry( 50, 300 );
startRender();

function initConfig() {
    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0x000000, 1);
    renderer.setSize(window.innerWidth,window.innerHeight);
    document.body.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 100);
    camera.position.set(0, 0, 100);
    camera.lookAt(scene.position);
    scene.add(camera);
}

function initGeometry( R , L) {
    var geometry = new THREE.Geometry();

    var deg;
    var f = 0;  
    for( deg = 0; deg < 90; deg++,f += 4 ){
        var ca = deg * 0.01745329252;//cache current angle
        var na = (deg+1) * 0.01745329252;//cache next angle (could do with a conditional and storing previous angle)
        var ccos = Math.cos(ca);//current cos
        var csin = Math.sin(ca);//current sin
        var ncos = Math.cos(na);//next cos
        var nsin = Math.sin(na);//next sin

        var tl = new THREE.Vector3( R * ccos, L * .5, R * csin);//top left = current angle, positive y
        var bl = new THREE.Vector3( R * ccos,-L * .5, R * csin);//bottom left = current angle, negative y
        var tr = new THREE.Vector3( R * ncos, L * .5, R * nsin);//top right = next angle, positive y
        var br = new THREE.Vector3( R * ncos,-L * .5, R * nsin);//bottom right = next angle, negative y

        /*
        tl--tr
        |  /|
        | / |
        |/  |
        bl--br
        */
        geometry.vertices.push(tl,tr,br,bl);//notice vertices are added in (cw) order
        geometry.faces.push(new THREE.Face4(f,f+1,f+2,f+3));//add the correct face indices, easy with a second counter

    }

    object = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial({color:0x660033,         side:THREE.DoubleSide}));
    object.position.set(0,0,0);
    object.rotation.x = Math.PI * .35;//a bit of rotation to make the structure visible
    object.scale.set(.35,.35,.35);//again, to make things easier to see
    scene.add(object);
}

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

而且你的网格非常密集(半个圆柱体有 90 个面)。您可能想尝试使用更少的线段来绘制网格，这将使您有机会练习顶点/面索引。