Discover the secrets of positioning objects around a spherical globe in Three.js

I am currently working on a project where I have a json file containing country borders. My goal is to use this data to build a map in three.js, similar to the example provided by this link.
I want each cylinder on the map to be positioned according to its respective country, like shown in this image: https://i.sstatic.net/IbN1k.png

Take a look at the snippet below. At the moment, I am calculating the center of the bounding box for each geometry, which is effective but the cylinders are not pointing outwards as desired in the image. I've attempted using lookAt() without success. There's also a for loop that rotates the countries and cylinders, but they're not moving correctly (feel free to uncomment it and test).

How can I adjust the positioning of the cylinders to be accurate?

<!DOCTYPE html>
... (the rest of the HTML code provided in the original text) ... 
</body>

javascriptthree.jsrotationposition

Answer №1

Organize your elements!

The cylinders weren't rotating from the correct center point.

let earthPivot = new THREE.Group(); //this is crucial
    mesh.add( earthPivot ); //'mesh' represents the globe
      const geometry = new THREE.BoxGeometry( 1, 1+i/10, 1 );
      const material = new THREE.MeshBasicMaterial( {color: newcolor} );
      const cone = new THREE.Mesh( geometry, material );
      cone.position.x = center.x;
      cone.position.y = center.y;
      cone.position.z = center.z;

      cones.push(cone);
      earthPivot.add( cone ); //this is vital

Create groups for your objects and attach them to the mesh for proper rotation.

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

proper method for concealing HTML content

Currently, I am developing a simple HTML+JavaScript application where the user must choose between two options using radio buttons. Once a choice is made, either content "A" or content "B" should be displayed beneath the radio buttons. I am considering th ...

javascriptxhtml

VueJS - repeating input fields for file uploads

I need help removing duplicate items from an array in JavaScript, but when I try to delete one, it always deletes the last occurrence! https://i.sstatic.net/NeJRJ.jpg let app = new Vue({ el: '#app', data: { items: [] }, methods: { ...

javascriptvue.js

Modify the data displayed on the chart by choosing the desired year from the dropdown options

In my Angular app, I am showcasing a chart that visualizes data based on selected starting and ending years from dropdown menus. The X axis represents 18 cities, while the Y axis displays "IAP" values. To calculate the "IAP" values for each city within the ...

javascripthtmlangularhighcharts

Restricting the type of user input in HTML forms

Requirements: Input must be a whole number between 2 and 99, inclusive. Current Solution: <input required type="number" min="2" max="99" oninput="this.value = Math.abs(this.value)" maxLength="2" matInp ...

javascripthtmlangular

Is there a way to efficiently fetch localStorage data upon launching a React application and seamlessly store it in Redux using the useEffect hook without experiencing any data loss issues?

Should I avoid mixing React hooks and mapStateToProps in my application and instead use Redux hooks like useSelector? In my React app, I have an array of 'friend' data stored in Redux. Using useEffect in one of my components, I am saving this da ...

javascriptreactjsreduxreact-reduxreact-hooks

Looking for a prerequisite for running this script?

Seeking assistance from a skilled Javascript expert. I specialize in template development and utilize a specific script to display my footer link in all the free templates I create. If someone attempts to remove the footer link, their site will be redirec ...

javascripthtmlcssredirect

What could be the reason for the component failing to update even after modifying the object's properties?

I have come across some related threads on Stack Overflow, but they only briefly mention using the spread operator. But why should we use it? In the code below, I am trying to update the firstName property of the user object, which is a state, when clicki ...

javascriptreactjsnext.js

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss

Can content be dynamically loaded through ajax in Simile Timeline instead of being loaded upfront?

I am currently utilizing the JavaScript Simile Timeline which includes timeline items with extensive description fields. Rather than including all this information in the initial JSON payload data, I only want to load it when a user clicks on a timeline it ...

javascriptasp.net-mvcajaxsimile

Consistent surface appearance across combined mesh

Is there a way to texture a merged mesh from geometry as one solid piece rather than separately on each individual shape? In the provided code snippet, the textures are applied to separate geometries (refer to image points 1 and 2) - two Cubes and one Cyli ...

javascriptthree.jstexture-mapping

Trouble accessing Silverlight site due to incomplete loading

There is a site known as that consists of a Silverlight application. Strangely, this site loads on all other computers except mine. I keep encountering the following error: An Error occurred in the Silverlight Application: String was not recognized as a ...

c#javascript.netsilverlightbrowser

Verify Session Cookies through JSONP requests

I've developed a bookmark that pulls all images from a webpage upon clicking and sends the image's src back to another server using JSONP. Challenge: The remote server must validate session authentication cookies to confirm that the user sending ...

phpjavascriptjqueryajaxbookmarklet

Determine if the JSON lacks an array within it

Utilizing an API to fetch results, the response received looks something like the following: {"currentPage":1,"numberOfPages":1,"totalResults":1,"data":[{"id":"Sf8xxo","name":"The Bear Reader Huckleberry Oatmeal Stout","nameDisplay":"The Bear Reader Huckl ...

javascriptjsonparsing

An interactive 3D model emerges against a sleek ebony backdrop on my online platform

I stumbled upon a three.js 3D object featuring a unique touch - a 404 text with a floating orb replacing the zero. Upon importing its code, it rendered successfully, albeit against a black background. Despite my efforts to tweak values and apply background ...

javascriptthree.js

Sending information to a web API using the POST method

As a newcomer to Javascript, I have encountered an issue while trying to pass data to the POST method of a web API. Sometimes, I am only receiving values properly for the second response (i.e. requestOptions2), which I suspect is due to the asynchronous na ...

javascriptc#jsonajaxpost

Encountering difficulty in retrieving the outcome of the initial HTTP request while utilizing the switchMap function in RxJS

My goal is to make 2 HTTP requests where the first call creates a record and then based on its result, I want to decide whether or not to execute the second call that updates another data. However, despite being able to handle errors in the catchError bl ...

javascriptangulartypescriptrxjsswitchmap

Discover the Closest Database Pointers on Google Maps Based on My Current Location

Currently, I am in the process of creating a feature where users can enter their postcode or address information and be presented with markers that are nearby. All of my markers are stored in a database. Initially, I planned to retrieve results from MySQL ...

javascriptmysqlgoogle-mapsgoogle-maps-api-3

The module 'NgAutoCompleteModule' was declared unexpectedly by the 'AppModule'. To fix this issue, make sure to add a @Pipe/@Directive/@Component annotation

Currently, I am attempting to integrate an autocomplete feature into my Angular 2/4+ project. Despite trying various libraries, none of them seem to be working correctly. Each one presents me with a similar error message: Unexpected module 'NgAutoCom ...

javascriptangularnpmangular5angular2-template

Substituting Hebrew characters for Mandaic characters within certain HTML tags can cause links to malfunction

What causes the JavaScript code provided to replace Mandaic characters with Hebrew characters on a webpage to also disable all links on the page? The code snippet is as shown below: function replaceMandaicCharacters() { const mandaicLetters = "&bsol ...

javascripthtml

Improving an HTML list with JavaScript

My current project involves a JavaScript game similar to Scrabble. I want users to be able to create new words in the game, and have those words added to a list that is displayed on the page within a div element. However, I'm struggling to understand ...

javascripthtmllistview