Can you describe the characteristics of emissive materials in three.js?

Currently, I'm delving into a basic demo using three.js and finding myself perplexed by the way THREE.MeshPhongMaterial behaves, especially since I come from a background working with the Unity Game Engine.

create_ring() {
    // creates a ring mesh based on provided class data
    const material = new THREE.MeshPhongMaterial({
        color: this.color,
        emissive: this.color,
        emissiveIntensity: 1.6
    });
    const ring_geo = new THREE.TorusGeometry(this.radius, this.thickness, 16, 100);

    // Move in space
    ring_geo.translate(5, 5, 0)

    // apply texture to mesh and return
    const ring_mesh = new THREE.Mesh(ring_geo, material);
    ring_mesh.receiveShadow = true;
    ring_mesh.castShadow = true;
    ring_mesh.name = "ring";
    return ring_mesh
}

I originally thought that the materials would create a soft pool of light on the floor geometry, but after some research, it seems like I might need guidance on how to achieve this as a shader feature? Or maybe I am just not grasping the constraints and behavior of materials in three.js? Below is an example showcasing what can be done with a material's emissive option in Unity.

Answer №1

The Unity screenshot above showcases more than just an emissive material - the objects surrounding the light may have been marked as static, allowing Unity to "bake" the glow effect onto them during application compilation. It's also possible that a "bloom" post-processing effect was used to enhance the dynamic glow visible around the object.

When working with three.js on the web, there is no offline compilation process, so these effects must be set up manually. For guidance on adding bloom effects to a scene in three.js, check out the bloom example on the official website. To bake lighting onto surrounding objects, it is typically done in Blender and then imported into three.js alongside the base color texture or lightmap.

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

Transferring PHP array data to JavaScript without being exposed in the source code

In the process of creating a historical database, I am currently handling over 2,000 photos that require categorization, out of which approximately 250 have already been uploaded. To efficiently store this data, I have set up a MySQL database with 26 field ...

Building routes for a stationary website with Angular

Currently, I am in the process of developing a static site using a combination of HTML, CSS, and JS along with nodeJS and express for server-side functionality... One challenge I am facing is setting up routes to display pages like /about instead of acces ...

Retrieve only the items from a JavaScript array where the index is below a specified value

My goal is to filter out all the items from the initialItems list that have an index lower than the current item. For example, if the current item is CM, I want to display QS, IT, and AB in a draggable dropdown menu. However, I'm unsure of how to prop ...

Triumph awaits before the final response is delivered

Being new to web development, I am currently working on my first web application using purely node.js. In the registration process, form data is sent from the client-side to the server and then stored in the database. Upon a successful response, the client ...

What is the method for sending a status header without redirecting to a different page?

function verifyRegistration() { const xhr = new XMLHttpRequest(); xhr.open("GET", "http://ipaddressandport/users/register"); xhr.onload = () => { console.log("tes"); if (xhr.status === 400) { console.log ...

Utilize an image in place of text (script type="text/javascript")

The vendor has provided me with some code: <a class="sh_lead_button" href="https://107617.17hats.com/p#/lcf/sfrnrskrvhcncwvnrtwwvhxvzkrvzhsd" onclick="shLeadFormPopup.openForm(event)">FREE Puppies</a> <script type="text/javascript" src="htt ...

Is it feasible to cancel or clear the queue for a jQuery fadeOut function after a delay is specified? If so,

Can anyone help me out with this question? Is there a way to eliminate the delay in chaining? Mn.Base.TopBox.show = function(timedur){ $('#element').fadeIn().delay(timedur).fadeOut(); } Mn.Base.TopBox.cancelFadeout = function(){ } I&apos ...

The JavaScript indexOf method in an unordered list incorrectly returns the index of a specific event

Looking to retrieve the index number of an 'li' element within a 'ul' from the HTML structure. I attempted to convert the 'ul' into a list and access its children using: [...ul.children] However, upon targeting any of the chi ...

Is there a way to create a PHP function that can process an AJAX request and return a boolean value?

After some testing, I discovered that when the code snippet below is executed within my PHP function to manage an AJAX call: session_start(); if ( $_POST['animal'] != $_SESSION['animal'] ) die(json_encode(false)); Upon returning to th ...

Modifying email alters the appearance of the input element

Utilizing labels as placeholder text behind input boxes with a transparent background, changing to white on :focus and when input value is > 0, I created a contact form. However, integrating PHP into the form recently caused styling issues. Although I m ...

Troubarked by problems NodeJS faces when trying to establish a connection with CosmosDB using a connection

Having trouble with my code that fails when I try to create a new instance of the CosmosClient. The option to create a CosmosClient using a connection string should be straightforward. The environment variable holds the necessary connection string in this ...

Experiencing discrepancies in pixel height while conducting tests using Nightwatch

Let me start by sharing some details about my machine setup: Operating System: CentOS 7 Graphics Drivers: kmod-nvidia (dedicated GPU) I am currently testing a webpage using Nightwatch, and one of the requirements is to ensure that a background image&apo ...

I am looking to manage the error handling service, and my next step is to intentionally insert a single error into my service and have it automated

Need help with error handling in my service. I want to manually insert a single error, but would like it to be done automatically instead. 'use strict'; angular.module('nexoolApp.errorservice', ['nexoolApp.config']) .servic ...

Accessing External Sites Remotely: A Guide to Logging in with Wix

I currently have a Wix website along with a customer portal hosted on a separate platform. My goal is for customers to seamlessly log in to my website and be redirected straight to the customer portal without encountering an additional login screen. Behin ...

How can a controller in AngularJS detect when the back button of the browser is pressed

I've created a browser trivia game where authenticated players can select a game type, triggering a socket.io event in my Node.js server. The view then transitions to a "Searching for game" screen with a loading icon as the server waits for enough pla ...

JQuery UI autocomplete vanishes instantly without any warning

I am encountering an issue with JQuery UI's autocomplete feature where the dropdown results do not stay visible. While debugging, I noticed that the list briefly appears before disappearing. Below is my code snippet: HTML: <input type="text" plac ...

Using Ajax to invoke a C# webmethod

I'm trying to call a webmethod defined in this specific class <%@ WebService Language="C#" Class="emt7anReyady.myService" %> using System; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Linq; usi ...

What are the key distinctions between an arrow function, a class, and a traditional function?

Is there a way to distinguish between the following three elements in ES6 using its reference? let x = i => i+1; class y { constructor(i) { this._i=i+1; } get i(){ return this._i;} } function z(i) { return i+1; } For example: test(x) //=> ' ...

Angular popup window can't access DOM elements

Hey there, currently experimenting with an angular modal instance and running into a bit of a hurdle. When attempting to declare a querySelector in the modal controller, I'm encountering a console error stating 'Cannot read property 'queryS ...

Unable to implement multiple draggable inner objects using Angular 5 and dragula library

After struggling for the past few days, I can't seem to get it to work... Here is a brief explanation of my issue: In this example, I have an array of objects structured like this: public containers: Array<object> = [ { "name": "contain ...