three.js: face4 genera il triangolo anziché il quadrato

Question

sto provando a generare un quadrato con geometria personalizzata tree.js. ma questo codice

var cubeGeo = new THREE.Geometry(); 
cubeGeo.vertices.push(new THREE.Vector3(-25, 25, -25)); 
cubeGeo.vertices.push(new THREE.Vector3( 25, 25, -25)); 
cubeGeo.vertices.push(new THREE.Vector3(-25, -25, -25)); 
cubeGeo.vertices.push(new THREE.Vector3( 25, -25, -25)); 
cubeGeo.faces.push(new THREE.Face4(0, 1, 2, 3, new THREE.Vector3(0, 0, 1), 0xffffff, 0)); 

    var cube = new THREE.Mesh(
    cubeGeo, 
    //new THREE.CubeGeometry(50, 50, 50), 
    new THREE.MeshPhongMaterial({color: 0x696969, emissive: 0x696969, specular:0x696969, shininess: 15}) 
); 

genera triangolo qualcuno può spiegare perché succede?

Answer 1

In realtà dovrebbe disegnare qualcosa come un papillon. L'ordine dei vertici non è corretto. Scambia gli ultimi due vertici.

Answer 2

Il problema è con THREE.Face4. È stato rimosso nell'ultima versione. In GitHub Three.js - Wiki - Migration possiamo leggere:

R59 -> R60

Face4 viene rimosso. Usa 2 Face3 per emularlo.

E il motivo per cui si vede un triangolo invece di un quadrato è che:

THREE.Face4 = function (a, b, c, d, normal, color, materialIndex) { 

    return new THREE.Face3(a, b, c, normal, color, materialIndex); 

}; 

Answer 3

Three.Face4 è deprecato.

Ecco come si usa 2 Face3 per fare un quadrato:

function drawSquare(x1, y1, x2, y2) { 

    var square = new THREE.Geometry(); 

    //set 4 points 
    square.vertices.push(new THREE.Vector3(x1,y2,0)); 
    square.vertices.push(new THREE.Vector3(x1,y1,0)); 
    square.vertices.push(new THREE.Vector3(x2,y1,0)); 
    square.vertices.push(new THREE.Vector3(x2,y2,0)); 

    //push 1 triangle 
    square.faces.push(new THREE.Face3(0,1,2)); 

    //push another triangle 
    square.faces.push(new THREE.Face3(0,3,2)); 

    //return the square object with BOTH faces 
    return square; 
}