Three.js 创建自定义 Mesh 失败答案

【问题标题】：Three.js creating a custom Mesh failsThree.js 创建自定义 Mesh 失败
【发布时间】：2015-07-21 07:33:52
【问题描述】：

我希望在 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);
}

【问题讨论】：

也许有些东西超出了数组的范围。我猜只有 12 个顶点。所以12 会出错

标签： three.js mesh

【解决方案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

【讨论】：