Transforming Sphere into Flat Surface

How can I convert the SphereGeometry() object into a flat plane on the screen? I want it to function in the same way as demonstrated on this website, where the view changes when clicking on the bottom right buttons. Below is the code for creating the sphere. Keeping it simple is key.

var loader = new THREE.TextureLoader();
    loader.load("js/model/map.jpg", function(texture) {
    var earthMaterial = new THREE.MeshBasicMaterial({
        map: texture,
        bumpscale: 0.05
    });
    var earthSphereGeometry = new THREE.SphereGeometry(80, 32, 32);

    earthSphere = new THREE.Mesh(earthSphereGeometry, earthMaterial);
    scene.add(earthSphere);
})

Answer №1

When it comes to transforming an earth-like sphere into a map-like plane, the concept of geometry morphing through vertex displacement proves to be effective. Beginning with THREE.SphereBufferGeometry may not yield optimal results as a polygonal sphere when unwrapped is not exactly a plane.

However, using THREE.PlaneBufferGeometry eliminates such issues. To create the desired object, one can employ a custom ShaderMaterial. This material needs to calculate the morphing of the sphere in the vertex shader (which can either be done on the CPU or passed as another attribute). Transitioning smoothly between two states can be achieved by using a float uniform.

For a practical demonstration of this wrapping technique, refer to this working example with the 77th revision of three.js (use the slider to observe the wrapping effect).

vec3 anglesToSphereCoord(vec2 a, float r)
{
    return vec3(
        r * sin(a.y) * sin(a.x),
        r * cos(a.y),
        r * sin(a.y) * cos(a.x)  
    );
}

void main() {
    vec2 angles = M_PI * vec2(2. * uv.x, uv.y - 1.);
    vec3 sphPos = anglesToSphereCoord(angles, 0.6);
    vec3 wrapPos = mix(position, sphPos, wrapAmountUniform);

    gl_Position = projectionMatrix * modelViewMatrix * vec4( wrapPos, 1.0 ); 
}

It is important to note that the construction of this object is influenced by the position of the camera. To seamlessly blend and avoid visible cuts at any viewing angle, fixing the camera and implementing rotation in the shader (rotating UV coordinates rather than the geometry) can be beneficial. Different projections can also be managed within the shader.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The comparison between dynamically adding elements through Javascript and hiding them using CSS

I am contemplating the advantages and disadvantages of adding elements to a page and setting display:none versus creating a function that dynamically generates the elements and appends them where needed. In my current situation, I am implementing a reply ...

Enhance the functionality of Map.set by automatically storing the new entry on the disk as well

This code is intended for development purposes only, to resume work from where I left off when restarting the local server. I aim to avoid modifying the production code in any way. My goal is to save new entries to disk when using map.set(...). Below is a ...

Executing Javascript code that has been retrieved using the XMLHttpRequest method in a

Would it be feasible to modify this code to function recursively if the redirects to the js file that needs to be executed? function loadScript(scriptUrl) { var xhr = new XMLHttpRequest(); xhr.open("GET", scriptUrl); xhr.onready ...

Customizing the Switch component individually for each item fetched from an API in React Native

I'm struggling with setting the switch button individually for each item in my API. Despite trying multiple solutions, none of them seem to work for me. const results = [ { Id: "IySO9wUrt8", Name: & ...

In the dragstart event handler, event.dataTransfer and event.originalEvent will consistently be null

I have been working on developing drag and drop directives for angularJS by referencing this informative post: However, I am facing an issue where the dataTransfer and originalEvent are consistently null within the dragstart event handler, preventing me f ...

Unable to launch React Native project on emulator now

Something seems off with my App as it won't start up on my AS Emulator. Everything was running smoothly yesterday, but today it's not working - possibly due to me moving the npm and npm-cache folders, although they are configured correctly with n ...

Is there a way to add an entire array of child nodes to a parent node in a single operation using JavaScript?

Is there a quick way in JavaScript to attach an array of child nodes to a parent node all at once? I'm looking for a method that will avoid triggering unnecessary repaints. So far, I attempted using parent.appendChild(arrayOfNodes), but it resulted ...

Troubleshooting Test Failures: The importance of passing $controller in the callback of 'it' function in Angular

As a newcomer to testing, I am attempting to write Jasmine/Karma tests for a controller. Given a sample test to use as a starting point, the issue arises when passing the $controller in the argument of the it block. The test passes successfully with this s ...

Testing abstract class methods in Jest can ensure full coverage

In my project, I have an abstract generic service class. export default abstract class GenericService<Type> implements CrudService<Type> { private readonly modifiedUrl: URL; public constructor(url: string) { this.modifiedUrl = ...

Issue with RequireJS: The data-main attribute fails to load the specified file

As I convert my small project into nodejs, I am facing an issue with the requireJS file that defines the JS to be used in the project not loading properly. Below is the structure of my project: https://i.sstatic.net/oYnqn.png The ng-app specifies the fr ...

Ways to include input values

In my form, there are 4 text boxes labeled as customer_phy_tot, customer_che_tot, and customer_bio_tot. I want to add up the values entered in these 3 boxes and display the sum in a 4th input box called customer_pcb_tot. customer_bio_obt.blur(function(){ ...

Encountering a typescript error while configuring options in an Angular 8 application

When attempting to call a service using REST API with a GET request, I encountered the following error: Argument of type '{ headers: HttpHeaders; responseType: string; }' is not assignable to parameter of type '{ headers?: HttpHeaders | ...

Error: The function "navigate" has not been declared or defined

Just starting out in reactjs and embarking on a new project. I've successfully implemented a register and login function using firebase, but hit a snag when trying to navigate to a new page like the dashboard upon user login, I encountered this error: ...

The setState function in React Native seems to be having trouble updating

I've been attempting to access state from a component, but for some reason, I'm not seeing any changes when I use setState(). Here is the current state of my component: class MyTestComponent extends React.Component { constructor(props){ ...

Transmit the JavaScript array via AJAX to PHP server

Is it possible to transfer a JS array created using the .push function to another PHP file? I have included the code snippets for the two files involved, game.js and gallery.php. In Game.js: imgarray.push({"img_name": img_name,"x": x_value,"y": y_value,"w ...

Convert a number to binary in JavaScript, but display the result as infinity

data = parseInt(num); bin =0; pow=1; var rem=0 ; while(data != 0){ rem = data % 2; data = data / 2; bin = rem * pow + bin; pow = pow *10; } document.write(bin); I encountered an issue with my JavaScript code. Even though the example should output 11011 ...

Unlock the Power of Sockets in JavaScript and HTML

How can I work with sockets in JavaScript and HTML? Could HTML5 features be helpful? Are there any recommended libraries, tutorials, or blog articles on this topic? ...

Counting each item with jQuery and assigning them numbers 02, 03, 04, etc., with the exception of the first item which will display as "Up Next

I'm still learning jQuery and here's the code I've put together after researching on stackoverflow and other platforms: var counter = 1; $('.next-page .nav-item').each(function () { if ($(this, ':gt(0)')) { $(this ...

What steps do I need to follow to upload an image file through Socket.IO?

For my school project, I am developing a chat application and facing a challenge with implementing an onClick event to trigger a function that utilizes socket-io-file-upload to prompt the user to select a file for upload. This functionality is detailed in ...

Analyzing the DOM content loading time for web pages generated using AJAX technology

When analyzing website performance, I rely on window.performance.timing. However, this method falls short when it comes to measuring the performance of webpages loaded through ajax calls. For instance, websites built with frameworks like angularjs often lo ...