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

【问题标题】：three.js : face4 generates triangle instead of squarethree.js : face4 生成三角形而不是正方形
【发布时间】：2013-05-06 02:01:57
【问题描述】：

我正在尝试使用 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})
);

生成三角形谁能解释一下为什么会这样？

【问题讨论】：

标签： javascript geometry three.js

【解决方案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 );

};

【讨论】：

【解决方案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;
}

【讨论】：

这很有趣，但没有回答问题，关于Face4。
@ArtjomB。 Face4 不再受支持。

【解决方案3】：

实际上它应该画一个蝴蝶结之类的东西。顶点顺序不正确。交换最后两个顶点。

【讨论】：

交换了，但现在对我来说什么都没有
codepen.io/usf/pen/LaDwh - 有我的完整代码，我按原始顺序留下了顶点
刚刚做了这个小提琴jsfiddle.net/2yped。在您的上述更新中，它可能是您正在查看的一侧，因此请使用side: THREE.DoubleSide 来查看它。
是的，但通常你不应该使用它。这是 GPU 的开销。