I am experiencing difficulty with Three.js rendering textures from my planet constructor function

I am facing an issue with my function that is supposed to create a 3D object (a planet) using orbital parameters and texture images from a dataset. Strangely, the textures are not rendering when I use StandardMaterial or PhongMaterial, even though they work fine with BasicMaterial. I have already verified that the textures work outside of the loop and function. I am unsure of what else to try. Below is the code snippet:

for(var i=0;i < results.data.length; i++){
              
 const EC = Number(results.data[i]["Eccentricity"]); //Eccentricity
 const IN = Number(results.data[i]["Inclination [Rad]"]) ; //Inclination
 const OM = Number(results.data[i]["Orbit Rotation_Y [Rad]"]) ; //Longitude of ascending node
 const W = Number(results.data[i]["Orbit Rotation_X [Rad]"]); //Argument of periapsis
 const A = Number(results.data[i]["Orbit semi-major axis [UA]"]); //Semi-major axis
 const EcRadius = Number(results.data[i]["Relative Equatorial Radius"]); //Radius
 const NAM = results.data[i]["Name"]; //Name
 const textureUrl = results.data[i]["TextureFileUrl"]; //Texture image of the planet

 const loader = new THREE.TextureLoader();
 loader.load(textureUrl, function ( texture ) {
    // Create the material when the texture is loaded
    var tex = texture.clone();
    const PlanetMaterial = new THREE.MeshBasicMaterial( {
    map: tex
    } );
    scene.add(CreatePlanet( 0,0,0, EC,IN,OM,W,A,EcRadius, NAM, 0x4E4E4E, 0.5, PlanetMaterial ));
    },
  undefined,
  function ( err ) {
     console.error( 'An error happened.');
  }
  );
} 

The CreatePlanet function simply creates a mesh with the given material, like so:

const geometryPlanet = new THREE.SphereBufferGeometry(EcRadius, 300, 300);
const Planet = new THREE.Mesh(geometryPlanet, PlanetMaterial);
return Planet;

Any help on this matter would be greatly appreciated. Thank you.

Answer №1

const newTexture = texture.copy();

If you could incorporate the line below, it would be greatly appreciated:

newTexture.needsUpdate = true;

This step is essential in order for the texture data to be properly transferred to the GPU.

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

How to Determine If a String Represents an HTML Tag Using jQuery

Checking if a string is an HTML tag can be tricky. I've tried various methods found on Google, but none have been successful so far: var v = $(string).html() ? 1 : 0; --or---------------------------------------------- var htmlExpr = new RegExp("/^( ...

Attempting to discover the secret to keeping a hamburger menu fixed in place once it has been expanded

Exploring this example https:// codepen.io/ducktectiveQuack/pen/mPGMRZ I had trouble understanding the code block, so I resorted to trickery (just remove the space between the '/' and the 'c' lol) My goal is to have the hamburger men ...

Using jQuery to send LocalStorage data to an email address with the help of PHP

Currently, I am in the process of developing a basic eCommerce/checkout system. My goal is to utilize localStorage data and transfer it to PHP using jQuery or any other method that is convenient. However, when I attempted to send the email, I only received ...

Mapping a JavaScript object to an MVC model: A comprehensive guide

I have a JavaScript object as shown below: $scope.docPropIdentityModel = { Owner: {OwnerID:"", OwnerName: ""}, }; I need to send this object to my MVC controller using an AJAX call. Let's say the controller looks like this: controll ...

Unable to submit form with Jquery

Having some trouble with my form submission using Jquery. The submit part of my code seems to be malfunctioning, and I can't pinpoint the issue. <?php if(!isset($_SESSION["useridentity"])){ die(header("Location:index.php")); } ...

Issue arises when isomorphic-dompurify is used alongside dompurify in Next.js 13 causing compatibility problems

I am currently facing a compatibility problem involving isomorphic-dompurify and dompurify in my Next.js 13 project. It appears that both libraries are incompatible due to their dependencies on canvas, and I am struggling to find a suitable alternative. M ...

Exploring the functionality of dynamic component imports in jest testing

Under a specific condition, I dynamically imported a component and stored it in an object property. Then, I displayed it in the template using vue <component :is="">. Everything is functioning correctly at the component level. However, I am ...

Error message: "Window object not defined during NextJS build process."

Why am I encountering a 'window not defined' error? I haven't referenced window or document in my code, and it runs without issues during development but throws an error during the build process. ReferenceError: window is not defined at ...

JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

FamilyTree= { "name":"Family", "photo":"images/family.jpg", "members":[ { "name":"Parent", "photo":"images/parent.jpg", "relationships":[ { "name":"Spouse", "photo":"images/spouse.jpg" }, ...

Initiate Ant Design select reset

I am facing an issue with 2 <Select> elements. The values in the second one depend on the selection made in the first one. However, when I change the selected item in the first select, the available options in the second one update. But if a selectio ...

Exclusive to Safari: Codesandbox is experiencing difficulties retrieving data from the localhost server

Would you mind helping me out with this technical issue I'm facing? For the server/API, I am using this link. As for the mock website, it can be found at this URL. The problem is that, in my code, I'm using axios to fetch data from the locally h ...

What is the best way to transfer a string to a different Vue component?

Within my project, I have a masterData.js file that serves as a repository for my master data. This file retrieves data from my mongo db and distributes it to various components of the project. To facilitate this process, I have implemented a function with ...

Use map.fitBounds in MapBox to continuously adjust the map view to show only the visible features on the map

In my map, there are various features with IDs stored in an array called featureIds. Within my application, I have a button that can toggle the visibility of certain features. To address this toggling behavior, I am developing a JavaScript function named ...

What are some methods for creating nested asynchronous calls in jQuery?

Here is an example in main.js: $.when( $.get('foo/bar.html'), $.get('lorem/ipsum.html') ).done(function(data1, data2){ someCode(); }); In lorem/ipsum.html: $.when( $.get('otherStuff.html'), $.get(' ...

Tips for sorting through existing data without resorting to a remote call - Material Table repository by mbrn (mbrn/material

Currently I am using the mbrn/material-table library which includes filtering on a column and remote data feature. However, when I apply a filter term, the table sends an API call to the server with the filter criteria in the query object. My desired outco ...

What methods can I use to conceal elements of my object that do not align with my specified filter?

Currently, I have implemented a filter that searches for an object in a text field using the properties of title and name. If there are matches, the words are highlighted in yellow. I am interested in modifying this so that if there are matches, the other ...

Is it possible for nextAll() to exclude a specific parent element and search only for children inside that parent?

Below is the structure of my html ajax form: <form name="vafForm" id="vafForm" method="GET" action="urlfor ajax"> <input type="hidden" value="0" id="vafProduct"> <select class="catSelect {prevLevelsIncluding: 'cat'} c ...

Creating a JavaScript file to incorporate into an HTML document

I stumbled upon this code snippet here This code allows me to fetch data from a php file and insert it into a div using jQuery. While the tutorial works perfectly, I'm planning to use this for about 9-10 different links and thought of consolidating a ...

Innovative idea for a time management system based on timelines and scheduling

My latest project involves creating a scrollable scheduler, inspired by vis-timeline and built using Vue.js. One of the main challenges I'm facing is achieving smooth infinite scrolling in all directions (past and future). I must confess that I&apo ...

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

I've been working on a Bootstrap website and have run into some issues that I can't seem to resolve. One problem I encountered was with a set of tabs that were supposed to be interactive, but for some reason, they weren't working as expected ...