Experiencing difficulties working with PhongMaterial in THREE.JS

When attempting to apply a PhongMaterial to the wings of my aircraft, I noticed that one wing displays shading correctly based on the sun's position, while the other wing seems to always shade in the same way regardless of the lighting angle, only changing in reflection intensity.

The specific materials being used are as follows:

    new THREE.MeshPhongMaterial({
      vertexColors: THREE.FaceColors,
      shininess: 30,
      color:0xA9A9A9,
      side: THREE.BackSide,
      //emissive: 0xA0A0A0,
      //emissiveIntensity:0.8
    }),
    new THREE.MeshPhongMaterial({
      vertexColors: THREE.FaceColors,
      side: THREE.FrontSide,
      color: 0x00ffff,
      shininess: 30,
      emissive: 0x00ffff,
      emissiveIntensity: 0.9
    }),

View image with light source on each side

It is evident that the right wing responds properly to the lighting, whereas the left wing does not.

See image description here

Even when the light source is directly above the left wing, it still does not reflect accurately. On the contrary, the right wing behaves as expected.

Both wings utilize the BackSide setting, have identical materials, and are constructed in the same manner. I am using THREE.Geometry for this task, meticulously crafting every triangle. The math has been double-checked, and .computeVertexNormals() has been called.

I am puzzled by this issue and would greatly appreciate any assistance or insights anyone can provide.

Answer №1

After much investigation, I have discovered the cause of the bug. It turns out that the distance between the bottom and upper faces of the wing was too small. It's strange that the right wing didn't experience any issues, but I have rectified the problem on both wings now. Thank you for your assistance regardless.

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

Utilizing require() in a dynamic way

When working with Browserify, the following code snippet works successfully: var b = require('path/file.js') However, when trying this code it does not work as expected: var a = 'file' var b = require('path/' + a + '.j ...

Get Picture from NextJS API endpoint

In my current project, I am utilizing Next.js with Typescript. A unique scenario has arisen where the Next.JS client and server are on separate hosts. The client necessitates displaying an image from a different service located at localhost:3001/...., but ...

Having trouble selecting elements that have been dynamically generated through an Ajax callback function

During an AJAX callback, I am trying to insert a DIV with a unique ID into another specific DIV called A. However, after each call, if the div with the given id is not found as a child element of DIV A, a new DIV is created and appended. Strangely, every t ...

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

The ES6 approach: iterator.throw(err) is often explained as inserting an exception as if it happened at the yield statement within the generator. The challenge lies in the fact that the stack trace of this exception does not include any information about t ...

How can I utilize a custom function to modify CSS properties in styled-components?

I am working with styled components and need to set the transform property based on certain conditions: If condition 1 is true, set the value to x. If condition 2 is true, set the value to y. If neither condition is true, set the value to null. Despite ...

Tips for navigating upwards to a specific element and successfully clicking on it in Selenium

I am facing a situation where the system needs to scroll upwards to reach the web element located in the left panel of the page and then click on it to proceed with other operations. I have attempted various methods but none seem to be effective. Can anyon ...

The local authentication feature in NodeJS Passport is experiencing issues and not functioning properly

I have integrated passportjs local for authentication. However, I am facing an issue where it always redirects to the failureRedirect without displaying any error messages. The redirect also includes the original username and password, resulting in a dupli ...

The $multiply function is only compatible with numerical data types, not arrays

Attempting to utilize the $multiply operator within MongoDB. STEP 1 db.message1064sd_00011_3744.aggregate([ {$project : { "prices.00026" : 1, priceReal : { price : "$prices.00026", } }}, { $match : { ...

Determining the time gap in milliseconds between two specified times using the "DD/MM/YYYY HH:mm:ss:ms" format in JavaScript

I have a situation where I need to calculate the time difference between two timestamps. Starting time: "2014/10/28 11:50:28:318" Ending time: "2014/10/28 11:50:35:249" To achieve this, I utilized moment.js for the calculation. Here is my code: var msE ...

Utilizing Gulp to Convert TypeScript Exports into a JSON File

I have a set of TypeScript files, some of which export a specific variable - named APIS - which contains an array of objects. My goal is to extract the values from all of these exports and save them into a JSON file using Gulp. Let's consider a direc ...

Mastering the map() function in Vue.js 2

As I start learning vue.js, I am facing some challenges. I need to implement a dictionary analog in JavaScript, known as a map. However, I'm unsure of where to define it. The map should be utilized in both the checkDevices() method and within the HTML ...

What causes the color of mesh to not update in three.js?

I am currently using three.js to generate some objects: // Understanding the source of geom1 or geom2 may not be necessary var materials = [ new THREE.MeshLambertMaterial( { opacity: 0.2, color: 0x000000, transparent:false, side: THREE.Dou ...

Knockout Observable Array causing UI to freeze and not refresh properly

I recently started using knockout and am exploring the use of observable arrays to track changes from the UI. The initial data is loaded into the array and I'm attempting to dynamically add new objects to the array from another screen. Although I hav ...

I'm really confused as to why I am receiving an undefined error in this code. Can someone please assist

I'm encountering an issue with getting undefined in this section of code. Is there a way to fetch the data using useEffect, and once everything is loaded, how can I efficiently store it in a useState variable and then display the necessary content? co ...

Why does jQuery function properly in jsfiddle, but not in an HTML file?

I have been troubleshooting repeatedly, but I am unable to figure out why the jQuery code is not functioning as expected. Strangely enough, it works perfectly in jsfiddle! Here is the HTML code: <!doctype html> <html> <head> <meta ch ...

Shuffling specific table cells to exchange positions

I am attempting to create a script that will allow certain td elements (but not all) in different tr elements to switch places with the ones directly above or below them. My goal is to only target the last 3 td elements in each row, rather than the entire ...

Transform a div's style when hovering over another div using absolute positioning without repetition

I am facing an issue with multiple divs positioned absolutely on top of a primary div with relative positioning. I want one specific div to change its background-color when hovering over another div within the same parent div. Though I know about ad ...

Unable to adjust dimensions with CSS width and height properties

I'm currently working on developing an online game with a login screen inspired by Paper.io. I have created the username input and play button, but there seems to be an issue with the width and height specified in the CSS file for the input field. Eve ...

showcasing a set of div elements by using forward and backward buttons

I am dealing with 5 divs that have text content inside. To navigate through each div, I have implemented a back and next button system. <a href="" class="back-btn off">Back</a> | <a href="" class="next-btn">Next</a> <div class ...

Modifying the color of the initial day of an event on fullcalendar.io v5

Is there a way to change the background color of only the first day of an event, while keeping the rest of the days the default color? I came across the function eventDidMount: function (event){ }, but I'm not sure how to specifically target and cha ...