three.js: face4 tạo hình tam giác thay vì hình vuông

Question

Tôi đang cố gắng tạo một hình vuông với Hình học tùy chỉnh tree.js. nhưng mã này

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

tạo ra tam giác ai đó có thể giải thích cho tôi tại sao nó xảy ra?

Answer 1

Thực ra nó sẽ vẽ một thứ gì đó giống như một chiếc nơ. Thứ tự đỉnh không chính xác. Hoán đổi hai đỉnh cuối cùng.

Answer 2

Sự cố xảy ra với THREE.Face4. Nó đã được gỡ bỏ trong phiên bản cuối cùng. Trong GitHub Three.js - Wiki - Migration chúng ta có thể đọc:

r59 -> r60

Face4 được lấy ra. Sử dụng 2 Face3 để mô phỏng nó.

Và lý do tại sao bạn thấy một hình tam giác thay vì một hình vuông là:

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

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

}; 

Answer 3

Three.Face4 bị phản đối.

Đây là cách bạn sử dụng 2 Face3 để làm cho một hình vuông:

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