使用顶点的Threejs自定义3d几何

时间:2013-08-02 12:09:16

标签: javascript three.js

我正在尝试使用顶点制作自定义几何体的四分之一,只有圆柱面的长表面区域。我尝试制作一个四边形列表,但这段代码不起作用。 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) );
}

2 个答案:

答案 0 :(得分:0)

几何体的所有面都有相同的顶点索引?

 geometry.faces.push( new THREE.Face4(0,1,2,3) );

答案 1 :(得分:0)

正如@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空间中的位置,以及它们在添加面时引用它们时顶点数组中的位置。

根据你的小提琴,这里是完整列表:

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个面)。 您可能想尝试使用较少的段来绘制网格,这将使您有机会练习顶点/面索引。