What could be causing my map to not function properly with MeshPhongMaterial?

I am currently working on creating a virtual representation of planet Earth using three.js. Initially, I applied a texture on a MeshBasicMaterial and everything was functioning flawlessly. However, upon switching the material to a MeshPhongMaterial, the map fails to render.

The reason behind wanting to change the material is my intention to incorporate a bump map as well.

Below is the snippet of my code:

let renderer;

const earthGeometry = new THREE.SphereGeometry(5, 50, 50);

const earthMaterial = new THREE.MeshPhongMaterial({
    map: new THREE.TextureLoader().load("../img/globe.jpg"),
  //   bumpMap: new THREE.TextureLoader().load("../img/earthbump.jpg"),
  //   bumpScale: 0.3,
});

const sphere = new THREE.Mesh(earthGeometry, earthMaterial); scene.add(sphere);

Despite no errors being displayed in the console, I am at a loss on how to proceed further. Additionally, I am utilizing svelte and vite in my project, which might be contributing to this issue.

javascriptthree.js

Answer №1

After using a texture on a MeshBasicMaterial with success, I decided to switch to a MeshPhongMaterial. However, I encountered an issue where the map no longer rendered as expected.

If you experience success with MeshBasicMaterial but face difficulties with MeshPhongMaterial, it is possible that there are no lights present in your scene. Consider implementing this basic setup:

const ambientLight = new THREE.AmbientLight( 0xffffff, 0.4 );
scene.add( ambientLight );

const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
directionalLight.position.set( 100, 100, 0 );
scene.add( directionalLight );

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

Pop-up - maintain the initial value

I'm working on a modal using Bootstrap and React. Inside the modal, there's a dropdown with an initial empty option: <select class="form-control" onChange={this.handleSelectCat}> <option disabled selected></option> < ...

javascripthtmltwitter-bootstrapreactjsbootstrap-modal

``I am having trouble with my object key mapping when it is based on

https://i.sstatic.net/3uIeW.png I attempted the following code but it did not work as expected: Object.keys(singleproductdetails).map(function(detail, id) { return ( <div> <ul ...

javascriptreactjs

encountering an issue with data[i].order not being recognized as a function

I have a task to complete, which involves calling JSON objects based on a search and displaying the results in a bootstrap table. I have been trying to solve this in different ways, but as I am new to JS, I haven't been successful. I have been writing ...

javascriptjqueryjsonajaxtwitter-bootstrap

Turning my dual button navigation into tabs to display distinct HTML pages beneath a designated header

body{ background:url(background.jpg); background-size: cover; } h1{ font-family: 'Dancing Script', cursive; font-size: 5em; color: white; text-align: center; margin-top: 25px; margin-bottom: 20px; } h2{ font-size: 18px; color: white; text-align ...

javascripthtmlcss

Creating a customizable dropdown menu in HTML with potential Javascript integration

I'm looking to add a drop-down menu similar to an <options> tag within an HTML form. However, I also want users to have the ability to type in their own input if they choose, in addition to selecting from a predefined list of options. Essentiall ...

javascripthtmlcss

Use the jQuery library to detect scrolling and toggle the CSS class between 'selected' and

I am trying to dynamically add the "selected" class to a[href] when a specific DIV comes into view while scrolling. However, I want to remove this class completely once the DIV has been scrolled past. const links = $(".cd-faq-categories li a"); // Find al ...

javascriptjqueryhtmlcss

Steps to adjust the up axis in OrbitControl

In my mechanical CAD work, I designate the "up" direction as the Z axis (positive towards the sky), however, the orbitcontrol feature in three.js assumes that the Y axis is the sky. I am hesitant to alter the global axis labeling in my code as it would com ...

three.js

Exploring the capabilities of AngularJS directives through ng-html2js testing

Many questions have been raised about the ng-html2js plugin, but unfortunately, none of the answers provided were able to solve my specific issue. I meticulously followed the official installation guide and also referenced the example available at https:/ ...

javascriptangularjsunit-testingng-html2js

What is the syntax for accessing a dictionary item within a <span> tag using JavaScript?

I'm working on a new functionality for a website that involves using a dictionary to store information about clubs, events, and times. var clubName = {}; var event = {}; var time = {}; var dict = new Map(); dict.set(clubName, "G ...

javascriptreactjs

NextJS rewrite retains URL search parameters

After a user clicks the button to access my website through email authentication, I need to verify if they have tokens. When they are redirected from Gmail to my page, there is a search parameter in the form of verification_token=**. If the user has alread ...

javascriptnext.js

Why does the removeChild method in JavaScript consistently remove the last child element, rather than the one specified by its ID?

There are four divs with an event listener onclick, triggering a JavaScript function that simply removes the clicked div: this.parentNode.removeChild(this); Although it should remove the specific div clicked on, it instead deletes the last child and alte ...

javascriptdomremovechild

Numerous XMLHttp requests causing JSON data to be overwritten

I am facing an issue where my JSON data is being overwritten by the result of the last XMLHttpRequest made for each country. Is there a way to prevent this from happening? Below is the code snippet in question: function getDataBetween() { for (var i = ...

javascriptjsonxmlhttprequest

JavaScript Evaluation Error

try { eval(somejavascript); } catch(e) { console.log(e); } When I encounter runtime errors like: TypeError: Cannot call method 'leftPad' of undefined I wonder if there is any way to debug this error. Specifically, I'm looking for ...

javascript

I am encountering errors when running NPM start

After setting up my webpack, I encountered an error in the terminal when attempting to run the code npm start. The specific error message was related to a module not being found. Can someone please assist me with resolving this issue? > <a href="/c ...

javascriptnode.jsreactjsnpmwebpack

Having trouble rendering a dynamic table with JavaScript utilizing a JSON object

I am struggling to retrieve data in JSON format and display it in a table. Despite trying various methods, I have been unable to make it work. Below is the code for this function. Can someone please assist me in identifying what is wrong with it? As of now ...

javascriptjqueryarraysjson

What is the process of retrieving the return value after creating data in Firestore

I have been experimenting with creating data using firestore in the following manner: createData({state}) { return db.collection('items').add({ title: state.title, ingredients: state.ingredients, creat ...

javascriptvue.jsgoogle-cloud-firestorevuex

Learning how to effectively incorporate two matSuffix mat-icons into an input field

I'm currently experiencing an issue where I need to add a cancel icon in the same line as the input field. The cancel icon should only be visible after some input has been entered. image description here Here's the code I've been working on ...

javascripthtmlcss.netangular

Retrieving the IPv4 Address from an Express.js Request

I am currently working on setting up a whitelist for IP addresses in my API. However, when I use request.socket.remoteAddress in Express.js, I receive an IPv6 address (I believe) that looks like this: ::ffff:127.0.0.1. My main concern is how can I extract ...

javascriptnode.jsexpress

Observables in Knockout.js vanish after being bound

I'm encountering a peculiar issue with my Knockout script. Here is the viewModel: viewModel = { viewShown: function () { if (params.id !== undefined) timer = setInterval(loadVorgangsdetails, 100); else { $( ...

javascriptjsonknockout.jssignalrdevextreme

Retrieve Gridview properties using JavaScript

I need to adjust the font size of my gridview using JavaScript to make it more suitable for printing. What is the best way to change the font size specifically for a gridview using JavaScript? ...

c#asp.netjavascriptvisual-studiogridview