Sphere Segments

by Paul West

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.124.0/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    overflow: hidden;
    margin: 0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(-30, 60, -120);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var r = 20,
    verticalLines = 32, /* must be divisible by 4! */
    horizontalLines = 16; /* must be divisible by 2! */

var quadSphere_threeQuarters = createQuadSphere(r, 3 * verticalLines / 4, horizontalLines, {
    color: 0x0000ff
}, 0, 3 * Math.PI / 2);
scene.add(quadSphere_threeQuarters);

var quadSphere_oneEighth = createQuadSphere(r, verticalLines / 4, horizontalLines / 2, {
    color: 0xff0000
}, 3 * Math.PI / 2, Math.PI / 2, Math.PI / 2, Math.PI / 2);
quadSphere_oneEighth.position.x += 50;
scene.add(quadSphere_oneEighth);

var quadSphere_threeQuarters_right = createQuadSphere(r, 3 * verticalLines / 4, horizontalLines, {
    color: 0xff00ff
}, 0, 3 * Math.PI / 2);
quadSphere_threeQuarters_right.position.x -= 50;
scene.add(quadSphere_threeQuarters_right);

var quadSphere_oneEighth_right = createQuadSphere(r, verticalLines / 4, horizontalLines / 2, {
    color: 0xff00ff
}, 3 * Math.PI / 2, Math.PI / 2, Math.PI / 2, Math.PI / 2);
quadSphere_oneEighth_right.position.x -= 50;
scene.add(quadSphere_oneEighth_right);



function createQuadSphere(r, widthSegments, heightSegments, atts, phiStart, phiLen, thetaStart, thetaLen) {
    var sphere = new THREE.Group(),
        material = new THREE.LineBasicMaterial(atts);

    if (phiStart === undefined) {
        phiStart = Math.PI / 2;
    }
    if (phiLen === undefined) {
        phiLen = 2 * Math.PI;
    }
    if (thetaStart === undefined) {
        thetaStart = 0;
    }
    if (thetaLen === undefined) {
        thetaLen = Math.PI;
    }

    /* width segments (longitude) */
    for (var phiDelta = phiLen / widthSegments, phi = phiStart, arc...