Threejs: Why is my Pointlight failing to illuminate my shapes?

I've been working on creating a scene with triangles in Threejs. While the BufferGeometry has helped me shape the triangles correctly, I'm facing an issue with lighting. I've tried different materials like standard, phong, and lambert, but none seem to respond to lighting. I even attempted to compute normals using computeVertexNormals, but it didn't solve the problem. Flatshading also didn't have any effect.

To troubleshoot, I added a spinning torus with a phong material to my scene, but it too remains unlit.

Here's the code snippet I've been working with:

import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';

// Rest of the code...

Here's a glimpse of the resulting scene in this GIF: https://i.sstatic.net/ZLs7T.gif

Answer №1

When using point lights in the latest three.js releases, it is important to consider the physically correct unit of measurement (candela). An intensity value of 1 may be too low for your scene due to its large scale. Consider using a value around 100000 or even higher.

If you are displaying certain geometries, it is advisable to scale down the scene to match a physically accurate scale, where 1 world unit equals 1 meter. For terrain representations, using a directional light may provide better results as it mimics the sun/daylight more effectively.

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

Converting ed25519 private key into OpenSSH Format using JavaScript

After generating an ed25519 key pair using the javascript crypto library, I am now faced with the challenge of saving the private key in openssh format. Despite attempting to use the sshpk library for this task, I encountered an issue where the exported k ...

Implementing automatic redirection upon clicking using React without the need for manual clicking

I'm experiencing an issue where the page seems to automatically navigate to another page without clicking on the div. Can anyone explain why this is happening? Here's the code snippet for reference: import React, { Component } from "react&q ...

PHP failing to retrieve information

Having trouble with this specific file as it seems to be missing data in the address fields. Additionally, whenever "notes" are inputted, the Address data disappears. Any thoughts on how to resolve this issue? <tbody> ' ; $message .=&a ...

What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size? I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices. window.resizeT ...

Having trouble in React.js when trying to run `npm start` with an

Upon initially building a todo app in react.js by using the command: npx create-react-app app_name When I proceeded to run the command npm start, it resulted in displaying errors: https://i.sstatic.net/BxYFu.png https://i.sstatic.net/EqU1j.png In furth ...

Making a request using AJAX to retrieve data from an API

Looking to create an API GET request using ajax? Want a jquery function that takes an api key from the first input field and displays a concatenated result on the second input field (#2)? The goal is to make the get request to the value shown in the 2nd ...

Unique button for custom "CODE" in Froala

Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...

Java servlet is unable to interpret the name of an html select tag

Currently, I am implementing a feature where table rows with select boxes are added dynamically and the values of these select boxes are retrieved in a servlet. The process of adding the select boxes is functioning properly; however, when attempting to ret ...

Typedi's constructor injection does not produce any defined output

I am utilizing typedi in a Node (express) project and I have encountered an issue related to injection within my service class. It seems that property injection works fine, but constructor injection does not. Here is an example where property injection wo ...

"An issue arises when using req.body and res.render as the values retrieved are

Encountering an unusual problem - when using req.body to transmit form input to another page, the data is properly displayed when a single word is used in the input field (e.g. "FullName"). However, when there is a space, such as in the example "Full Name" ...

Initiating Ajax to trigger the body's onLoad event

Whenever I use an ajax call to load a div, the entire page refreshes. It seems that the 'body onload=init()' event is triggered on ajax response causing all the initialization to repeat, which is not desired. Is there a way to only load the div t ...

Determine if the webpage is the sole tab open in the current window

How can I determine if the current web page tab is the only one open in the window? Despite searching on Google for about 20 minutes, I couldn't find any relevant information. I would like to achieve this without relying on add-ons or plugins, but if ...

Encountering an issue when attempting to host a Next.js application on Vercel

Why is it important to regularly do this task as per the instructions provided in the link? Info - Working on creating a highly efficient production build... Note: Next.js now collects completely anonymous telemetry data on user usage. This data helps sha ...

What is the best way to align a div right below an image that has been clicked on?

I am designing a website that features social media icons spread out horizontally across the page. When a user clicks on one of these icons, I envision a pop-up window appearing below it, displaying additional information. Here is a visual representation o ...

"Utilizing Typescript and React to set a property's value based on another prop: A step-by

Is there a way to create a dynamic prop type in React? I have an Alert component with various actions, such as clicking on different components like Button or Link. I am looking for a solution like this: <Alert actions={[{ component: Link, props: { /* ...

Utilizing intricate nested loops in Angular.JS for maximum efficiency and functionality

Struggling to work with data looping in Angular.JS, especially when it comes to specific formatting Let's illustrate what I'm aiming for using Java Here's a snippet: int itemCount = 0; for(int i = 0; i < JSON.length(); i = i + 3) { ...

Transform CSV data into JSON format to generate an empty JSON file

I've been attempting to convert a CSV file to JSON using the convert-csv-to-json package from npm. Although I can successfully retrieve the CSV file from the specified URL and create a 'data.csv' file, the resulting JSON file is only an empt ...

Switch over to TypeScript - combining Socket.IO, Angular, and Node.js

This is the code I'm using for my node server: import http from 'http'; import Debug from 'debug'; import socketio, { Server } from 'socket.io'; import app from './app'; import ServerGlobal from './serve ...

In React, firebase.firestore() is operational, but firebase.functions() remains undefined

Currently, I am engaged in a React project that heavily relies on Firebase for various features. In order to incorporate HTTPS callable functions into the project, I encountered an issue. The problem lies in the incorrect importation of the 'firebase ...

Change the state of items in a React component to either disabled or active depending on the active items list retrieved from the API

Obtained from the API, I have a collection of buttons that are displayed for filtering: For instance: button2 button4 button5 Assuming there are a total of 5 buttons. button1 and button3 are supposed to be in a disabled or inactive state (appearing ...