What are some ways to incorporate texture into objects using three.js?

Having trouble adding texture to my central sphere (earth) without the object disappearing. Can someone provide guidance on where I might be making a mistake? Your help is appreciated. For reference, here is the link to my jsbin http://jsbin.com/cabape/edit?html,output. My ultimate goal is to make the moon rotate around the earth.

//earth var loader = new THREE.TextureLoader(); loader.load('', function ( texture ) {

var center = new THREE.SphereGeometry(20,20,20);
var materialShereCenter = new THREE.MeshPhongMaterial( { ambient: 0xee0011, color:0xff0000, specular: 0xee0000, shininess: 70,wireframe: false, map: texture } );  
centralSphere = new THREE.Mesh(center, materialShereCenter);
centralSphere.position.z        = 0;
centralSphere.position.x        = 0;
centralSphere.position.y        = 0;

scene.add(centralSphere);

});

Answer №1

This addition was necessary too

let texture = new THREE.Texture(); let loader = new THREE.ImageLoader();

    loader.addEventListener( 'load', function ( event ) {
            Texture2.image = event.content;
            Texture2.needsUpdate = true;
    } );

    loader.load( 'http://wayofwellness.com/js/globe.jpg' );

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

Several DIV elements lined up side by side

I've been working on a program that retrieves data from a database, lists some of the data when a button is clicked within the same div, and then creates new divs with buttons that have onclick events until it reaches a certain maximum value. To keep ...

Is there a way to create a discord.js bot that can search for past messages without the need for a json file or storing them in a database?

Similar to the search feature in Discord. Imagine being able to enter !search [user] [query] and getting a response like "50 messages match your query." This would be like a word counting bot that doesn't need a database or local storage.The bot ...

Displaying various data sets from data tables created using Ajax on Highcharts

I am currently working on integrating multiple data series into Highcharts' plot. I want to retrieve the data from an ajax self-calling function, which would allow for almost real-time updates to the charts without redrawing the entire chart each time ...

Retrieving User Keypad Input with Twilio Phone Calling in a Node.js Application (excluding web server)

const userInput = message.content.split(' ') const phoneNumber = userInput[1] const messageToSay = userInput.slice(2).join(' ') if (phoneNumber) { // Dial phoneNumber and deliver messageToSay, then gather ke ...

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

Working with HTML <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="..."> </td> </tr> </tbody> </table> Applying CSS rules * { border: none; ...

Is there a way to achieve a similar outcome on my site?

Recently, I noticed a mouse-hover effect on two websites and found it quite appealing. https://i.sstatic.net/Ly0gP.png https://i.sstatic.net/oDe1i.png This is the specific effect that caught my attention. Can anyone provide me with insight on how to impl ...

What is the best way to alternate $httpBackend when[method] declarations in unit tests to handle multiple requests?

When conducting my testing, I set up the model data and mock the response: beforeEach(function(){ var re = new RegExp(/^http\:\/\/.+?\/users-online\/(.+)$/); $httpBackend.whenGET(re).respond({id:12345, usersOnline:5000}); }) ...

Updating Bootstrap Indicators with jQuery on Click Event

Unfortunately, I am unable to share an image due to limited internet data. My goal is to switch each image to its sprite equivalent. There are three list items that I'm struggling to change because they each have two classes that need to be updated. ...

Exploring the concepts of closure and scope

It seems that the function inResult always returns false and the loop is not being executed, probably due to a lack of understanding of closures. However, I can confirm that the result variable contains the correct properties. function hasId() {return ...

Triggering successive jQuery confirm boxes once the previous one has finished processing

I am facing an issue with my API call response where I receive an array and need to open jQuery Confirm one by one for each item in the response. The problem is that they all open at once. Below is the code snippet: axios.post('/orders/ask-for-or ...

What is the best way to invoke functions with input of type 'number'?

As someone new to HTML, I have an input field with type=number: <input type="number" min="1" value="1" id="amount-input" (click)="chooseStanding(standingspot.priceCategory)"> When the (click) event i ...

Testing Vue with Jest - Unable to test the window.scrollTo function

Is there a way to improve test coverage for a simple scroll to element function using getBoundingClientRect and window.scrollTo? Currently, the Jest tests only provide 100% branch coverage, with all other areas at 0. Function that needs testing: export de ...

Retrieve the input field's value with Selenium, verify its accuracy, and proceed to log a message to the console

Hey there! I'm facing a challenge while working with Selenium Webdriver, specifically Chrome Webdriver and writing tests in JavaScript. The problem is in a section of the code where I can't seem to grab the value typed into an input field using t ...

Application route is failing to direct to the HTML page

On my MEAN stack website, I am trying to make the browser navigate to a file named 'findCable.html' but it keeps directing to 'singleCable.html'. I have double-checked the angular routing file and backend routes, but can't see ...

Tips for modifying style.display using JavaScript

On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...

Understanding surface orientations of moving objects

I am experimenting with creating a software-based vertex animation for a mesh. It's like a vertex shader, but done in software rather than hardware. Essentially, I am applying a transformation matrix to each vertex of the mesh. While the mesh itself ...

Generate list items based on a PHP array using JavaScript

Upon fetching data from my database, I receive a PHP array structured as follows: $dbResult = array([0] => array([a] => 1 [b] => 1 [c] => 1) [1] => array([a] => 2 [b] => 2 [c] => 2) [3] => arr ...

The JQuery datepicker fails to retain the date that is selected

I have a project built with Cakephp 3.6 running locally on my localhost and also deployed on a server. In this project, I am utilizing a datepicker widget as shown below: <?php echo $this->Form->control('created', ['type' ...

The TS2583 error in TypeScript occurs when it cannot locate the name 'Set' within the code

Just started my Typescript journey today and encountered 11 errors when running tsc app.ts. Decided to tackle them one by one, starting with the first. I tried updating tsconfig.json but it seems like the issue lies within node_modules directory. Any help ...

Nuxt and Webpack error: Failed to parse module - Unexpected character (1:0)

https://i.sstatic.net/ope8z.png I am working on a Vue carousel component and my goal is to dynamically generate a list of .png files from the static folder. I have followed instructions from here and also from here. Below is an excerpt from my component: ...