I seem to be having issues with the way the lighting is functioning in three.js; it is not acting

There's this fiddle I'm working on, you can check it out here. It contains the html/js code for a terrain generated by PHP.

The problem I'm facing is that the shadow and other renderings are not displaying as expected.

Here is my current lighting setup:

  var ambientLight = new THREE.AmbientLight(0xffffff);
  scene.add(ambientLight);

  // directional lighting
  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(400, 200, 3000).normalize();
  scene.add(directionalLight);
javascriptthree.js

Answer №1

What kind of visual effects are you aiming for?

Currently, the code is utilizing MeshBasicMaterial. According to the documentation, this material is used for rendering geometries in a simplistic shaded manner (flat or wireframe).

MeshBasicMaterial
A material for drawing geometries in a simple shaded (flat or wireframe) way.

I suggest taking a look at this particular example to explore the various materials available and how they will appear in your project.

For instance, this fiddle compares the outcomes of using a MeshBasicMaterial versus a MeshLambertMaterial.

Hopefully, this information proves useful.

UPDATE

It seems that your mesh creation process lacks the generation of normals. To achieve desired shading effects with a MeshLambertMaterial, the calculation of normals is crucial in determining light variations:

  • The reflection relies on the dot product of the surface's normal vector, N, and a normalized light-direction vector, L, pointing from the surface towards the light source (wikipedia)).

You can utilize the geometry.computeFaceNormals(); function to assist in this process.

Feel free to check out this fiddle for further insight.

In addition, consider exploring JS array objects along with implementing for loops for enhanced functionality.

Hope this guidance serves you well.

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

Creating a dynamic display of flash files on a webpage through a unique combination of PHP, AJAX, and

Despite my lack of experience with Ajax and minimal java knowledge, I have a strong background in SQL and PHP. Even though I anticipate criticism for this question, I am determined to seek help. My primary objective is to rotate 4 flash SWF files randomly ...

javascriptphpajaxflash

Is it possible to pre-select a value in a PrimeVue Dropdown component?

Situation: Currently, I am incorporating PrimeVue into a Vue.js project. Within this setup, there is a dropdown component sourced from PrimeVue, utilizing an array of objects. The structure of the dropdown component appears as follows: <template #positi ...

javascriptvue.jsprimevue

Tips for choosing a loaded element using the jQuery load() method

I am currently facing a challenge with the following (here is a snippet of code to illustrate): <div id="container"></div> <script type="text/javascript"> $('#container').load('content.html'); $('.eleme ...

javascriptjqueryajaxasynchronous

Is there a way to deactivate the Edge mini menu while selecting text in a React application?

I have recently been working on a React web application and managed to create a specialized text selection menu. However, I am facing a challenge in programmatically disabling the default text selection mini menu in React. The image attached illustrates bo ...

javascriptreactjsmicrosoft-edge

What is the best way to activate CSS filters on VueJS once the project has been compiled?

While working on a Node server locally, my SVG filter functions properly. However, once I build the project and run it on a server, the filter stops working. This VueJS project is utilizing Webpack as its build tool. The process of building the app invol ...

javascriptcsssvgvue.jsfilter

execute field function prior to sorting

Currently, I am building a graphql server in express and using a resolver to modify my fields based on user input from the query. The issue arises from the transformer function returning a function. My goal is to sort the results by a field determined by ...

javascriptnode.jsexpressgraphql

Troubles encountered with jQuery validate plugin in ASP.NET controls functionality

I'm having trouble using the jQuery plugin validate() method to validate a div within my current SharePoint Visual WebPart. I can't figure out why it's not working at all. Here is the code: <div id="main" runat="server"> ...

javascriptjqueryasp.netweb-parts

Error message: Trying to call the prepare() function on a null variable within the CRUD system

I have implemented a CRUD system on my website. The main page (avisos.php) displays a table with all the existing records. When a user clicks on the "ADD NEW RECORD" button, the following script is triggered: $("#btn-add").click(function(){ $(".co ...

javascriptphpjquerymysqlajax

Trouble encountered when trying to use an anchor link with the .slideUp jQuery function

Would you be able to assist me with understanding why my anchor links are not functioning correctly? I have 3 anchor links, for example: Google (not working) Yahoo (not working) Facebook (working) Any insights on why Google and Yahoo are not working? &l ...

javascriptjqueryhtml

What is the best way to know which API will return the result the fastest?

If we were to make 2 API calls, each taking around 6ms to return JSON data, what would be the sequence in which they provide the resulting data? The official JavaScript documentation mentions using Promise.all to manage multiple API calls. ...

javascriptnode.jsapi

Protractor functions perfectly on localhost, but encounters a Timeout error when used remotely - the asynchronous callback was not executed within the specified timeout period

Running protractor protractor.conf.js --baseUrl=http://localhost:4200/ executes successfully by filling data, validating elements, etc. However, when attempting to test the same website through a remote URL protractor protractor.conf.js --baseUrl=http://t ...

javascriptangularjasmineprotractore2e-testing

Is Incrementing and Refreshing in Vue.js: a glitch or a capability?

I've been delving into vue.js to enhance my skills and encountered an interesting behavior that I can't quite figure out. The scenario involves incrementing and re-rendering a basic output like so: <div id="app"> <h1> Seconds : { ...

javascriptvue.js

AJAX Post data transmission on the network: Enhancing data formatting

For my AJAX post call, I need to format the data differently. The server is expecting the data in a specific format when viewed in Chrome Network Headers details. My task is to update the JavaScript code below to meet this formatting requirement: percenta ...

javascriptjqueryajaxasp.net-mvc-4

Retrieve the file for saving using the HttpPost method in Asp.Net MVC

In my Asp.Net MVC project, there is a page where users can edit data loaded into a table, such as changing images, strings, and the order of items. Once all edits have been made, the client clicks on a Download button to save the resulting xml-file on the ...

javascriptc#angularjsasp.net-mvchttp-post

What is the process for sending a single post to two separate actions?

I am working with HTML and Javascript code to send a form using method=post to an action="www.randomaction.com/randomaction.php". My goal is to also send the form data to my email (the same post), but without opening the user's mail client. Instead, ...

javascriptphphtmlemailpost

Use JavaScript to create a new window and load the HTML content from an external URL

Just starting out with HTML and Javascript I'm trying to use JavaScript to open a window and load content from an external source. I attempted using document.write(), but it only works when I hardcode the HTML as input. Any suggestions on how to get ...

javascriptjqueryhtmlweb

I am struggling to pass the button's id from PHP to JavaScript

How can I retrieve the button id from a PHP file that has been fetched and use it in JavaScript? Below is my JavaScript code: $("#heys").click(function(){ var fruitCount = $(this).attr('data-fruit'); console.log(fruitCount); }); ...

javascriptphpjquery

Using jQuery to remove an iframe upon a click event

My goal is to remove an iframe whenever anything on the page is clicked. I tried using this code: $('*').on('click',function(){ $('iframe').remove(); }); However, I encountered a problem where the i ...

javascripthtml

Remove an image that has been selected while uploading multiple images using AngularJS

If I want to delete a specific image from multiple uploads by clicking on the image in AngularJS, how can I achieve this? Each uploaded image has an associated textbox. When the delete icon on the image is clicked, both the image and the corresponding text ...

javascriptangularjsimage

Tips for distinguishing individual submit buttons within a foreach loop

Here is my code snippet: <?php require_once 'core/init.php'; if($result = $db->query ("SELECT * from countries")) { if($count = $result->num_rows) { $rows = $result->fetch_all(MYSQLI_ASSOC); } ...

javascriptphp