Creating an illuminated atmosphere: How to place a light source within a container using ThreeJS

Attempting to replicate the luminous box from Beat Saber in ThreeJS:

https://i.sstatic.net/6IUmp.png

Initiated by crafting a shape in Blender and exporting an OBJ. Imported it into Three, simply as geometry:

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

Subsequently, sought out lighting. Experimented with RectAreaLight, placed inside but directed outward, yielding satisfactory results:

https://i.sstatic.net/94hZW.png

Issue lies in the fact that, in comparison to the above image, it lacks the desired glowing effect. Instead, it appears as a bright white triangle on a red cube. Unsure on how to extend the light outside, akin to the screenshot. Perhaps an alternative light source is necessary?

Answer №1

The desired effect can typically be achieved using pixel shaders. Check out shaders that create a glow or bloom effect:

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

When utilizing document.addEventListener in JavaScript, Firefox fails to report exceptions triggered by DOMContentLoaded

I'm developing an internal framework that must be independent of any external dependencies such as jQuery. I'm working on implementing a custom DOM ready-style functionality, where callbacks in the ready queue should continue executing even if an ...

Having trouble accessing array elements in react components

When retrieving JSON data for a single student from the server in my React application, I am able to access this.state.info.Firstname but encountering difficulty accessing this.state.info.Father.Firstname. How can I access this information? This is my Rea ...

The TypeError encountered is with the init function, as it is unable to access the property 'style' of a null

Regardless of how I attempt to write the code, I keep getting the same error message, and I've been working to resolve this issue since last night. However, I can't seem to understand why it's bothering me so much. The error message insists ...

The re-assignment of `req.session.variable` in Express-session does not carry over between two different routes

I am currently working on a basic app that allows logged in users to search and book train journeys using Express, MongoDB, Mongoose, and Express-session. The selected journeys are temporarily stored in the req.session.order variable (which I believe is gl ...

What is the best way to select multiple items using mongoose?

For instance, consider this list: [ { name: "John" }, { name: "Mike" }, { name: "Homer" }, { name: "Bart" }, { name: "Dmitry" }, { name: "Dan" } ] If I want to select specific objects ...

What is the method for accessing the Redux store content directly in the console, without using any developer tools

By utilizing React Devtools, I am able to access the store by: $r.store.getState() Is there an alternate method to retrieve the store without using React Devtools? ...

Only a singular operation is carried out

Contained within my .js file are two functions: function download510(form) { if (form.pass.value=="tokheim") { location="../pdf/quantium-510.pdf" } else { alert("Invalid Password") } }; function download410(for ...

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

I have integrated the weather.js library into my HTML file by adding the necessary imports: <script src="js/current.js"></script> <script src="js/sugar.min.js"></script> <script src="js/weather.js"></script> <script ...

iPhone - touchstart event not functioning in JavaScript

Looking for a solution to dynamically resize a div in JavaScript when clicking on a link element (<a>). However, the code doesn't seem to function properly on my iPhone. Let's start with a basic link: <a href="#" onfocus="menu()">ME ...

AngularJS - the element of surprise in execution sequence

Encountering a puzzling issue that exclusively affects Internet Explorer (any version) and not Chrome. An "items" array is stored within the "doc" object. Users have the capability to edit items, which essentially deletes the item but retains its content ...

Developing custom node modules for efficient exporting and importing using the Babel transpiler

In a separate project, my goal is to replicate the following structure: import { FuncA, FuncB, FuncC } from @myorg/hellow For an internal project, I am creating my own node module with the folder organization of hellow as outlined below: ...

Prevented: Techniques for providing extra cushioning for a button, but with the condition that it contains an external icon

How can I apply padding to a button only if it contains an external icon? If the button has an external icon, I want to give it padding-right: 30px (example). However, if there is no external icon present, then the button should not have the 30px padding. ...

Encountering an issue while constructing an Angular library project. The 'ng serve' command runs smoothly on local environment, but an error message stating

I recently developed an npm package called Cloudee. While it functions perfectly locally, I encounter an issue when attempting to deploy it. The error message states: 'Unexpected value 'CloudyModule in /home/hadi/dev/rickithadi/node_modules/cloud ...

Which specific file name patterns does npm publish consistently exclude?

When using the npm publish command, the documentation mentions that certain files will not be included in the package unless explicitly added to the "files" list in package.json or un-ignored with a specific rule. What exactly are these "certain patterns"? ...

What is the best way to create a select box in React that allows for both single and multiple selections?

I recently started utilizing a new package for generating dynamic forms, which can be found at this link. Upon reading through the documentation, I attempted to create a select box as outlined in the instructions provided here. Despite following the step ...

Are there any modules in Angular 8 that are used across various projects?

I am facing a challenge with managing two projects that share the same core functionality. These projects have identical layouts and pages, but certain components and modules are specific to each project. Currently, I maintain two separate Angular projects ...

Is object position cloning performed by the three.js renderer?

I recently designed a small scene featuring 3 spheres connected by a triangle with vertices at the centers of the spheres. Surprisingly, when I moved one of the spheres, the triangle did not move with it as expected. It appears that the renderer may not be ...

What is the best way to display circles (generated from JSON data) in reverse order by incorporating a delay function?

I am currently working on creating an interactive visualization using circles that expand over a specified period, all centered at the same point. I have a script that generates these circles and saves the data in a JSON file. The smallest circle is posit ...

Organizing checkboxes to store selected values in an array using Vue.js

I am looking to implement a feature where a user can select checkboxes from a grouped list populated by an API call. When a checkbox is selected, I want to add the corresponding object to an array linked to the v-model of the checkbox input. Below are the ...

How to access a grandchild's property using a string in JavaScript

Is there a way to access a property nested deep within an object when creating a custom sorting function? I am attempting to implement a sort function that can sort an array based on a specific criteria. const data = [ { a: { b: { c: 2 } ...