My threejs material is giving me some issues with the color rendering

I set out to create simple black and white plane objects. There are two lights in the scene, an ambient light and a point light:

...
    this.ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.1);
    this.light = new THREE.PointLight( 0xFFFFFF, 0.1 );
...

Next, I created and added the planes to the scene:

...
    let plane1 = this.create('plane', this.white);
    let plane2 = this.create('plane', this.black);
    plane2.position.x = 3;

    this.scene.add(plane1);
    this.scene.add(plane2);
...

The resulting image can be seen here (link to picture):

https://i.sstatic.net/FcBfn.jpg

Distinguishing between which plane is white and which is black proves difficult. I suspect I made an error.

I believe the issue lies in my use of PhongMaterial for both planes. I chose this material type as I want the lighting to affect them while also retaining their shading. However, I wish to lessen the colorization effect that renders them both black.

Details of my materials for white and black planes:

white = new THREE.MeshPhongMaterial(<any>{
    ...
  });

  black = new THREE.MeshPhongMaterial(<any>{
   ...
  });

If anyone with experience could assist me with this issue, I would greatly appreciate it! Thank you for your time!

Answer №1

The constructor for PhongMaterial did not have clearly defined objects. The Color property should be structured like this:

...
new THREE.Color(r: 0, g: 0, b: 0)
...

rather than:

...
{r: 0, g: 0, b: 0}
...

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

Seeking the perfect message to display upon clicking an object with Protractor

Currently, I am using Protractor 5.1.1 along with Chromedriver 2.27. My goal is to make the script wait until the message "Scheduling complete" appears after clicking on the schedule button. Despite trying various codes (including the commented out code), ...

arrange the elements in a specified sequence

I am trying to sort an array in a specific order var customOrder = { "1st Presentation / Meeting": 0, "Follow-On Meetings": 1, "Hold\/Uncategorized": 2, "MGL": 3, "PGL": 4, "BGL": 5, "RGL": 6, "SGL": 7, "Uncategorized Leads": 8, ...

Unable to receive data in an array with Vuejs

Here is the code snippet I am working with: let data = res.data.data; console.log('data: ', data) const list = []; for(let i = 0; i < data.length; i++){ console.log('data i: ', data[i]) //this line is not being printed in the ...

Is it possible to modify CSS properties by clicking on buttons?

Hello, I really need help with this task. I want to change the style of a button (which is actually a link) by clicking on it. These buttons are housed within a dynamic child div that changes each time, but the name of the dynamic child div remains con ...

Retaining the Chosen Tab upon Page Reload in Bootstrap 5.1

Struggling to maintain the selected tab active after page refresh. It's worth noting that I'm using Bootstrap 5.1 and have tried various solutions found for different versions without success. <ul class="nav nav-pills mb-3" id=&q ...

Employing state management in React to toggle the sidebar

A working example of a sidebar that can be toggled to open/close using CSS, HTML and JavaScript is available. Link to the Example The goal is to convert this example to React by utilizing states instead of adding/removing CSS classes. To ensure the side ...

The FormData() object in Django backend is consistently found to be void of any data

I am currently experimenting with uploading an HTML form through AJAX using pure JavaScript, without jQuery. The form is put together in my template by combining three components: the CSRF token, a ModelForm, and a regular Django form (forms.Form). The vis ...

Mastering asynchronous function handling in Node.js

I'm currently experiencing an issue with printing two statements using two functions var mongoose = require( 'mongoose' ); var_show_test = mongoose.model( 'test' ); exports.showTest = function(req,res) { var jsonString = []; ...

Tips for effectively implementing correct reselection in a React-Redux application

I have a system that allows users to search for data based on their input. I am currently implementing reselect in my application. import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux" ...

Connect an Angular Service object to a Controller's Scope and keeping it in sync

I am facing an issue with the interaction between my EmployeeService and EmployeeController. The service contains a specific object which I bind to the controller's scope: app.controller('EmployeeController', function($scope, EmployeeServic ...

Utilizing a jQuery click event to modify the placement of a table

I have a request regarding the tables within the #middlebox. I would like to be able to rearrange the table positions by clicking on the list items. For instance, if the current order of the tables is starter -> soup -> seafood, clicking on the #seaf ...

Utilize Three.js to project an object onto a designated distance

I am working with a rectangle defined by 4 points and I need to move it to the left or right by a specific distance. The result should be a parallel rectangle that, when lines are drawn through corresponding points, forms a rectangular cuboid. I have the ...

Fetching information from server proves to be sluggish within AngularJS application

In the process of developing a web application, I am faced with the task of sending numerous $http requests to the server. My front-end is built using AngularJS while the back-end utilizes ExpressJS. The $http requests are currently being made as shown in ...

Utilizing jQuery's $.ajax and $.each functions to iterate through an array

I'm currently working on integrating the NY Times article search API and I need to display the results as a new list element in HTML. However, I am facing difficulties while using the $.each() function to iterate through the JSON data. My goal is to i ...

The error callback for Ajax is triggered even though the JSON response is valid

Within my JavaScript file, I am making the following call: $.ajax({ type: "POST", dataType: "application/json", url: "php/parseFunctions.php", data: {data:queryObj}, success: function(response) { ...

Issues with React's onSelect event functionality are persisting

Is there an event handler in React for the onSelect statement? For example, when a user highlights some text within a paragraph using their mouse, is there a way to trigger an event that extracts the highlighted text? import React, { Component } from &apo ...

Making a post request with Ajax in Node.js

Dealing with an issue in Node js and AJAX POST - the Node request fails to verify if the form data is being handled correctly, consistently triggering the error function. Is there any solution to check the AJAX NODE JS CODE below? $("#submit_btn").click ...

Issue: Failed to locate module @angular/core

When attempting to run an Angular 4 application, I consistently encounter the following error: ERROR in Could not resolve module @angular/core There are no additional errors present. There are no dependency issues whatsoever as @angular/core is located i ...

What is the best way to transmit a Blob object to the server without it arriving empty?

I'm currently facing an issue where I am attempting to send a Blob object containing video data to my server for upload to my S3 storage. However, the Blob is arriving as an empty object on the server side. const blob = new Blob(videoChunks, { t ...

Adding and deleting MPEG-DASH segments from a media source buffer in a dynamic manner

I have been developing a custom MPEG-DASH streaming player using the HTML5 video element. Essentially, I am setting up a MediaSource and attaching a SourceBuffer to it. After that, I am appending DASH fragments into this sourcebuffer and everything is func ...