Using Sphere Geometry to create different shapes

Using Sphere Geometry to create different shapes

ยท

2 min read

Sphere Geometry

Some understanding about the Spherical Coordinate System will be helpful.๐Ÿ˜ƒ https://en.wikipedia.org/wiki/Spherical_coordinate_system Replace the previous Torus Geometry with this:

const geometry = new THREE.SphereGeometry(10, 25, 25);
const material = new THREE.MeshNormalMaterial({flatShading: true});
const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

animate();

function animate() {
        requestAnimationFrame(animate);
        sphere.rotation.x += 0.01;
        sphere.rotation.y += 0.01;
        sphere.rotation.z += 0.01;
        renderer.render(scene, camera);
}

Result: The Normal Sphere:

sphere.PNG

  • SphereGeometry(radius : Float, widthSegments : Integer, heightSegments : Integer, phiStart : Float, phiLength : Float, thetaStart : Float, thetaLength : Float) creates a Sphere.
  • radius determines the radius of the Sphere. Default: 1 -widthSegments and heightSegments determine the number of segments in width and height. Larger value will generate a smoother sphere.
  • widthSegments minimum 3, Default: 32.
  • heightSegments minimum 2, Default: 16.
  • phiStart and phiLength will generate a part of sphere along the phi axis. These are angles and must be specified in radians. Example Math.PI or 3 * Math.PI / 2.
  • Default: phiStart = 0 phiLength = Math.PI * 2.
  • thetaStart and thetaLengthwill generate a part of sphere along the theta axis. These are also angles and are specified in radians.
  • Default: thetaStart= 0 thetaLength= Math.PI.

Using Minimum Values

THREE.SphereGeometry(10, 3, 2, 0, Math.PI * 2, 0, Math.PI)

sphere1.PNG

Follow the Series

I hope You Enjoyed! ๐Ÿคฉ๐Ÿ˜„

Follow me on Twitter or LinkedIn. ๐Ÿ˜„๐Ÿ˜„๐Ÿ˜„

ย