Creating a three-dimensional model of planet Earth using particles and Three.js technology

I'm attempting to recreate a similar effect found at , but with a twist. Instead of just particles, I want them arranged in a way that resembles the Earth - like a textured face.

After examining their code, here is how they set up the particles group:

var map = THREE.ImageUtils.loadTexture('/admin/wp-content/themes/hys/assets/img/particle.png');

    var m = new THREE.ParticleSystemMaterial({
      color: 0x000000,
      size: 1.5,
      map: map,
      //blending: THREE.AdditiveBlending,
      depthTest: false,
      transparent: true
    });

    var p = new THREE.ParticleSystem(g, m);
    scene.add(p);

While this setup works well, I am unsure on how to position the particles along a sphere to create the planet-like effect. In a 2D context, I would use pixel scanning and image coordinates for positioning, but translating this to a 3D environment poses a challenge...

Any guidance or suggestions are greatly appreciated!

Answer №1

In order to transform a grid of pixels representing color values and the earth's surface in 2 dimensions into a 3-dimensional projection, a sphere projection method is necessary. For details on how to implement a mercator projection, refer to this question:

how map 2d grid points (x,y) onto sphere as 3d points (x,y,z)

Various methods can be used to achieve this transformation, with stereographic being a popular choice. Additional information on different map projection methods can be found here: http://en.wikipedia.org/wiki/List_of_map_projections

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

Using jQuery to create sliding animations with left and right transitions

I recently learned about the slideUp and slideDown functions in jQuery. Are there any similar functions or methods for sliding elements to the left or right? ...

Switching between different months in the React-Calendar display

I've been working with React-Calendar and I'm facing an issue where the month doesn't change when clicking the navigation arrows in the calendar. Here's a snippet of my code: ... const onActiveStartDateChangeHandler = ({ activeStartDa ...

The data value in Vue.js remains static

My variable is called cat_pressed I also have a function to change the value of this data: changeCat(){ this.cat_pressed === 'brauh' } However, whenever I call the function, the value does not change and I can't figure out why. ...

Update your content dynamically by refreshing it with JQuery/AJAX following the usage of an MVC partial view

Implementing the following JQuery/AJAX function involves calling a partial view when a selection is made in a combobox labeled "ReportedIssue" that resides within the same partial view. The div containing the table is named "tableContent". <script type ...

Utilizing ASP.Net Core version 3 to effortlessly send a POST request to the controller

I am having difficulty with my POST request to an ASP.NET Core 3 server because the number always seems to be 0. Is there something specific in ASP.NET Core 3 that I might be missing? Using the [FromBody] parameter has not resolved the issue. Even passing ...

Events triggered by JQueryUI's .selectable functionality

I am facing a minor issue with the JQuery .selectable function. My goal is to bind events to each tab. I have successfully handled the click event for each tab, but I'm struggling when it comes to selecting two or more tabs. For instance, if I clic ...

jquery blur function not triggering properly

I am not very familiar with jquery and javascript. Below is the code I have written for an input text field where I want to use blur function for validation: <div class="form-row form-input-name-row"> <label> <span>Full name& ...

"Utilizing Multer to upload files to a specific directory on a Node.js Express website connected to a

My node-express application handles user authentication and file uploads using multer. When I submit the form, the name, email, username, and password fields are successfully stored in the MongoDB database. However, the profile image file is not being stor ...

What is the best way to set up a server in React using Express or HTTP?

I am currently in the process of developing a web application using react js. In order to create a server for my client within the project, I have decided to utilize either express or http. Here is the code snippet that I attempted: import React from " ...

Implementing JavaScript to add a loading spinner to a specific cell

Currently, I'm utilizing the code below (not my original) in order to load an image into a css element (referred to as cell) and showcase an activity indicator. var cell = document.createElement('li'); cell.textContent = this.labelForIndex( ...

AngularJS Ion.RangeSlider not automatically adjusting the minimum and maximum values when a specific button is clicked

I have created a custom slider directive using ionRangeSlider. When I click a button, the min and max values of the slider should be updated dynamically, but for some reason it is not working as expected in the directive. I tried adding a watch function in ...

Is it necessary to implement the useCallback hook along with React.memo for rendering optimization in React components?

As I delved into understanding how useCallback and useMemo function in React to optimize app performance, I decided to create a simple app for experimentation. What I observed was that the callback function (OnBlurHandler) passed to my child component trig ...

Fetching images from a WikiJS API endpoint

I need help creating a GraphQL query string to retrieve page data from Wiki JS. Specifically, I am looking for a way to fetch the URL of the first image on the page. Unfortunately, I have been unable to find any information on how to do this in the documen ...

In the hook of Vue 3, the return type object within `this` is consistently evaluated as `undefined`

Could someone explain why, in the provided code snippet, the this inside the return block remains undefined? export const useAutoSave = ( cacheKey: string, interval: number, getSaveData: () => Omit<SaveDto, 'savedTime'>, ) => { ...

What is the best way to implement seamless transitions between different components in my code?

I'm currently developing my own single page application and I want the content to have a smooth animation effect as I scroll down, instead of being static. Despite searching for guides on this topic, I haven't found any helpful resources yet. An ...

Issue encountered: Document not being saved by Mongoose, error message received: "MongoClient connection must be established"

Currently, I am attempting to establish a connection with MongoDb using mongoose. Below is the code snippet that I have implemented for this purpose: controller.js const conn = mongoose.createConnection(db, { useNewUrlParser: true, ...

Three.js Morph Targets: A Deep Dive

I'm diving into the world of morph targets and three.js, but I'm struggling to find comprehensive documentation on this topic. Upon reviewing the source code, it seems like morphTargetInfluences[] is the key element. Can someone explain how thi ...

How can I adjust the font size of material-ui buttons while ensuring that they scale appropriately?

Having trouble adjusting the font sizes on Material-UI's RaisedButton for React and ensuring that the button scales properly along with it. <RaisedButton label={<span className="buttonText">Log in Here</span>} /> CSS: .buttonText ...

Transmitting information in segments using Node.js

Recently delving into the realm of nodejs, I find myself tackling a backend project for an Angular 4 application. The main challenge lies in the backend's sluggishness in generating the complete data for responses. My goal is to send out data graduall ...

I attempted to define a function in order to pass it as props, only to encounter a compilation error

I am currently facing an issue with a React component where I am trying to pass a function to another component. The problem lies in my inability to properly define the function, resulting in a compilation error. export default function App() { createActi ...