Issues with lighting on textures in Three.js

I've been working on a simple solar system project using three.js. I've completed everything, but now I'm facing an issue with adding shading when working with textures.

loader.load("earth.jpg", function ( texture ) {
    var geometry = new THREE.SphereGeometry( 100, 20, 20 ),
        material = new THREE.MeshLambertMaterial({
            map: texture,
            overdraw: true,
        }),
        mesh     = new THREE.Mesh( geometry, material );

    group.add( mesh );
});

When I replace map: texture with color: 0xffffff, the rendering works perfectly. However, as soon as I try to add a texture, the lighting and shading effects seem to disappear.

Any ideas why the lights aren't interacting correctly with the textured surfaces?

Should I consider creating two separate spheres for each planet - one with a texture applied and another transparent sphere for shadows?

Answer №1

One issue with the CanvasRenderer is its lack of support for using MeshLambertMaterial and diffuse textures together.

To work around this limitation, consider switching to the WebGLRenderer instead.

Version r.65 of three.js was used in this example.

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

Enhancing the templateUrl with additional value in AngularJS and PHP

I am having trouble capturing the value of the {fold} and adding it to the templateUrl. The php file show.person.php is returning an error because it is only recognizing 'id' as '{fold}' and not as a number like '54' In my co ...

What is the proper error type to use in the useRouteError() function in react-router-dom?

In my React project, I am utilizing the useRouteError() hook provided by react-router-dom to handle any errors that may arise during routing. However, I'm uncertain about the correct type for the error object returned by this hook. Currently, I have ...

Switch up a font style using JavaScript to apply a Google font effect

I am attempting to implement a discreet hidden button on a website that triggers a unique Google font effect for all of the h1 elements displayed on the page. However, I am uncertain about the process and unsure if it is achievable. Below is the code snipp ...

The onProgress event of the XMLHttpRequest is triggered exclusively upon completion of the file upload

I have a situation with my AJAX code where the file upload progress is not being accurately tracked. The file uploads correctly to the server (node express), but the onProgress event is only triggered at the end of the upload when all bytes are downloaded, ...

HighCharts fails to display on Polymer webpage

I am working on a project that involves using Polymer alongside HighCharts. Here is the code I have implemented: HTML : <div class="container" layout vertical center> <paper-shadow z="1" class="span-shadow"> <post-card id ...

javascript creating a module to extend a nested object

Currently, I am working on a JavaScript module that includes an object of default options. Here is a snippet of the code: var myModule = function() { // Define option defaults var defaults = { foo: 'bar', fooObject: { option1 ...

Issue with passing props from parent component to child component in Vue.js not functioning

As a newcomer, I have been assigned a project that involves using Vuejs. In this project, there is a page that utilizes a component called DashboardCard. Each DashboardCard receives 2 props - val and icon from the parent component. https://i.stack.imgur. ...

Displaying a relative div on mouse hover over an HTML tag using React

In the section below, you will find the code snippet... <ul className="no-style board__list"> {Object.keys(today.books).map(function(id) { var refBook = today.books[id][0]; return ( ...

What is the process for sending a post request and displaying the response on a new webpage?

If I want to send a POST request and display the response as a complete page by submitting a form, how can I achieve the same result using an ajax request? Specifically: $.ajax('test.com', { 'method': 'POST', 'su ...

Attempting to create a functional action listener for a deck of cards game

I'm currently working on a game and want to make an image appear blank when clicked on, to simulate it disappearing. Specifically, this is for a tri peaks solitaire game. I have a function that tests the validity of playing a card, but I'm strugg ...

Enhancing Charts with Icon Images on the Y-Axis Using Britechart

Currently, I am utilizing Vue with Britecharts to create a horizontal bar chart. My goal is to integrate avatar images on the y-axis beside the name label. After conducting some research, I came across helpful resources such as D3 How to place image next t ...

Unable to locate module: '@material-ui/pickers' - Material UI React

I encountered an error that said: Material UI React - Module not found: Can't resolve '@material-ui/pickers' in React. Previously, I faced a similar issue with '@date-io/date-fns' but was able to fix it by updating to the latest ...

Restricting the input on a React component to only accept alphabet characters from A to Z instead of allowing any keyboard

I am currently facing a challenge with understanding a specific component, particularly the allowForClassification value. This boolean value is passed down to a child component and decides whether a button is displayed or not. The issue arises when tryin ...

Implementing modifications to all HTML elements simultaneously

In my HTML document, there are around 80 small boxes arranged in a grid layout. Each box contains unique text but follows the same structure with three values: name, email, and mobile number. I need to switch the positions of the email and mobile number v ...

What is the best way to ensure type safety in a Promise using Typescript?

It seems that Promises in Typescript can be type-unsafe. This simple example demonstrates that the resolve function accepts undefined, while Promise.then infers the argument to be non-undefined: function f() { return new Promise<number>((resolve) ...

Assign the value from a drop-down menu to an SQL variable dynamically without the need for a submit button

I am trying to retrieve the value of the selected item in a drop-down menu populated from an SQL database. This value is essential for me to formulate the SQL statement required to access a specific record. The drop-down menu has already been populated. S ...

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Below is a summarized version of my code: HTML <a onclick="showHideDiv('bio')" target='_self'> bio <div id="bio" class="shadowScreen" style="display: none;"> <p class="showBio"> Bio! </p> &l ...

Incrementally including DIV elements...one by one...2, 4, 6, 8, 10, 12

I am in the process of creating animated div boxes step by step that are activated when a button is pressed. The current code I have is working smoothly, with the box moving right and then left back to its original position. You can see a demo of this here ...

Transmit information from the frontend to the backend using JavaScript and the Express framework

After creating a custom variable in my frontend to store data, I needed to access the same data in my Express backend. The JavaScript variable and the POST request code snippet are as follows: const dataPush = { urlSave: urlSave, ...

Navigating with React Links in the wrong context is not possible

Currently in the process of setting up react-router, I have encountered an error stating Uncaught Error: <Link>s rendered outside of a router context cannot navigate.. Despite scouring through various resources on Github and here, none of the solutio ...