Changing the texture mapping on a sphere in Three.js

I am currently working on a project with a sphere displaying a map using Three.js. The image I'm using has dimensions of 1024*2048.

However, I have encountered an issue where the CircleGeometries placed on the sphere to indicate certain points of interest are not aligning correctly with the countries on the map. Simply loading the image onto the sphere is not providing the desired result.

My solution is to rotate the map slightly so that it lines up with the points of interest, but I am struggling to make this adjustment successfully.

I attempted to use texture.offset.x = 0.5;, setting the offset to half of the globe's circumference (Math.PI / (2 * Math.PI) = 0.5) in order to rotate the map half a globe. However, this resulted in only half of the globe being covered by the image.

Next, I tried using 

texture.wrapS = THREE.RepeatWrapping;
which led to multiple images overlapping on the globe, creating a visually unappealing outcome.

I researched solutions such as rotating a sphere texture in Three.js, but unfortunately, these did not resolve my specific problem. Additionally, I am curious if having a power-of-two image is necessary for this process?

If anyone has any suggestions or ideas on how to address this issue, I would greatly appreciate it.

javascriptthree.jswebgl

Answer №1

After experimenting, I discovered a solution using the phiStart attribute of my sphere :

phiStart — indicates the horizontal starting angle. The default is 0.

I decided to adjust it to

3/2 * Math.PI (instead of 0) - (Math.PI/200) in order to align perfectly with the country bounding box, because :

The images were off by approximately 100km from their correct position, which led me to this simple calculation :

If 2*PI equals 40,000 km and I want to cover 100km, then 2*PI*100 / 40,000 = PI/200

Answer №2

Opt for texture.mapping over texture.offset

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

Ways to showcase a JSON menu with a single level

I have a json file containing links to all the images in a specific folder, as shown below: ["http://img1.png","http://img2.png","http://img3.png","http://img4.png"] I would like to create a <ul> list using this data, but I'm not sure how to d ...

javascriptjqueryajaxjson

Adjust Javascript to modify the URL by assigning a new URL without utilizing the origin as the parent

Currently, I am working on a script that is responsible for sending string values to the server in order to change the ipv4 information on a specific device. However, I am facing some difficulties and would appreciate some assistance with automatically upd ...

javascriptajaxhtmlgoogle-chrome

How can I select a checkbox dynamically during runtime?

I am working on a JavaScript code that needs to add the checked option to a checkbox if it has an id or value of 2 at runtime. I have tried the following code, but unfortunately, I am unable to check the checkbox. Do you have any ideas on how to solve th ...

javascriptjquery

retrieve the webpage hosted on the server

Seeking to develop a website where users can input a website URL and have it loaded from the server hosting the HTML page, rather than from the user's computer as iframe does by default. I've experimented with various techniques but all seem to l ...

javascripthtmlwebserver

Custom date formatting with jQuery table sorting

I have been using a jQuery plugin called Tablesorter to sort a table. I am facing an issue with sorting dates in the yyyy MMM dd format, especially because my date inputs are in French. Here is an example of how the dates are formatted: 2014 janv. 05 20 ...

javascriptjqueryhtmlasp.nettablesorter

Tips for swapping out an item mid-scrolling?

What is the best way to change the navbar when scrolling a page in React? How can I achieve this while following React's concepts? Is using getElementById considered bad practice? const useState = React.useState const useEffect = React.useEffect con ...

javascriptreactjs

How to retrieve a nested element from a multidimensional array using Angular

Need help with Angular - I'm working on a json file containing an array called people[], which in turn has an array named phones[] I aim to extract and display: people[index].phones[index].phonenumber (assuming people.personid = x and people.phones ...

javascriptarraysangular

Get a list of all languages supported by browsers using JavaScript

Within my HTML user interface, I have a dropdown that needs to display a list of all installed browser languages except for the first one. I managed to retrieve the first language (en-us), but I also have the zh-CN Chinese pack installed on my operating s ...

javascriptjqueryhtml

"Creating a duplicate of an element by utilizing the `next`

I have a dilemma involving two divs within a section of my project - one div is dynamically created while the other exists statically. My goal is to transfer the non-dynamically created div into the one that is generated dynamically. let adContainer = $ ...

javascripthtmljquery

Winston prefers JSON over nicely formatted strings for its output

I have implemented a basic Winston logger within my application using the following code snippet: function Logger(success, msg) { let now = new Date().toUTCString(); let logger = new (winston.Logger)({ transports: [ new (winsto ...

javascriptnode.jsloggingnpmwinston

Is it necessary to include specific versions in package.json when committing the yarn.lock file?

Do you believe it is beneficial to always commit the yarn.lock file, even though all versions are clearly specified in package.json and there should be no discrepancies among team members? I personally find it to be a time-consuming practice, especially w ...

javascriptnpmhadoop-yarnpnpm

When is it more advantageous to use Next.js instead of plain React?

As someone who is new to the world of React, I've dabbled in creating simple web applications using the React library and the convenient create-react-app command with npx. However, I've come to realize that the Client Side Render (CSR) applicatio ...

javascriptreactjsnext.jscreate-react-app

Revising Global Variables and States in React

Recently delving into React and tackling a project. I find myself needing to manage a counter as a global variable and modify its value within a component. I initialized this counter using the useState hook as const [currentMaxRow, setRow] = useState(3) ...

javascriptreactjstypescript

Leveraging periods within a MySQL database: Node.js for seamless updates

I am currently facing a challenge in updating a column name that contains a period in node using node-mysql. I appreciate the convenience of being able to update multiple columns by providing an object with keys, but the string escaping process with node-m ...

javascriptmysqlnode.js

Unable to scroll to the top of the page with JavaScript

I tried the code below but it didn't quite do the trick. Can someone assist me with refreshing the page to the top every time it loads? window.addEventListener('load', function(){ window.scrollTo(0,0) }) window.onload = (event) => { ...

javascript

There was an error: Unable to access the 'rotation' property of an undefined object

Currently learning three.js and following the documentation step by step. As I progress, I reach the following code snippet: function animate(renderer, scene, camera, cube) { requestAnimationFrame( animate); ...

javascriptthree.js

Older versions of Android, specifically Android 7 or lower, seem to encounter issues with Apis in React Native when utilizing axios. Fortunately, this problem doesn

For fetching the data, I utilized the 'axios' library. Surprisingly, it works flawlessly on newer Android devices (specifically Android 9 and 10). However, when it comes to older devices like Android 7 or earlier, a persistent Network Error occur ...

javascriptandroidreactjsreact-nativeaxios

Modifying the User Model in Sails.js results in an automatic password update

/** * User.js * * @description :: The User model handles user data, including hash functions for password security. * @docs :: http://sailsjs.org/#!documentation/models */ var bcryptjs = require('bcryptjs'); function hashPassword(values, ...

javascriptnode.jssails.jspassport.jsbcrypt

Is it possible for jQuery to create two separate variables with identical names?

When it comes to declaring variables in jQuery, you have 2 different options: The jQuery method The JavaScript method Are these two statements equivalent: $variable = "string"; And: var variable = "string"; Or do they create separate variables? ...

javascriptjquery

What is the best method to determine offsetTop in relation to the parent element instead of the top of

I have a straightforward inquiry: How can one determine the offsetTop of a child element in relation to its parent element rather than the top of the window? The definition of offsetTop indicates that it should give the distance by which a child element i ...

javascripthtmlcss