Textures are not loading on the three.js model of Earth

After recently downloading three.js, I decided to create an earth in the universe. Everything was going well until I tried to add a texture to my Sphere. Suddenly, the Sphere disappeared and I can't figure out why. I've searched on various websites for a solution but haven't found anything that works :-/

Please, could someone help me out? I've run out of ideas and this issue is driving me crazy :D

I'm stuck on this part of the code:

var geometry = new THREE.SphereGeometry(0.5, 32, 32);

var material = new THREE.MeshPhongMaterial({
color: 0x4682B4,
map: THREE.ImageUtils.loadTexture('2_no_clouds_16k_002.jpg', {}),
bumpMap: THREE.ImageUtils.loadTexture('elev_bump_16k_002.jpg'),
specularMap: THREE.ImageUtils.loadTexture('water_16k_002.jpg'),
specular: new THREE.Color('grey')
});

var mesh = new THREE.MeshPhongMaterial({
color: new THREE.Color('red'),
wireframe: true
});

var sphere = new THREE.Mesh(geometry, material);
var earthMesh = new THREE.Mesh(geometry, mesh);
scene.add(sphere);
scene.add(earthMesh);

//--- Renderer --
function render
{
requestAnimationFrame(render);
sphere.rotation.y = + new Date() / 7000; //movement is added
renderer.render(scene, camera);
}

render();

Answer №1

After some investigation, I finally figured out why the issue persisted. The main problem was with the size of the images, they were simply too large. Additionally, using jpg format seemed to cause compatibility issues that I couldn't resolve (mysterious, right?). Switching to png solved this dilemma. Interestingly, the solution worked seamlessly on my server but not when tested locally. The intricacies of technology never cease to amaze me! It's almost as if my computer has a mind of its own... reminiscent of something from an AI movie like iRobot!

Big thanks to everyone who offered their assistance! You are all awesome <3 Best regards, Vicky

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

Looking to locate a specific video within the DOM

Is there a way to detect the presence of video content in the DOM, regardless of how it is inserted? I attempted using phantomJS but was unable to find a satisfactory method. ...

Tips for confirming a website URL using jquery

Looking for help with this form issue: Trying to identify if a valid web address is entered in the input field <form onsubmit='return formValidation()'> <p id="p4"></p> <label>Address:</label> ...

A guide on selecting elements within an ng-repeat loop using Protractor

I've been trying to click on the checkbox under the repeat section, but my code isn't working as expected. Here's what I have: element.all(by.repeater('(spid in spids')).then(function(completeColumns) { completeColumns[1].click(); ...

Calculating the percentage difference between two dates to accurately represent timeline chart bar data

I am in the process of creating a unique horizontal timeline chart that visually represents the time span of milestones based on their start and finish dates. Each bar on the timeline corresponds to a milestone, and each rectangle behind the bars signifies ...

Implement a Bootstrap button that can efficiently collapse all elements in one click

Within my HTML file, I have included the following code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <div class="list-group list-group-flush"> <a href="javascript: void(0)" da ...

What is the process for transmitting data through the post method?

I'm facing an issue with downloading a file from a folder using nodejs. The process works perfectly fine when using the get method. However, when I try to pass the file name as a parameter in the post method, it shows up as "undefined". var downloa ...

Convert HTML table data to JSON format and customize cell values

Hey there, I have a HTML table that looks like this: <table id="people" border="1"> <thead> <tr> <th>Name</th> <th>Places</th> <th>Grade</th> </tr> & ...

Can we achieve Client-side Validation without using JavaScript?

Just a quick question (I have a guess, but want to be certain), I just need a simple Yes/No answer as I can't find clarification anywhere. The reason for my query is because of web pages designed for mobile phones, where javascript support is incons ...

Tips on integrating a video file into a 3D scene using three.js

Do you want to achieve a result similar to this? https://i.sstatic.net/frBSK.png I already have experience playing FBX animations in three.js, but how can I easily place a video file in a 3D scene like this? ...

"Enhance Your Smart Contract Interaction with Algrand's Method Calling

Currently, I am working on integrating an Algorand smart contract with a Next.js application. To sign transactions, I am utilizing Pera wallet. However, I have encountered an issue when attempting to call methods from the contract on the front end using th ...

Using the HttpPut method in conjunction with a route controller

Hey there, I could really use some assistance. I'm currently attempting to utilize the PUT Method via AJAX in order to send data to a controller for an update operation. Here's my JavaScript and AJAX code: function UpdateProduct() { var id = loc ...

Generate a list item that is contenteditable and includes a button for deletion placed beside it

I am attempting to create a ul, where each li is set as contenteditable and has a delete button positioned to the left of that li. My initial attempt looked like this: <ul id='list'> <li type='disc' id='li1' cl ...

How to retrieve a response from a vanilla JavaScript AJAX request using the POST method

Here is a PHP function that I created to save data: case "start_question": $user_id = "123"; $p_id = $_POST[""]; $question_id = $_POST["question_Id"]; $answer = $_POST["answer_String"]; $counter = $_POST["counter"]; $points = $_PO ...

Can Next JS handle RTK queries?

Struggling to understand how to effectively use NEXT JS with RTK Query. I am looking for a way to centralize data storage across multiple pages, rather than making repeated API calls. Is there a way to make the API query once and then access the fetched d ...

TranslateY animation glitching

I need help with expanding a box to 100% height after click, then collapsing and sticking to the bottom. I created a function in Vue framework to handle the animation, but it's not working smoothly. How can I make it less buggy? Check out the demo her ...

Creating Isometric Rooms with X and Y Coordinate Coloring

I am working on creating an isometric room and I aim to color it in a specific style. However, the current code I have been using produces a different result than expected. Can anyone help me understand how this code works and potentially correct any mis ...

Is the Ajax response value consistently 1?

I am facing an issue where a JavaScript in an HTML page is sending two variables to a PHP script, which then echoes one of the variables at the end. However, the response value always remains 1. Despite trying methods like alerting, console.log, and puttin ...

Struggling to iterate through the children of a variable with the help of express-handlebars?

Currently, I am in the process of developing an application using Javascript along with express, express-handlebars, and MySQL. One of my main tasks is to establish a route that follows the pattern '/viewowner/:ID/scoreboards/:year' where ID sig ...

What could be causing the response data from an AJAX request to be in error instead of success?

My JSON data is securely stored on , and I can access it through a unique URL. Here is the specific URL: The JSON data found at the above URL is: { "glossary": { "title": "Suyog", "GlossDiv": { ...

Displaying JavaScript values one by one using a for loop and alert

Having an issue with looping through a JSON array in JavaScript. I am trying to extract only SG_J1001 and SG_LS01, but it's not working as expected. The result is coming out like this [{"regis ....... var item = JSON.stringify(data['code'] ...