The texture on the SphereGeometry in Three JS is failing to render correctly

I'm currently using Three JS to create a spherical projection of an image using maptoglobe.com. Here's what I aim to achieve:

Here's what I've managed to accomplish so far:

The code snippet I'm working with is as follows: 
 this.scene = new THREE.Scene();
    this.geometry = new THREE.SphereGeometry( 0.4, 100, 100 );
    var texture = new THREE.TextureLoader().load('assets/Webp.png');

    this.material = new THREE.MeshBasicMaterial({map : texture, overdraw: 0.1});

    this.mesh = new THREE.Mesh( this.geometry, this.material );

    this.scene.add( this.mesh );

The issue I'm facing is the appearance of red lines on the maptoglobe.com image, which are not present in my code-based implementation.

Any assistance or guidance on this matter would be highly appreciated.

Edit 1

View My Sphere on StackBlitz

Check out the Sphere on MapToGlobe

javascriptcanvasthree.js

Answer №1

If you want to resolve the projection problem, consider using OrthographicCamera in place of PerspectiveCamera

this.camera = new THREE.OrthographicCamera(
      window.innerWidth / -2,
      window.innerWidth / 2,
      window.innerHeight / 2,
      window.innerHeight / -2,
      1,
      1000
    );

Check out the outcome:

https://i.sstatic.net/rXXl5.png

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

Locate the class and execute the function on the existing page

Stepping outside of my comfort zone here and I'm pretty sure what I've come up with so far is totally off. Ajax is new to me and Google isn't making things any clearer, so I was hoping someone more knowledgeable could assist! Basically, I w ...

javascriptjqueryajax

The Randomizer consistently yields the initial value each time

My mom works as a teacher, and I planned to surprise her with a random student picker for her 2nd-grade class. However, there seems to be an issue as it always selects the same student - Daniel. Despite setting up logging for the random numbers generated, ...

javascriptrandom

Incorporate a new style into several previous slides using the Slick carousel feature

I'm attempting to utilize the Slick carousel to create a timeline. My goal is for the previous slides to remain colored as you progress through the timeline, and turn grey when you go back. I've tried using onAfterChange and onBeforeChange, but I ...

javascriptcssslick.js

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

I have a table shown in the image. I am looking to create a function that calculates price* quantity = subtotal for each row, and then sum up all the subtotals to get the total amount with Total=Sum(Subtotal). https://i.stack.imgur.com/4JjfL.png This is ...

javascripthtmlangulartypescript

Automatically insert a hyphen (-) between each set of 10 digits in a phone number as it is being typed into the text

I'm attempting to automatically insert a hyphen (-) in between 10 digits of a phone number as it is being typed into the text field, following North American standard formatting. I want the output to look like this: 647-364-3975 I am using the keyup ...

javascriptangulartypescript

Error in AngularJS and TypeScript: Property 'module' is undefined and cannot be read

I'm attempting to incorporate TypeScript into my AngularJS 1.x application. Currently, my application utilizes Webpack as a module loader. I configured it to handle the TypeScript compilation by renaming all *.js source files to *.ts, and managed to ...

javascriptangularjstypescriptwebpackes6-module-loader

Control the scope value using an AngularJS directive

I have a model with values that I need to modify before presenting them to the user. I have checked the documentation but might be overlooking something. For example, I would like to format my variable in this way: <span decode-directive>{{variable ...

javascriptangularjsangularjs-directive

Fill the input field with data retrieved from a json file

I'm working on a Rails app where I need to populate a field with a value from JSON that is returned after clicking on a link. Can anyone point me to a tutorial that explains how to use Ajax correctly for this purpose? Here's my plan: 1. Send a G ...

javascriptjqueryruby-on-railsajaxjson

Implementing promises in my MEAN stack application

I have developed a controller that performs a Bing search based on the user's input in the URL. After testing the controller with console.log, it seems to be functioning correctly and I have set the variable to return the results. However, when trying ...

javascriptexpressasynchronous

What is the method for retrieving the status of an xmlHttpRequest?

I'm curious about how to verify the status of an xmlHttp request once it has been sent. Can someone explain the process to me? Thank you. function sendRequest(){ //retrieve access token var accessToken = 'xxx'; //get user_id ...

javascriptxmlhttprequest

"Enhance your data visualization with Highcharts Windbarb and effortless AJAX data

Alright. Let's rephrase a question that hasn't been answered yet. I've got a chart below with data loading dynamically via ajax. A simplified version (without ajax) of this graph works well as shown in this jsfiddle. The code below represe ...

javascriptajaxhighcharts

Is it necessary to test the main.js file in Vue.js project?

While performing unit tests on components is acceptable, after running coverage analysis I have noticed that certain lines of code in the main.js file remain uncovered. This raises the question: should the main.js file also be included in testing? Specifi ...

javascriptunit-testingvue.js

Leveraging Server Response Codes Across Different Domains Using JavaScript

Before anything else, I must acknowledge the cross-domain issues that may arise with JavaScript. The fact that I am seeing both 404 and 200 response codes in my console has made me reconsider this possibility. The scenario... I am currently developing a w ...

javascriptajax

Link AngularJS service array length property to the controller's scope through binding

I am attempting to connect the length of an array from another service to my controller's scope in the following manner: app.controller('TestCtrl', function ($scope, safePostService) { $scope.count = safePostService.queue.length; $ ...

javascriptangularjs

How can I use jQuery to pinpoint where my focus currently lies and debug any issues?

Triggering focus() on an element is a simple task, but after encountering debugging problems, I've come to realize that finding out where my focus has shifted can be quite challenging. The issue arises when I'm creating a modal window using jq.UI ...

javascriptjqueryjquery-uifocusjquery-events

Unable to show <LI> elements

I'm having trouble adding LI items to the #historial <UL> tag. Whenever the for loop is inside the function, the list displays with some elements duplicated. I believe the for loop should remain outside of the function. Could someone please he ...

javascripthtmldom

Cannot adjust expiration date of express-session in browser

In my current project, I am utilizing express-session. Let's say a session has been created between the web browser and the Node.js server with a default expiration time of one hour. At this point, there is a cookie named connect.sid stored in the use ...

javascriptnode.jsexpresscookies

Learn how to retrieve data from a dynamically populated drop-down menu when a button is clicked using PHP

I am having trouble retrieving the value from a dropdown menu. The dropdown is populated dynamically from an SQL Server database. Dropdown 1 displays product names and is filled dynamically. Dropdown 2 displays environment names and is filled using HTML. ...

javascriptphp

Having trouble retrieving the data property from the parent component within the child component slot

I am facing an issue with my Vue components. I have a rad-list component and a rad-card component. In the rad-list component, I have placed a slot element where I intend to place instances of rad-card. The rad-card component needs to receive objects from t ...

javascriptvue.js

Smooth scrolling in JavaScript can lead to unexpected jumps when using scroll-margin-top

I am currently working on implementing smooth scrolling into my website using JavaScript. However, I have run into a problem with CSS property scroll-margin-top causing a sudden jump at the end. The CSS I am using for scroll margins looks like this: class ...

javascriptcsssmooth-scrolling