The issue of Three js object turning dark after implementing Phong Shading

I have a project where I am displaying 3 cubes and toggling between MeshLambertMaterial and MeshPhongMaterial when pressing the A key. However, I'm facing an issue where the object turns black when applying the phong shading, even though I've calculated the normals of the vertices beforehand.

While the code is quite extensive, the crucial part to focus on is the function changeMaterial, as this is where the phong shading is implemented

Key Function:

function changeMaterial(change) {
    for (i = 0; i < figures.length; i++)
    {
        if (change)
        {
            figures[i].material = new THREE.MeshLambertMaterial( {color: 0xff0000} );
            figures[i].material.shading = THREE.FlatShading;
            figures[i].material.shading = THREE.SmoothShading;
            figures[i].geometry.normalsNeedUpdate = true;
            figures[i].geometry.computeVertexNormals();
        }
        else
        {
            figures[i].material = new THREE.MeshPhongMaterial( {color: 0xff0000} );
            figures[i].geometry.computeVertexNormals();
            figures[i].geometry.normalsNeedUpdate = true;
            console.log(figures[i].geometry);
            figures[i].material.specular = 0x111111;
            figures[i].material.shininess = 10;
            figures[i].material.shading = THREE.FlatShading;
            figures[i].material.shading = THREE.SmoothShading;
            figures[i].material.needsUpdate = true;
            figures[i].geometry.normalsNeedUpdate = true;
            console.log(figures[i].geometry);
        }
    }
}

Program:

/*
Your program logic goes here
...
*/

Answer №1

In order for MeshPhongMaterial to be visible, lights must be present in the scene.

const directionalLight = new THREE.DirectionalLight(0xffff00, 1);
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

Global Variables Evolution as Variables are Assigned

So I'm encountering an issue where running a function and assigning variables to the data seems to be updating my global every time. I've double-checked my code, but I can't seem to pinpoint where the update to the global is coming from. Am ...

Filter out the selection choice that begins with 'aa' in the drop-down menu

Here is a select field with various options: <select id="sel"> <option value="1">aadkdo</option> <option value="2">sdsdf</option> <option value="3">aasdfsddkdo</option> <option value="4"> ...

Error VM5601:2 encountered - Unexpected token "<" found in JSON at position 10

I am trying to retrieve data using Ajax and jQuery, but I keep encountering an error that I cannot figure out how to fix. VM5601:2 Uncaught SyntaxError: Unexpected token < in JSON at position 10 Below is the code I am working with. Model public f ...

Utilizing JavaScript to set a cookie value and using PHP to showcase its content

I'm facing an issue with my output and can't seem to pinpoint the problem. Below is the code snippet in question: sample.js var m_names = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October" ...

Can an Object be extracted from a nested array using a MongoDB Query?

In my mongoose schema, I have the following structure: var AttendanceSchema = new mongoose.Schema({ ownerId: mongoose.Schema.Types.ObjectId, companyId: mongoose.Schema.Types.ObjectId, months: [ { currentSalary: { type: Number, ...

Error: JSON at position 1 is throwing off the syntax in EXPRESS due to an unexpected token "

I'm currently utilizing a REST web service within Express and I am looking to retrieve an object that includes the specified hours. var express = require('express'); var router = express.Router(); /* GET home page. ...

Tips for adjusting column width with flexbox intersections

I am currently working on a React web application that has minimal styling. I have divided the content into 3 columns, with the leftWrap being col-3, rightWrap being col-4, and the remaining width is for centerWrap. I want to apply flex ...

Steer clear of using the onRowClick event if an outputLink is clicked within a RichFaces datatable

What is the best way to prevent the call to onRowClick on a column with an output link in a datatable that targets a new window? <rich:dataTable id="dt" value="#{bean.cars} var="_car"> <a:support event="onRowCli ...

Unchecked checkbox displays as checked in UI

I am facing an issue with checking checkboxes using JavaScript. Even though the checkbox appears to be checked in the program, it does not reflect the updates on the user interface. If anyone has a solution for this, please share. <!DOCTYPE html> ...

Secure the data from a distant server by utilizing XMLHttpRequest

While I have come across a few similar threads, my problem still feels unique to me, so I am hoping for some assistance. What I am trying to achieve is using a proxy to bypass the same origin policy and retrieve values that change over time, which need to ...

Controlling ever-changing routes using AngularJS

My AngularJS app (Angular v1) has a secure login system in place. Users who are not authenticated can only access the login page, forgotten password page, and cookie policy. I am utilizing ngRoute as shown below: $routeProvider .when('/login ...

Entering data into a webpage and retrieving the result from a designated cell in a Google Sheets document

Currently, I am in the process of developing a school platform and I am looking to incorporate a functionality that allows students to easily check the number of "passport" points they have earned. I envision having an input field along with a button that ...

Generating a new array and merging different sets of keys together

Is there a way to modify how items are added to a jQuery array? Here is the current code snippet in use: var sub_updated = []; $('.current-sub-items').each(function() { $(this).find('.prod-select').each(function() { if ($(th ...

Turning simple text into JSON format

Beginner JS coder here, currently developing a program that pings IoT devices on a network and outputs a true or false value based on the success of the ping. Everything is functioning well so far, but I'm now attempting to extract specific propertie ...

Secure user verification using session variable in the Express framework with NodeJs

Is it safe to use session variables for login persistence in the backend? What are the security implications and alternatives to consider? Technology Stack: Express (NodeJs) on the backend, MaterialUI (React) on the frontend I am seeking a straightforwa ...

Setting up Swiper in a ReactJS environment

I've been trying to incorporate Swiper for a slider in my React application, but it's not behaving as expected. Here's what I did: npm install Swiper Then I imported Swiper in the componentDidMount method of my component like this: import ...

After compiling, global variables in Vue.js 2 + Typescript may lose their values

I am currently working on a Vue.js 2 project that uses Typescript. I have declared two variables in the main.ts file that I need to access globally throughout my project: // ... Vue.prototype.$http = http; // This library is imported from another file and ...

Express.js: Defining a base route can cause issues with resolving static files

I'm currently working on a project using express.js and react.js, but I've encountered some issues that I can't seem to find solutions for. I have set up a base directory where the express server is located, and within that, there's a ...

Trouble resolving a timer interruption in JavaScript

Creating dynamic elements using PHP has brought me to a new challenge. I want to implement a functionality where the user can hover over an icon and see the related element, which should disappear after some time if the mouse leaves the icon. Additionally, ...

Initiate a button click event from the parent element situated within an Iframe

I am facing a challenge in accessing a button within an iframe. The path to the button is as follows: div.iframe-container > iframe#builder-frame > html > body > div#header > ul.header-toolbar.hide > li > span.deploy-button-group.butt ...