three.js: face4 generuje trójkąt zamiast kwadratu

Question

Próbuję wygenerować kwadrat z niestandardową geometrią tree.js. ale ten kod

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

generuje trójkąt może ktoś mi wyjaśnić dlaczego tak się dzieje?

Answer 1

Właściwie powinien to być rysunek przypominający muszkę. Kolejność wierzchołków jest nieprawidłowa. Zamień dwa ostatnie wierzchołki.

Answer 2

Problem dotyczy THREE.Face4. Został usunięty w ostatniej wersji. W GitHub Three.js - Wiki - Migration możemy przeczytać:

zwrot R59 -> r60

Face4 zostanie usunięty. Użyj 2 Face3, aby emulować.

I dlatego widzisz trójkąt zamiast kwadratu jest to, że:

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

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

}; 

Answer 3

Three.Face4 jest przestarzała.

Oto jak użyć 2 Face3 dokonać Square:

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