Creating Outer Glow Effect on a Plane Primitive with THREEJS

Seeking guidance on creating a glow effect for a plane primitive in THREEJS. Found examples for cubes and spheres, but those involve encasing the object inside another transparent material, which is not suitable for my needs.

The desired glow effect should resemble: - Flash AS3 GlowFilter - Photoshop Layer Effects Outer Glow

Came across an outline effect using threejs, but it requires a gradient with alpha/opacity to achieve the desired outcome.

The goal is for the glow to only impact the edges of the mesh/primitive (plane).

Appreciate any assistance,

D

javascript3dthree.jsshaderglow

Answer №1

Although this question may be dated, I wanted to provide an answer for anyone who may come across it in the future. A useful tool you can utilize is the OutlinePass from the examples provided by three.js.

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

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

Using async-await to handle an array of promises with the map method

I have come across several discussions on the same error but none of them solved my issue. Here is the code I wrote: const userOrganizationGroups = (organizationGroupsList) => { if (Array.isArray(organizationGroupsList) && organizationGroupsLi ...

javascriptnode.jsasynchronousasync-await

Show information from a JSON file in a tooltip on a Highcharts' pie chart

I have a pie chart that shows two percentages. I am looking to update the tooltip content to display information from my JSON data. Here is an example of how my JSON data looks: {"object1":{"percentage": 0.7, "numberOfObject": 167}, "object2":{"percentage ...

javascriptjsonhighchartstooltippie-chart

Troubleshooting: Issue with WCF service not processing POST requests

I encountered an issue when attempting to call a WCF service using AJAX from another project. The error message displayed was: The server encountered an error processing the request. The exception message is 'The incoming message has an unexpected me ...

javascriptc#asp.netajaxwcf

having trouble with developing a dropdown menu using jquery

I'm currently creating a drop-down menu for my website and here is the code I'm using: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html dir="ltr"> <head> <met ...

javascriptjquerycssmenu

Retrieve the user ID by utilizing the phonegap login feature integrated with Facebook

I'm working on a feature that lets users upload photos to my server once they log in using their Facebook credentials. I'm currently using the phonegap facebook plugin for Android. How can I retrieve their unique user ID from the Facebook SDK? Al ...

javascriptandroidfacebookcordova

Can default values be assigned to a DTO during initialization?

What is the method to assign default values when a query is empty? In the case where I have this DTO structure for a query: export class MyQuery { readonly myQueryItem: string; } If the request doesn't include any query, then myQuery.myQueryItem ...

javascriptnode.jstypescriptnestjs

Display the input value in AngularJS in a customized format without changing the format in the model

When receiving an integer indicating a duration in minutes, I want to display it as hours or days if it exceeds a certain value. The ng-model should still keep the value in minutes so that any user changes are reflected accurately. For example: Reading & ...

javascriptangularjs

What is causing the 'transitionend' event to trigger multiple times?

Currently, I'm honing my JavaScript skills by taking on the 30 days of JavaScript challenge. I'm puzzled by why the 'transitioned' event is triggered twice in the code snippet below. My CSS only contains one property called transform, ...

javascripthtml

Data sent through AJAX messaging is not being acknowledged

I recently made an AJAX request and set it up like this: $.ajax({ data : { id : 25 }, dataType : 'json', contentType : 'application/json; charset=utf-8', type : 'POST', // the rest of the ...

javascriptphpjqueryajaxjson

Exploring NextJS with Typescript to utilize the getStaticProps method

I'm currently enrolled in a NextJS course and I am interested in using Typescript. While browsing through a GitHub discussion forum, I came across an issue that I don't quite understand. The first function provided below seems to be throwing an e ...

javascripttypescriptfunctionnext.jsgetstaticprops

Mongoose schema nesting guide

I've encountered an issue while attempting to nest schemas in mongoose, and unfortunately I'm struggling to pinpoint the exact cause. Here's what my current setup looks like. Starting with the parent schema: const Comment = require("./Comm ...

javascriptexpressmongoose

Implementation issue with Hashids library in Vue.js causing functionality hiccups

I'm having trouble getting the library hashids to cooperate with vue.js The method I would like to use is: <template> <div class="container"> {{ hashids.encode('1') }} </div> </template> <script& ...

javascriptvue.jsvuejs2vue-componenthashids

Guide to adjusting the color of Fluent UI icon when hovering with mouse?

I've been implementing Fluent UI in my current project. When initializing my button, I use this straightforward JavaScript code: iconProps: { iconName: 'NewFolder', styles: { root: { color: 'orang ...

javascriptreactjstypescriptfluent-uifluentui-react

Leveraging Angular's catchError method to handle errors and return

One of my challenges involves a model class that represents the server response: class ServerResponse { code: number; response: string; } Whenever I make api calls, I want the response to always be of type Observable<ServerResponse>, even in ...

javascriptangulartypescriptrxjsobservable

Tips for ensuring math formulas display correctly in CKEditor

I'm currently struggling to properly display the correct format of a math formula in ckeditor. I have made numerous attempts to find a solution, but so far, none have been successful. Here is an excerpt of my code: <html> <head> <scr ...

javascriptjqueryhtmljquery-ui

Removing the JavaScript unicode character 8206 from a text string

I recently transitioned from VB.NET to JavaScript, and I am still getting familiar with the language. I have encountered an issue where a string I'm working with in JavaScript contains Unicode escape characters (0x5206, left-to-right mark) that I need ...

javascriptregex

Google Chrome extension with Autofocus functionality

I developed a user-friendly Chrome extension that allows users to search using a simple form. Upon opening the extension, I noticed that there is no default focus on the form, requiring an additional click from the user. The intended behavior is for the ...

javascripthtmlgoogle-chromegoogle-chrome-extension

Are there any other methods of using HREF in an <asp:Button> besides OnClientClick for invoking an inline div?

I decided to create a concealed <div> on the same page and tried calling it with href="#", which worked perfectly. However, when I attempted to use the same code in ASP.net, I encountered some issues with Javascript or other factors that prevented it ...

javascriptasp.nethtmlcsshref

Prevent the next ajax request from overwriting the parameter value set in the previous request

When my application makes multiple ajax requests, I encounter a problem where the original set of parameters used for each request get changed by subsequent requests, leading to errors. Let's take an example: Request A initially sets an index of 0 in ...

javascriptjqueryajaxfunction

What is the best way to execute a function individually for every tag within a vue.js application?

I'm currently exploring the world of Vue JS and I thought it would be interesting to experiment with something new. Sometimes looking at the code first makes understanding it much easier than a lengthy explanation. Check out this code snippet on jsFi ...

javascriptvue.jsvuejs2