Three.js 不带三角网格的三点球面反射法

我一直在谷歌上搜索这个问题，但没找到多少

基本上，我只想要一个有四边形的球体——也就是说，网格中没有三角剖分。事实上，如果可能的话，我希望它只有垂直线，但我认为这是不可能的，但我绝对不想要对角线

我看到了

EdgeHelper

，但我认为这不是我想要的关于创建球体的内容

我不认为这是复制品，但如果是，请给我指出正确的地方；谢谢。

我使用

THREE.CircleGeometry（）

（但不是缓冲区）从头制作了这种可定制的解决方案：

示例

我使用

THREE.CircleGeometry（）

（但不是缓冲区）从头制作了这种可定制的解决方案：

示例

查看以了解我最终如何创建自己的四元组。具有φ和θ起始值和长度值的球体，以便可以创建部分球体。感谢监狱长849，他回答了上面/下面的问题

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
相机。位置。设置（-30,60，-120）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var r=20，
垂直线=32，/*必须能被4整除*/
水平线=16；/*必须能被2整除*/
var quadSphere_四分之三=创建四球（r，3*垂直线/4，水平线{
颜色：0x0000ff
}，0,3*Math.PI/2）；
场景。添加（四分之三）；
var quadSphere_onethirth=createQuadSphere（r，垂直线/4，水平线/2{
颜色：0xff0000
}，3*Math.PI/2，Math.PI/2，Math.PI/2，Math.PI/2）；
四球面_八分之一位置x+=50；
场景。添加（四球体_八分之一）；
var quadSphere\u四分之三\u right=createQuadSphere（r，3*垂直线/4，水平线{
颜色：0xff00ff
}，0,3*Math.PI/2）；
四球体四分之三右位置x-=50；
场景。添加（四分之三的四分之一的四分之一的四分之三的四分之一的右）；
var quadSphere\u八分之一\u right=createQuadSphere（r，垂直线/4，水平线/2{
颜色：0xff00ff
}，3*Math.PI/2，Math.PI/2，Math.PI/2，Math.PI/2）；
四球体右八分之一位置x-=50；
场景。添加（四球体，右1/8）；
函数createQuadSphere（r、宽度段、高度段、atts、phiStart、phiLen、theStart、thetaLen）{
var sphere=new THREE.Group（），
材料=新的三线基本材料（附件）；
如果（phiStart==未定义）{
phiStart=Math.PI/2；
}
if（phiLen==未定义）{
phiLen=2*Math.PI；
}
if（thestatart==未定义）{
thetaStart=0；
}
if（thetaLen==未定义）{
thetaLen=Math.PI；
}
/*宽度段（经度）*/
对于（var phiDelta=phiLen/widthSegments，phi=phiStart，arc=createverticalc（r，heightSegments，thestart+Math.PI/2，thetaLen）；phi=2*Math.PI）{
geometry.vertices.push（geometry.vertices[0].clone（））；
}
返回几何；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：0；
}

看看我是如何创建自己的四元组的。具有φ和θ起始值和长度值的球体，以便可以创建部分球体。感谢监狱长849，他回答了上面/下面的问题

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
相机。位置。设置（-30,60，-120）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
var r=20，
垂直线=32，/*必须能被4整除*/
水平线=16；/*必须能被2整除*/
var quadSphere_四分之三=创建四球（r，3*垂直线/4，水平线{
颜色：0x0000ff
}，0,3*Math.PI/2）；
场景。添加（四分之三）；
var quadSphere_onethirth=createQuadSphere（r，垂直线/4，水平线/2{
颜色：0xff0000
}，3*Math.PI/2，Math.PI/2，Math.PI/2，Math.PI/2）；
四球面_八分之一位置x+=50；
场景。添加（四球体_八分之一）；
var quadSphere\u四分之三\u right=createQuadSphere（r，3*垂直线/4，水平线{
颜色：0xff00ff
}，0,3*Math.PI/2）；
四球体四分之三右位置x-=50；
场景。添加（四分之三的四分之一的四分之一的四分之三的四分之一的右）；
var quadSphere\u八分之一\u right=createQuadSphere（r，垂直线/4，水平线/2{
颜色：0xff00ff
}，3*Math.PI/2，Math.PI/2，Math.PI/2，Math.PI/2）；
四球体右八分之一位置x-=50；
场景。添加（四球体，右1/8）；
函数createQuadSphere（r、宽度段、高度段、atts、phiStart、phiLen、theStart、thetaLen）{
var sphere=new THREE.Group（），
材料=新的三线基本材料（附件）；
如果（phiStart==未定义）{
phiStart=Math.PI/2；
}
if（phiLen==未定义）{
phiLen=2*Math.PI；
}
if（thestatart==未定义）{
thetaStart=0；
}
if（thetaLen==未定义）{
thetaLen=Math.PI；
}
/*宽度段（经度）*/
对于（var phiDelta=phiLen/widthSegments，phi=phiStart，arc=createverticalc（r，heightSegments，thestart+Math.PI/2，thetaLen）；phi=2*Math.PI）{
geometry.vertices.push（geometry.vertices[0].clone（））；
}
返回几何；
}
render（）；
函数render（）{
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}

正文{
溢出：隐藏；
保证金：
function createSphereOfQuadsWireframe(radius, widthSegments, heightSegments, color, showWidthSegments, showHeightSegments) {
  var sphereObj = new THREE.Group();

  if (showWidthSegments) {
    // width segments
    var arcGeom = createArc(radius, heightSegments, false); // as the amount of width segments may be odd, it's better to use half-circles, that's why the third parameter is `false`
    var widthSector = Math.PI * 2 / widthSegments;
    for (var ws = 0; ws < widthSegments; ws++) {
      var arcGeomTmp = arcGeom.clone();
      arcGeomTmp.rotateY(widthSector * ws);
      var arcLine = new THREE.Line(arcGeomTmp, new THREE.LineBasicMaterial({
        color: color
      }));
      sphereObj.add(arcLine);
    }
  }

  if (showHeightSegments) {
    //height segments
    var heightSector = Math.PI / heightSegments;
    for (var hs = 1; hs < heightSegments; hs++) {
      var hRadius = Math.sin(hs * heightSector) * radius;
      var height = Math.cos(hs * heightSector) * radius;
      var arcHeightGeom = createArc(hRadius, widthSegments, true);
      arcHeightGeom.rotateX(Math.PI / 2);
      arcHeightGeom.translate(0, height, 0);
      var arcHeightLine = new THREE.Line(arcHeightGeom, new THREE.LineBasicMaterial({
        color: color
      }));
      sphereObj.add(arcHeightLine);
    }
  }
  return sphereObj;
}

function createArc(radius, segments, full) {
  var geom = new THREE.CircleGeometry(radius, segments, Math.PI / 2, full ? Math.PI * 2 : Math.PI);
  geom.vertices.shift();
  if (full) geom.vertices.push(geom.vertices[0].clone());
  return geom;
}

var fullSphere = createSphereOfQuadsWireframe(20, 32, 16, "yellow", true, true);
scene.add(fullSphere);

var widthOnlySphere = createSphereOfQuadsWireframe(20, 32, 16, "pink", true, false);
widthOnlySphere.position.set(-50, 0, 0);
scene.add(widthOnlySphere);

var heightOnlySphere = createSphereOfQuadsWireframe(20, 32, 16, "aqua", false, true);
heightOnlySphere.position.set(50, 0, 0);
scene.add(heightOnlySphere);