Building an LED display with three.js

I have a project where I am creating a board with multiple RGB LEDs mounted on it, as shown in the image.

https://i.sstatic.net/WtOm4.png

To create the LEDs, I used the following code:

this.light = new THREE.PointLight(color, intensity, distance, decay);
this.light.name = 'rgb-light';
this.led_group.add(this.light);

let textureGlow  = new THREE.TextureLoader().load('images/led1.png');
var sphereMaterial = new THREE.MeshStandardMaterial({
  transparent: true,
  opacity: 0.8,
  emissive: this.light.color,
  color: this.light.color,
  wireframe: false,
  emissiveMap: textureGlow

});

let led_geo = new THREE.BoxGeometry(5, 1.6, 5);
let led_mat = new THREE.MeshBasicMaterial({
  color: 0xffffff
});

let led_mesh = new THREE.Mesh(led_geo, led_mat);
this.led_group.add(led_mesh);

this.ledsource = new THREE.Mesh(new THREE.CylinderGeometry(1.7, 1.7, 1), sphereMaterial);
this.ledsource.name = 'rgb-led';

However, I would like the LEDs to appear bright and glow like real LEDs do in the physical world. Can someone provide me with any guidance on how to achieve this effect?

Answer №1

While this may not directly address your question, one way to enhance your project is by incorporating shaders, post-processing effects, volumetric lights, and more. This topic is extensive and could be further explored. Additionally, there are numerous examples available that showcase superior lighting techniques. Check out this YouTube video by bkcore that demonstrates the use of volumetric lights.

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

How come I am unable to save an array of objects in a State within React JS?

React JS component: When I make a request to the backend to fetch data stored in a MySQL table, it returns an array of objects. I store this data in a state called `favcoin`. However, when I console.log(favcoin), it displays an empty array [ ]. Strangely, ...

Tips on implementing a function within a navigation bar from a specific context

While working with a user authenticated context, I encountered an issue with the logout function. My goal is to have a link in the navigation bar that triggers the logout function and redirects me to the home page. However, I'm receiving a Typerror: l ...

What is the proper way to store the output in a variable? Angular and XLSX

I am attempting to read an Excel file from an input using Angular and convert the data into an array of objects. Here is how my components are structured: import * as XLSX from 'xlsx'; import { Injectable } from '@angular/core'; @Injec ...

What is the best way to incorporate multiple versions of jQuery on one webpage?

Is it possible to use multiple versions of jQuery on a single page? I need two different versions for various functions, but they seem to be conflicting with each other. If I implement jQuery noconflict, will the product scripts still work? <script typ ...

implementing datepicker on multiple textboxes in jQuery upon button click

I have the ability to show multiple text boxes using jQuery. I am now looking to add a datepicker to those text boxes. Any assistance in finding a solution would be greatly appreciated. Thank you in advance. ...

Converting rotation into a directional vector

I have a Three.js object and I am able to read its rotation. However, I am looking for a way to extract a vec3 that indicates the direction in which the object is currently rotated. Can someone provide guidance on how to achieve this? ...

Reactjs is currently not integrated with Firebase

I recently completed a project in reactjs and realized it requires authentication. My initial thought was to connect it with Firebase as it seemed like the most straightforward option. Following a tutorial on YouTube, however, I encountered some difficult ...

Ng-show not updating when scope variable changes

Initially, I set the boolean flag of the infoWindow to false: $scope.infoWindow = false; Subsequently, I've added a google maps listener for a click event as shown below: google.maps.event.addListener(circle, 'click', function(event) { ...

Showing a collection of 30 Instagram photos with a specific tag from a particular user ID

My Instagram API call is set up to retrieve images with the CrookedSpaces tag. Once the images come back, I filter the data to only show images from a specific user identified by their userID. Here is the code snippet: $(function() { $.ajax({ type: "G ...

Dealing with an overflow of Redis clients in NextJS: Simplifying the process with just one client

Introduction Hello there! I have developed a new app for a discord web-dashboard and utilized redis as my database. The main Issue Whenever I send an axios request to one of the documents in the api folder, which requires a redis client, a new redis cl ...

I just stumbled upon Jupyter and I'm curious - can I utilize Javascript and store it in the cloud?

Yesterday evening, I stumbled upon Jupyter and began using it alongside Python. It seems like an excellent tool for coding, something that I've been in need of, but I'm not sure if I can integrate JavaScript with it. I noticed there are npm packa ...

Is it possible to simultaneously run multiple functions with event listeners on a canvas?

I'm attempting to create a canvas function that displays the real-time mouse cursor location within the canvas and, upon clicking, should draw a circle. I came across this code snippet that reveals the x and y coordinates of the mouse: document.addEve ...

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

Is Your CanvasJS Chart Traveling in Reverse?

My charts are displaying dates in reverse order, can anyone help me figure out what's causing this issue? I've checked the documentation but couldn't find anything that would explain this problem. Link to documentation: Here is a screensh ...

How can I break down an object with hyphenated key names?

Attempting to perform object destructuring on the following: { name: "Bryan", last-name: "Enid" } However, trying to destructure it like this is not successful: const {name, last-name} = req.body Is there an alternative method to destructure this ...

Using VueJS: Passing a variable with interpolation as a parameter

Is there a way to pass the index of the v-for loop as a parameter in my removeTask function? I'm looking for suggestions on how to achieve this. <ol class="list-group"> <li v-for="task in tasks" class="list-group-item"> ...

Utilizing Angular2 Guard to Ensure False IdentityServer4 OIDC Security

After successfully authenticating a user and redirecting them back to the main site, the following code runs: <script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client/1.2.2/oidc-client.min.js"></script> <h1 id="waiting">Waiting... ...

Focus on an element in ThreeJS

Is it possible to adjust the zoom direction in three.js so that it zooms towards the mouse cursor? I'm having trouble finding where to change the zoom target for this specific feature. ...

The browser freezes after a short delay following an Ajax request

I recently created an admin panel with notification alerts using Ajax. Initially, everything was working smoothly, but after a few minutes, the browser started freezing. I'm new to Ajax development, so I'm unsure what could be causing this issue. ...

Converting between GPS degrees and decimal values using jquery, javascript, and PHP: A comprehensive guide

Is there a way to convert GPS degree to decimal values or vice versa? I am working on developing a feature where users can input an address and retrieve the GPS values in both degree and/or decimal format. However, my main challenge is understanding how t ...