The textures in three.js material do not interact with lighting sources

I am curious about whether a textured geometry can be successfully lit in three.js. In my current scene, I have noticed that all materials receive lighting effectively when using spotLight and directionalLight, except for those that have a texture applied like in the following example:

var geometry = new THREE.OctahedronGeometry(1, 0)
var orange =  new THREE.TextureLoader().load( 'img/orange.jpg' );
orange.wrapS = THREE.RepeatWrapping;
orange.wrapT = THREE.RepeatWrapping;
orange.repeat.set( 4, 2);

var material = new THREE.MeshBasicMaterial({ 
    map:orange, side:THREE.DoubleSide 
    });

var oct0 = new THREE.Mesh( geometry, material );
    oct0.castShadow = true;
    oct0.receiveShadow = false;
    scene.add( oct0 );
    oct0.position.x = 0;
    oct0.position.y = 5;
    oct0.position.z = 0;

For reference, I am currently using Chrome, Safari, and three.js r89. Any guidance or tips would be greatly appreciated!

Answer №1

MeshBasicMaterial does not react to lighting effects.

However, there are several other pre-programmed materials that do. Such as MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial.

This information applies to three.js version r.89

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

Breaking Down the Process of Exporting a Next.js Static Website into Manageable Parts

I am facing memory issues while building my website using Next.js's Static HTML Export. The site has a large number of static pages, approximately 10 million. Is it feasible to export these pages in batches, like exporting 100k pages in each build ite ...

Failure to initiate JavaScript function with onClick event

I've been struggling with a simple issue related to calling a javascript function. After spending several hours trying to debug it on my own, I'm reaching out for help in the hopes that a fresh perspective can assist me. Here is the snippet of c ...

What is the method to escape from a for loop in Protractor?

Check out my code snippet: formElements[0].findElements(by.repeater(repeater)).then(function(items){ console.log(i, '>>>>>>>>>.No of items in the list --- '+items.length); (function(items){ ...

The message sent from the server via SocketIO seems to be malfunctioning

Currently, I am in the process of developing an application that utilizes websockets for facilitating server-client communication. The main idea behind this concept is to enable the client to request messages from the server, while also allowing the server ...

Most effective method for structuring a JSON format that contains recurring keys for every item within its array

Currently, I'm creating a JSON object that includes multiple addresses. My main concern is the potential for the JSON size to grow too large, which could impact browser performance and parsing speed in JavaScript. Each address includes keys such as "I ...

Execute a script once the AngularJS view has finished loading

Just starting out with AngularJS and I've encountered an issue; I'm populating part of my view with HTML from a variable in my controller: <div ng-bind-html="deliberatelyTrustDangerousSnippet()"></div> Everything works as expected ...

Clear the Material-UI textfield upon form submission

After submitting the form, how can I clear the value from the TextField? All of the components in my code are functional components, not class ones. The example below shows one of the TextFields, with others similar to it. Currently, setting type='sea ...

The issue of deleting the incorrect document ID in React Firebase

I'm currently facing an issue while trying to implement a delete operation on a Firebase database using Reactjs. The problem lies in my function that seems to be fetching the wrong id from Firebase. There's a button triggering the handleOpen fun ...

Deliver JSX components that match one or more keys in the array of strings

Seeking assistance and guidance here. It seems like I might be overlooking something obvious. I am attempting to create a component that accepts either a string or string Array string[] as a property. const ComponentThatReturnsElement = (someElementName) = ...

Is it possible to identify when someone is copying a URL in a web browser?

During a recent conversation with a taxi driver, I mentioned that I work as a programmer. He then proceeded to tell me about an unusual experience he had a few days ago. While trying to copy the URL from his browser's address bar, a message box popped ...

The Jquery delete button is efficiently targeting and removing all image sources and identifiers within a Multiple Upload feature

I need help creating a delete button for my ImageUploader. I can successfully select an image and display it in a div on my page, but deleting the current image is proving to be challenging. When I click on the delete button, instead of getting the id and ...

Material UI: Dynamic font scaling based on screen size

If I were to adjust the font size responsively in Tailwind, here's how it would look: <div className="text-xl sm:text-4xl">Hello World</div> When working with Material UI, Typography is used for setting text sizes responsively. ...

Hide the Modal Content using JavaScript initially, and only reveal it once the Onclick Button is activated. Upon clicking the button, the Modal should then be displayed to

While trying to complete this assignment, I initially attempted to search for JavaScript code that would work. Unfortunately, my first submission resulted in messing up the bootstrap code provided by the professors. They specifically requested us to use Ja ...

How to seamlessly integrate Redux into your React project using create-react-app?

Is it correct to pass a reducer as props when using a rootreducer? This is the content of my rootReducer.js file: import { combineReducers } from 'redux'; import simpleReducer from './simpleReducer'; import messageReducer from '. ...

Remove Vue Component from the styling of current application

We integrated a Vue component (using Vuetify) into our existing .NET MVC application. The issue we are facing is that the Vue component is inheriting all the CSS styles from the rest of the application. Here's a simplified version of the HTML structur ...

Looking to switch up the thumbs-up button design?

I am a beginner in using jquery and ajax, and I need some assistance. How can I incorporate this jquery code into my logic: $('.btn-likes').on('click', function() { $(this).toggleClass('liked'); }); Can so ...

Sorting table by priority in HTML is not functioning as expected

I am currently developing this code for a SharePoint 2010 platform. While the table can currently be sorted alphabetically, I am looking to implement a different functionality. Unfortunately, I am facing an issue with changing variables 'a' and ...

Encountering difficulties in applying a dynamic aria-label to the md-datepicker component

I am currently utilizing the md-datepicker feature in my project. You can check out how it works here: https://material.angularjs.org/latest/demo/datepicker However, I am facing an issue where I am unable to dynamically add a value to the aria-label attri ...

The aspect ratio of an image is being calculated by loading the image twice

I am currently facing the issue where the same image is loading twice for a single preview. The first time the image is loaded for preview purposes in an iframe. The second time, the image metadata such as width and height are fetched with the same path. ...

Obtain a specific portion of text from a string that resembles a URL

$("#index-link")[0].search = "?isNameChecked=False&isDateChecked=False&isStatusChecked=True" Is there a way to use jQuery to identify whether isStatusChecked is set to true or false in the given string? ...