three.js:face4生成三角形而不是方形

Question

我正在尝试使用tree.js自定义几何生成一个正方形.但这段代码

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

生成三角形可以有人解释为什么会发生吗？

Answer 1

问题出在THREE.Face4上.它已在上一版本中删除.在GitHub Three.js - Wiki - Migration我们可以读到:

r59 - > r60

Face4已删除.使用2 Face3来模拟它.

你看到三角形而不是正方形的原因是:

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

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

};

Answer 2

Three.Face4已弃用.

以下是使用2 Face3制作正方形的方法:

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

Answer 3

其实应该是画一个领结之类的东西。顶点顺序不正确。交换最后两个顶点。