Issue with THREE.meshphongmaterial: Causing Objects to Appear Black

Attempting to implement THREE.meshphongmaterial from a tutorial found at:

Encountering issues as it is resulting in a black color. Link to the jsfiddle code: http://jsfiddle.net/8hrk7mu6/12/

The problem seems to be on line 32:

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

Why is this not functioning correctly? Interestingly, using THREE.MeshNormalMaterial works without any issues. 

var material = new THREE.MeshNormalMaterial();

Furthermore, attempting to use textures from an image in the code is also facing obstacles. Only THREE.MeshNormalMaterial is producing expected results. Why is this happening?

javascriptthree.js

Answer №1

It turns out that adding light is essential. The absence of light results in the meshphongmaterial appearing black.

Therefore, I had to include something like this:

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);

I found this solution from the following link: https://github.com/mrdoob/three.js/issues/2766

Answer №2

To enhance the overall atmosphere of the scene, consider incorporating ambient light:

scene.add(new THREE.AmbientLight(0x404040))

Answer №3

To enhance the visibility of MeshPhongMaterial, it is recommended to incorporate Ambient Light or Point Light in your scene. MeshPhongMaterial responds to light and is only visible when there is adequate lighting. For optimal results, consider using the code snippet below:

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;

scene.add(ambientLight, pointLight);

Answer №4

The suggestion to adjust the emissive value was highlighted in Terg's Three.js Learning QuickStart guide. It mentioned that reducing the number of lights can improve rendering speed significantly.

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

Having trouble generating an image with JavaScript

I am currently working on incorporating an image onto a webpage using JavaScript. Surprisingly, even the alert('This function works!') is not displaying anything! What could be causing this issue? Please assist! <!DOCTYPE html> <html> ...

javascripthtml

Error: Using `[object HTMLDocument]` as a selector is not recognized in firefox

How can I load my local javascript library and execute an alert command? var jq = document.createElement('script'); jq.src = "http://127.0.0.1/js/jquery-3.3.1.min.js"; document.getElementsByTagName('head')[0].appendChild(jq); $(documen ...

javascriptgoogle-chromefirefox

Enable/disable specific dates in datepicker depending on dropdown selection

Struggling with disabling specific days of the week in the jQuery datepicker based on a selected dropdown option. Provided below is the snippet of my HTML and JavaScript code: <script> $("#dates").datepicker({ minDate: 0 }); </sc ...

javascriptjqueryhtmldatepicker

How to mute a particular warning in development mode with Next.js

Currently in the process of transitioning a CRA app to Next.js in order to enhance SEO. During development, I encountered the following warning: Warning: 'NaN' is an invalid value for the 'left' css style property. I am aware of the s ...

javascriptreactjsnext.js

The JSON key has been labeled as "valid", making it difficult to access in JavaScript as demonstrated in a JSfiddle example

Initially, I transformed a Plist file (XML formatted) into JSON using an online tool. Extracting the important data from this extensive JSON file was not a challenge. Utilizing this crucial data, I am reconstructing a new JSON file that is concise and cont ...

javascriptjson

The webpage is unreachable on localhost after attempting to write to a file using node.js

I'm currently attempting to update a file using Node.js. I have a form that contains checkboxes, and upon form submission, the server should update the file based on which checkboxes are selected: a, b, or c. The JSON file structure is as follows: { ...

javascriptnode.jsexpress

Substitute the element with its outerHTML and then grab hold of the fresh element instantly

My current approach involves replacing a DOM element by updating its content with the outerHTML property. This method is effective, but my challenge lies in promptly accessing the newly generated DOM element. Regrettably, I do not have control over the cr ...

javascripthtmldom

Changes in React BrowserRouter URLs are not reflected on the page or components, requiring a manual refresh for them to

Greetings, fellow developers! I have developed an app using React with a remote menu component. Despite trying numerous techniques, I am facing an issue where my URL changes but the components are not rendering on the screen. You can check out the code h ...

javascriptreactjsnavigationreact-router

A JavaScript function that fetches the color name based on either the RGB value or the Hexadecimal value

Looking for a JavaScript function that can determine the name of a color. Would like the JavaScript function to be structured as shown below: function getColorName(r, g, b) { .... return <color name>; // such as blue, cyan, magenta, etc. } ...

javascript

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

javascriptcss

What is the best way to retrieve information from a Node.js web service using JavaScript?

I am currently using a nodejs web service URL to perform authentication by making AJAX calls. However, I would like to achieve the same functionality using simple JavaScript without AJAX. Below is my service.js code: var LOGIN_AUTHENTICATION = "http://19 ...

javascriptangularjsnode.js

What could possibly be causing a syntax error in my JavaScript code?

<script type="text/javascript> $(document).ready(function(){ $("a.grouped_elements").fancybox( 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, ...

javascriptjqueryjquery-plugins

Transitioning effect when tapping a link that guides you to a different section of the webpage

Just by reading the title, you can understand my concern. Currently, when I click on "Example 4", the page abruptly scrolls to the h1 of Example 4. It looks so ungraceful, like a sudden boom. I would prefer a smooth scrolling effect. Is it possible to achi ...

javascriptjqueryhtmlcss

Obtaining an element in the Document Object Model (DOM) following

There are numerous questions and answers regarding this issue, but I am struggling to adapt it to my specific case. My extension fetches positions (1,2,...100) on the scores pages of a game. Upon initial page load, I receive the first 100 positions. Howev ...

javascriptjsongoogle-chrome-extension

Shadow and Quality Issues with SVG Images

I have designed a unique SVG image with intricate details and a decorative frame, enhanced with shadowing effects. Unfortunately, after importing this SVG into a react-native application using the react-native-svg library, I noticed that the shadow around ...

javascriptreactjsreact-nativesvg

The function HandleKeyPress is failing to recognize the input from the down arrow

I'm currently working on developing a customized and user-friendly select input using React.js. My goal is to have the functionality where the up and down arrow keys behave like the tab key within the context of selecting options. In order to achieve ...

javascriptreactjsselectaccessibility

What is the best method for importing OrbitControls into my three.js project?

I'm having trouble importing OrbitControls into my project. I included three.js and then attempted to import OrbitControls, but it's not functioning as expected. I added three.js to the HTML body using the following command: script src="https:/ ...

javascriptthree.js

The sidebar in tailwind css is not displaying a scrollbar as expected

I'm currently working on a project to create a WhatsApp clone using Tailwind CSS in ReactJS. However, I've encountered an issue with the contacts list where it's not showing the scrollbar and instead overflowing the content, leading to the w ...

javascriptreactjsnext.jstailwind-css

Searching for specific values within data attributes using jQuery wildcards

I am currently utilizing the data_attribute on this page and have the following elements with data attributes. No. 1.<div class="row hidden" data-party-registration-source-type-id="1"> 2.<div class="row hidden" data-party-registration-source- ...

javascriptjqueryhtml

Require modification of JSON values in React Promise code

Looking to modify the data returned from a promise and wrap a link around one of the fields. Here is the React code: this.state = { medications: [], } queryMeds().then((response) => { this.setState({medications: response}); }); The response c ...

javascriptarraysjsonreactjspromise