Custom geometry in Three.js isn't responding to lighting as expected

My code is set up to create a unique diamond shape in Three.js:

var material = new THREE.MeshPhongMaterial({color: 0x55B663, side:THREE.DoubleSide});
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 1, 0));
  geometry.vertices.push(new THREE.Vector3(0, -1, 0));
  geometry.vertices.push(new THREE.Vector3(-1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, -1));
  geometry.vertices.push(new THREE.Vector3(1, 0, 1));
  geometry.vertices.push(new THREE.Vector3(-1, 0, 1));
  geometry.faces.push(new THREE.Face3(0, 4, 5));
  geometry.faces.push(new THREE.Face3(0, 3, 4));
  geometry.faces.push(new THREE.Face3(0, 2, 5));
  geometry.faces.push(new THREE.Face3(0, 2, 3));
  geometry.faces.push(new THREE.Face3(1, 4, 5));
  geometry.faces.push(new THREE.Face3(1, 3, 4));
  geometry.faces.push(new THREE.Face3(1, 2, 5));
  geometry.faces.push(new THREE.Face3(1, 2, 3));

This is how I have my lighting setup configured:

  var light = new THREE.PointLight(0xffffff);
  light.position.set(100,200,100);
  scene.add(light);
  light  = new THREE.DirectionalLight(0xffffff, 1.0);
  light.position.set(0, 0, 0);
  scene.add(light);
  light  = new THREE.AmbientLight(0x404040);
  scene.add(light);

Unfortunately, when the scene is rendered, only the ambient lighting seems to be working:

However, if I switch my custom diamond geometry for a standard cube, everything works perfectly:

var geometry = new THREE.BoxGeometry(1, 1, 1);

I'm puzzled as to why the lighting effects are not being applied to my custom diamond geometry?

Answer №1

The reason your custom figure is not displaying correctly is due to the lack of specified normals. Make sure to include the following lines of code:

geometry.computeFaceNormals();
geometry.computeVertexNormals();

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

What are the steps to reset a tooltip with varying options based on the size of the screen?

Currently, I am utilizing the tooltipster.js library to create tooltips and attempting to adjust the default distance of the tooltip based on various screen sizes. Initially, the initialization appears as follows: $(inputTooltipTrigger).tooltipster({ ...

Transferring information from a service to an AngularJS controller

I have a service that retrieves data from a URL provided as a parameter, and it is functioning correctly. However, when attempting to pass this data to a controller's $scope in AngularJS, I am not receiving any data. var app = angular.module("Recib ...

When importing the Ionic Native File, the JavaScript File object cannot be used simultaneously

When attempting to use the javascript file object, I encountered an issue because the ionic native file object already uses the same key File Here is an example: import { File } from '@ionic-native/file'; @Component({ selector: 'page-ho ...

Tips for inserting a button under a div when clicked

I am working on a layout where I have several div cards aligned side by side using the display: inline-block property. What I want to achieve is that when I click on a card, a button is added below the respective div. To accomplish this, I tried using jqu ...

Upon page reload in Nuxt.js middleware, Firebase authentication is returning as null

Just started with nuxtjs and using the Nuxt firebase library for firebase integration. After a successful login, I'm redirecting the user to the "/member/desk" route. However, if I refresh the page on that particular route, it redirects me back to "/a ...

Possibly triggering multiple form submission events in jQuery

I am currently working on a form that allows for purchasing ad space. When you click on the PayPal button first, the form functions properly. However, if you first click on the submit button (#wd_submit) and then on the PayPal button, it opens two new wind ...

How do I set up a slideshow to loop continuously?

I created a slideshow for my website using the script below, but I'm struggling to figure out how to make it repeat. I want the slideshow to go back to the first photo after reaching the last one. Can anyone help please? For reference, please check o ...

What is the proper way to utilize a class with conditional export within the Angular app.module?

This query marks the initiation of the narrative for those seeking a deeper understanding. In an attempt to incorporate this class into app.module: import { Injectable } from '@angular/core'; import { KeycloakService } from 'keycloak-angul ...

What is the most effective way to send an email in PHP with a table format

<?php $result = mysqli_query($con, "SELECT * FROM cse"); $mail_data = ""; while ($row = mysqli_fetch_array($result)) { $Hallticket_No = $row['Hallticket No']; $Name = $row['Name']; $Email_ID = $row[&apos ...

Create a "load additional data" button

I'm working on building my blog and I've run into a roadblock while trying to implement a load more button. Here's what I currently have: actions: { LOAD_ARTICLE_LIST: function ({ commit }) { axios.get('someurl/articles') ...

Ways to ensure all images have been successfully uploaded to Firebase before executing a function

Here's a function I've created that takes image URIs from the state, uploads them to Firebase Storage, and then updates the state with the download URLs: uploadImages = async (userID) => { // Loop through each image for (var index = 0 ...

Tips for adding one document to two separate collections using JavaScript and MongoJS

Having trouble inserting data into two separate tables using javascript and mongojs. While I was able to successfully insert into a single collection by following the npm mongojs documentation, I couldn't find a solution for multiple collections on th ...

Using jQuery to trigger two functions on a click event

I have two functions that I want to apply to the same click event. Initially, I had both of them inside the click function and noticed that while the image toggle worked every time, the show/hide toggle ("optionToggle") only worked the first time. However, ...

Generating rows within Angular while implementing ng-repeat

In my code, I am facing an issue where posts from the API are being repeated and displayed in rows of 9. My objective is to create a grid layout with 3 rows, each containing 3 posts. Unfortunately, the solution I attempted did not work as expected. I also ...

Execute an ajax function when a form is submitted on Marketo

My Request I am seeking assistance with integrating a Marketo script in a WordPress plugin. Upon submission of the Marketo form, I need to perform calculations using the form elements and display the results on the page. Please provide suggestions on ho ...

Update the data in Firebase, but revert it back to the original state after a few seconds with the use of "angularFire."

I'm currently working on updating data in the Firebase Realtime Database using Angular and AngularFire. The issue I'm facing is that even though the data changes successfully, it reverts back to the original data after a few seconds. Below is the ...

Use regular expressions to exclude occurrences of the character 'n' from your text

Looking for a regular expression to validate input, specifically filtering out all special characters except "underscore". All characters within the range [a-zA-Z0-9\underscore] are permitted and can appear multiple times. However, my expression shoul ...

Can data be retrieved from a redirection page using AJAX?

I'm facing a challenge. I am attempting to complete a task that seems simple, but I am struggling with it. Let me explain the situation: I have 3 different HTML pages: The first page, named index.html, is my main page with a button that triggers a ...

Are web components capable of managing changes in CSS (maybe through cssChangedCallback)?

Is there a way to control the application of CSS to a web component similar to using attributes through attributeChangedCallback. I am currently developing a couple of web components that could benefit from being styled with CSS classes. However, I requir ...

Issue: Invalid operation - Angular Service

Trying to execute a function that is defined in a service has been causing some issues for me. var app = angular.module('title', ['flash', 'ngAnimate', 'ngRoute'], function ($interpolateProvider) { $in ...