Creating a spherical shape without relying on SphereGeometry: Is it possible?

Question

Creating a spherical shape without relying on SphereGeometry: Is it possible?

I am attempting to create a sphere without utilizing SphereGeometry. My approach involves drawing the sphere using latitudes and longitudes. Below is the code snippet I am working with:

for (var phi = -Math.PI / 2; phi < Math.PI / 2; phi += Math.PI / 15) {
                    var longVertices = new THREE.Geometry()
                    for (var theta = 0; theta <= 2 * Math.PI; theta += Math.PI/2 ) {

                        longitudes = this.point[this.numberOfVertices] = new THREE.Vector3();

                        longitudes.x = origin.x + this.radius * Math.cos(theta) * Math.cos(phi);
                        longitudes.y = origin.z + Math.sin(theta) * this.radius;
                        longitudes.z = origin.y + this.radius * Math.cos(theta) * Math.sin(phi);

                        this.numberOfVertices++;
                        longVertices.vertices.push(longitudes);
                    }
                    longVertices.vertices.push(longVertices.vertices[0]);
                    longVerticesArr.push(longVertices);
                }

This piece of code enables me to draw the longitudes. https://i.sstatic.net/6k4aC.gif

And:

        for (var phi = -Math.PI / 2; phi < Math.PI / 2; phi += Math.PI / 15) {

            var delta = Math.cos(phi) * this.radius;
            var fixedY = Math.sin(phi) * this.radius * direction;
            var latVertices = new THREE.Geometry();
            for (var theta = 0; theta < 2 * Math.PI; theta += Math.PI / 10) {
                latitudes =/* this.point[this.numberOfVertices] =*/ new THREE.Vector3();

                latitudes.z = origin.z + delta * Math.sin(theta);
                latitudes.y = fixedY;
                latitudes.x = origin.x + delta * Math.cos(theta);

                this.numberOfVertices++;

                latVertices.vertices.push(latitudes);
               }
            latVertices.vertices.push(latVertices.vertices[0]);
            latVerticesArr.push(latVertices);

        }

This code snippet assists me in drawing latitudes.

https://i.sstatic.net/ERILj.gif

Currently, I am encountering an issue where I am unable to obtain the points where both latitudes and longitudes intersect. How can I accurately determine these intersection points?

javascript three.js

Answer 1

Answer №1

Here is a simple example of a nested loop in action: [ http://jsfiddle.net/cdjtdkwa/ ]

var R = 18; // setting radius value
var LON = 32; var LAT = 16; // approximations
var PILAT = Math.PI/LAT;
var PILON = 2*Math.PI/LON;    
var cos1,cos2,sin1,sin2,t1,t2;    
var y1,y2,r1,r2,t1,t2;    
var geometry = new THREE.Geometry();

for (var i=0; i<LAT; i++) { // iterating through latitude segments
    t1 = Math.PI - i*PILAT;
    t2 = Math.PI - (i+1)*PILAT;

    y1 = Math.cos(t1); // calculate y-position for 1st latitude
    y2 = Math.cos(t2); // calculate y-position for 2nd latitude

    r1 = Math.abs( Math.sin(t1) ); // calculate radius for 1st latitude
    r2 = Math.abs( Math.sin(t2) ); // calculate radius for 2nd latitude         

    for (var j=0; j<LON; j++) { // iterating through longitude segments
        t1 = j*PILON;
        t2 = (j+1)*PILON;

        cos1 = Math.cos(t1);
        cos2 = Math.cos(t2);
        sin1 = Math.sin(t1);
        sin2 = Math.sin(t2);

        geometry.vertices.push(
            new THREE.Vector3( r1*cos1, y1, r1*sin1 ),
            new THREE.Vector3( r2*cos1, y2, r2*sin1 ),
            new THREE.Vector3( r2*cos2, y2, r2*sin2 )          
        );

    }
}

Answer 2

Here is a simple example of a nested loop in action: [ http://jsfiddle.net/cdjtdkwa/ ]

var R = 18; // setting radius value
var LON = 32; var LAT = 16; // approximations
var PILAT = Math.PI/LAT;
var PILON = 2*Math.PI/LON;    
var cos1,cos2,sin1,sin2,t1,t2;    
var y1,y2,r1,r2,t1,t2;    
var geometry = new THREE.Geometry();

for (var i=0; i<LAT; i++) { // iterating through latitude segments
    t1 = Math.PI - i*PILAT;
    t2 = Math.PI - (i+1)*PILAT;

    y1 = Math.cos(t1); // calculate y-position for 1st latitude
    y2 = Math.cos(t2); // calculate y-position for 2nd latitude

    r1 = Math.abs( Math.sin(t1) ); // calculate radius for 1st latitude
    r2 = Math.abs( Math.sin(t2) ); // calculate radius for 2nd latitude         

    for (var j=0; j<LON; j++) { // iterating through longitude segments
        t1 = j*PILON;
        t2 = (j+1)*PILON;

        cos1 = Math.cos(t1);
        cos2 = Math.cos(t2);
        sin1 = Math.sin(t1);
        sin2 = Math.sin(t2);

        geometry.vertices.push(
            new THREE.Vector3( r1*cos1, y1, r1*sin1 ),
            new THREE.Vector3( r2*cos1, y2, r2*sin1 ),
            new THREE.Vector3( r2*cos2, y2, r2*sin2 )          
        );

    }
}

Creating a spherical shape without relying on SphereGeometry: Is it possible?

Answer №1

Similar questions

Looping through a PHP foreach function, assigning a distinct identifier for the select element using getElementById

Passing a Typescript object as a parameter in a function call

The never-ending scrolling problem: Autoscroll refusing to halt - a perplexing conundrum in the world

Algorithm for detecting collisions in Javascript

Webpack fails to handle CSS background images

Cannot seem to get my AJAX code working correctly to show comments

Access environmental variables within Next.js middleware

What is causing my Vue leave transition to malfunction?

Utilizing a single v-model for several elements

Toggle button in React following a list iteration

Tips for displaying specific information using Javascript depending on the input value of an HTML form

JavaScript Promise Fundamentals

Change the function to utilize an HTML class rather than an ID

Help! I have a dilemma with my duck: the gltf object loaded from the three.js loader does not seem

Express Producing Empty Axios Post Request Body

What are the steps to retrieve marker data from a MySQL database and showcase them dynamically on a Google Map using AJAX? Addressing time constraints

If the user confirms it with a bootstrap dialog box, they will be redirected to the corresponding links

The element fails to show up when the button is clicked after receiving data from the API

The timer countdown is encountering an issue where it cannot update the 'textContent' property of a null element

Obtain the user's email using nodemailer