Three.js创建自定义网格失败

I'm looking to create a custom mesh of a d10 in three.js. I think I've got most of it set up correctly (creating vertices, tying vertices to faces), but when I attempt to computeFaceNormals() I'm greeted with an uncaught type error (cannot read property 'x' of undefined). Code is below:

我想在three.js中创建一个d10的自定义网格。我认为我已经正确设置了它的大部分(创建顶点,将顶点绑定到面),但是当我尝试computeFaceNormals()时,我遇到了一个未捕获的类型错误(无法读取未定义的属性'x')。代码如下:

function newDie10(){
    var geom = new THREE.Geometry();

//Add the top & bottom vertices of the die

    geom.vertices.push(new THREE.Vector3(0,0,1));
    geom.vertices.push(new THREE.Vector3(0,0,-1));

    var z = .1;

//Add the outer rim of vertices
//half above the midline and half below

    for(var angle=0; angle <360; angle+=36){
        var vert = new THREE.Vector3(Math.cos(angle),Math.sin(angle),z);
        geom.vertices.push(vert);
        console.log(vert.x," ",vert.y," ",vert.z);
        z = z*-1;
    }

//Each face is split into two triangles
//final, combined face is diamond-shaped
    geom.faces.push(new THREE.Face3(0,2,4));    //1
    geom.faces.push(new THREE.Face3(2,3,4));    //1

    geom.faces.push(new THREE.Face3(0,4,6));    //2
    geom.faces.push(new THREE.Face3(4,5,6));    //2

// Some similar code omitted for readability

    geom.faces.push(new THREE.Face3(1,9,11));   //9
    geom.faces.push(new THREE.Face3(9,10,11));  //9

    geom.faces.push(new THREE.Face3(1,11,3));   //0
    geom.faces.push(new THREE.Face3(11,12,3));  //0

//The error occurs here
    geom.computeFaceNormals();

    return new Physijs.ConvexMesh(geom, new Physijs.createMaterial(new THREE.MeshPhongMaterial({color: 0x005588}), .5, .3), 1);
}

1 个解决方案

#1

You are making two mistakes:

你犯了两个错误:

First, Math.cos and Math.sin takes radians as argument, not 360-degrees angles. The solution is to convert angle to radians:

首先,Math.cos和Math.sin将弧度视为参数,而不是360度角。解决方案是将角度转换为弧度:

var angleInRadians = angle / 180 * Math.PI;
var vert = new THREE.Vector3(Math.cos(angleInRadians), 
Math.sin(angleInRadians), z);

Also, the vertex indices are wrong in the last face. The index 12 does not exist as the vertex indices are zero based.

此外,顶点索引在最后一个面上是错误的。索引12不存在,因为顶点索引是基于零的。

geom.faces.push(new THREE.Face3(11,12,3));  // These are wrong

I have tested your code, and these are the right indices:

我测试了你的代码,这些是正确的索引:

geom.faces.push(new THREE.Face3(11,2,3));  // These are right

#1