Après avoir défini les sommets sur les objets THREE.Geometry, THREE.Shape.Utils.triangulateShape échoue avec TypeError

Question

J'ai créé un jeu à partir de THREE.JS et Physijs. J'ai fait une fonction appelée addBlock2 qui ajoute une pyramide triangulaire à la scène. Il fixe les sommets appropriés, mais quand il s'agit de triangulateShape il échoue avec l'erreur suivante:

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 est la ligne « triangulateShape ».

Voici le code:

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 
} 

Answer 1

Je l'ai fixé. Je devais utiliser new THREE.Vector3 au lieu de THREE.Vector3. Je n'ai pas pu obtenir triangulateShape pour obtenir ce que je voulais, donc j'ai mis les visages manuellement. Voici le nouveau code:

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 
}