Question

我希望在three.js中创建一个d10的自定义网格。我认为我已经正确设置了大部分（创建顶点，将顶点绑定到面），但是当我尝试计算.FaceNormals（）时，我遇到了未被捕获的类型错误（无法读取属性＆＃39） ; x＆＃39;未定义）。代码如下：

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);
}

Answer 1

你犯了两个错误：

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

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

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

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

我已经测试了您的代码，这些是正确的索引：

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

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

1 个答案: