Sphere

2020-03-26

by kerm1t

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 7.25;
    scene.add(camera);

    var geometry = new THREE.Geometry();

    var PI = 3.1459;
		// (1) how to add geometry,    https://threejs.org/docs/#api/en/core/Geometry
		// (2) how to create a sphere, http://www.songho.ca/opengl/gl_sphere.html
		var radius = 3.0
    var sectorCount = 10;
    var stackCount = 10;

    var sectorStep = 2 * PI / sectorCount;
    var stackStep = PI / stackCount;
		var sectorAngle, stackAngle;

    for(var i = 0; i <= stackCount; ++i) // vertical
    {
        stackAngle = PI / 2 - i * stackStep;        // starting from pi/2 to -pi/2
        var xy = radius * Math.cos(stackAngle);     // r * cos(u)
        var z  = radius * Math.sin(stackAngle);     // r * sin(u)

        // add (sectorCount+1) vertices per stack
        // the first and last vertices have same position and normal, but different tex coords
        for(var j = 0; j <= sectorCount; ++j) // horizontal
        {
            sectorAngle = j * sectorStep;           // starting from 0 to 2pi

            // vertex position (x, y, z)
            var x = xy * Math.cos(sectorAngle);     // r * cos(u) * cos(v)
            var y = xy * Math.sin(sectorAngle);     // r * cos(u) * sin(v)
				    geometry.vertices.push(new THREE.Vector3(x, y, z) );
        }
    }
/*
    for (var i=0;i<100;i+=2)
    {
		    geometry.faces.push(new THREE.Face3(i, i+1, i+2));
    }
*/
// here's how to add normals: https://threejs.org/docs/#api/en/core/Face3
	for(var i = 0; i < stackCount; ++i)
  {
      var k1 = i * (sectorCount + 1);     // beginning of current stack
      var k2 = k1 + sectorCount + 1;      // beginning of next stack

      for(var j = 0; j < sectorCount; ++j, ++k1, ++k2)
      {
          // 2 triangles per sector excluding first and...