在 THREE.Geometry 对象上设置顶点后，THREE.Shape.Utils.triangulateShape 失败并显示 TypeError答案

【问题标题】：After setting vertices on THREE.Geometry objects, THREE.Shape.Utils.triangulateShape fails with TypeError在 THREE.Geometry 对象上设置顶点后，THREE.Shape.Utils.triangulateShape 失败并显示 TypeError
【发布时间】：2015-10-07 10:12:22
【问题描述】：

我创建了一个由 THREE.JS 和 Physijs 组成的游戏。我制作了一个名为 addBlock2 的函数，它在场景中添加了一个三角金字塔。它设置了适当的顶点，但是当涉及到 triangulateShape 时，它会失败并出现以下错误：

Uncaught TypeError: Cannot read property 'x' of undefined

THREE.Shape.Utils.triangulateShape  @   three.min.js:680
Game.addBlock2          @   game.js:210
Game.update             @   game.js:271
(anonymous function)    @   game.js:284
onAnimationFrame        @   VM3973:49
(anonymous function)    @   VM3973:18

game.js:210 是“triangulateShape”线。

代码如下：

Game.prototype.addBlock2 = function(x,y,z) {
    var geometry = new THREE.Geometry();
    geometry.vertices = [
        THREE.Vector3(0,0,0),
        THREE.Vector3(0,200,-100),
        THREE.Vector3(100,200,100),
        THREE.Vector3(-100,200,100)
    ]
    var triangles = THREE.Shape.Utils.triangulateShape(geometry.vertices, []);
    for (i in triangles){
        geometry.faces[geometry.faces.length] = new THREE.Face3(triangles[i][0], triangles[i][1], triangles[i][2])
    }
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    var material = Physijs.createMaterial(new THREE.MeshPhongMaterial({color: 0xFFFF00}),0.3,0.8);
    try {
        var mesh = new Physijs.ConvexMesh(geometry,material);
    }
    catch (e) {
        console.log(e,geometry,material)
        return
    }
    mesh.position.x = x || 0
    mesh.position.y = y || 0
    mesh.position.z = z || 0
    mesh.__dirtyPosition = true
    mesh.name = "block."+(x||0)+","+(y||0)+","+(z||0)
    mesh.receiveShadow = true
    this.scene.add(mesh);
    this.blocks[this.blocks.length] = mesh
}

【问题讨论】：

只是一个猜测，如果你想三角化Shape，也许你的坐标应该是 2d，因为“THREE.Shape 定义了一个任意的 2d 形状平面......”
我应该如何为 3d 对象使用 2d 坐标？

标签： javascript 3d three.js physijs

【解决方案1】：

我修好了。我应该使用new THREE.Vector3 而不是THREE.Vector3。我无法让 triangulateShape 得到我想要的，所以我手动设置了面。这是新代码：

Game.prototype.addBlock2 = function(x,y,z) {
    var geometry = new THREE.Geometry();
    geometry.vertices = [
        new THREE.Vector3(0,0,0),
        new THREE.Vector3(0,200,-100),
        new THREE.Vector3(100,200,100),
        new THREE.Vector3(-100,200,100)
    ]
    geometry.faces = [
        new THREE.Face3(0,1,2),
        new THREE.Face3(0,2,3),
        new THREE.Face3(0,3,1),
        new THREE.Face3(1,2,3)
    ]
    geometry.computeFaceNormals();
    geometry.computeVertexNormals();
    var material = Physijs.createMaterial(new THREE.MeshPhongMaterial({color: 0xFFFF00, side: THREE.DoubleSide}),0.3,0.8);
    try {
        var mesh = new Physijs.ConvexMesh(geometry,material);
    }
    catch (e) {
        console.log(e,geometry,material)
        return
    }
    mesh.position.x = x || 0
    mesh.position.y = y || 0
    mesh.position.z = z || 0
    mesh.__dirtyPosition = true
    mesh.name = "block."+(x||0)+","+(y||0)+","+(z||0)
    mesh.receiveShadow = true
    this.scene.add(mesh);
    this.blocks[this.blocks.length] = mesh
}

【讨论】：