Add a luminous shine to a THREE.TextGeometry element within the Three.js environment

After conducting extensive research on Google, I am still trying to determine if it is possible to achieve a glow effect within the three.js environment.

My goal is to create a glowing effect based on TextGeometry rather than a simple primitive shape like a sphere or cube, as shown in Lee StemKoski's shadow glow example below.

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

I have been studying and experimenting with Lee StemKoski's examples

Specifically, I have been looking into his Shader Glow example, which seems to work well with simple objects but not complex geometric shapes. So, I am exploring any potential workarounds or alternative methods to achieve a glow effect around text.

Regards,

w9914420

UPDATE: I have decided to try using the mapping concept by attaching an image to the text to create a glow effect. In this instance, I used a circle, but adapting it for the specific text should be feasible.

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

UPDATE: 20/3/17 - I made an attempt at utilizing the theeX.atmosphere material to create the desired text glow effect. Here are some of my results.

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

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

As you can see, I haven't quite achieved the desired outcome yet. My biggest challenge lies in smoothing the vertices of the outer glow text further. I'm uncertain if this is even possible, so any advice would be greatly appreciated.

Here is the native code used to create the effect:

//normal text created  

var geometry2  = threeLab.asset.simpleText('hello','my_font');
var materialme  = new THREE.MeshNormalMaterial();
var mesh    = new THREE.Mesh( geometry2, materialme );
this.scene.add( mesh );


// we create a secondary text object to use as glow
var geometry  = threeLab.asset.simpleText('hello','my_font');

// clone for manipulation
var geoclone = geometry.clone();


//Thes functions are need to make it work in this case
geoclone.mergeVertices();
//geoclone.computeCentroids();
geoclone.computeVertexNormals();
geoclone.computeFaceNormals();

// part of threex library to make the glow scale and expand
THREEx.dilateGeometry(geoclone, 0.5);
var materialz   = THREEx.createAtmosphereMaterial();
var meshHalo    = new THREE.Mesh(geoclone, materialz );

//we have now our glow
this.scene.add( meshHalo );

Answer №1

After experimenting, I decided to increase the bevelsegments on my secondary TextGeometry object, which helped smooth it out. This allowed me to fit my first text inside the second text like this:

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

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

I still need to make some adjustments to achieve a more subtle glow effect, but for now, the result is satisfactory.

Appreciate all the valuable input from everyone :)

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

Is there a way for me to send a URL request from my website to a different server using PHP?

I am looking to initiate a request from my website to my server using a specific IP address. From there, I need the server to send another request to a different server and then display the response on the webpage. Can anyone provide guidance on how to ...

Is there a way to verify if all the values in an array of objects are identical?

In this scenario, my array consists of entries with identical address IDs but different phone types and numbers. I am in need of assistance with iterating through the array to extract the phone type and number when the address ID matches. I seem to encount ...

Is it possible to test code that utilizes a different framework from jQuery using QUnit?

Currently, I am in the process of developing a compact library that is capable of utilizing multiple frameworks (specifically jQuery, Prototype, YUI2). To ensure its functionality, I am conducting tests using QUnit. Nevertheless, one setback is that QUnit ...

Is there an issue with this npm version number?

I am trying to include the following dependency in the package.json file of my npm package: "redux-saga": "^1.0.0-beta.0 || ^0.16.0"`. When I install this package in a project that already has "redux-saga": "^1.0.0-beta.1 I am expecting npm/yarn to on ...

Securing AJAX Requests: Encrypting GET and POST Requests in JavaScipt using Node.js

Looking for a way to secure ajax post and get requests using JavaScript. The process would involve: Server generates private and public key upon request Server sends the public key to client Client encrypts data with public key Server decrypts data wit ...

The NestJS HttpException class will default to a status code of 201 if no specific status code is

This particular instance showcases how instantiating the HttpException class in this manner results in an exception being thrown with an undefined status, ultimately becoming a status of 201 (I presume it defaults to this status as it is associated with a ...

Having trouble removing objects in angular.js?

I have developed an API to be used with Angular.js: angular.module('api', ['ngResource']) .factory('Server', function ($resource) { return $resource('http://localhost\\:3000/api/servers/:name') ...

Button color changes upon submission of form

Can anyone help me figure out how to change the color of a submit button after a form submission using Twitter Bootstrap 3? I have a form with multiple buttons serving as filters for my product page, but I can't seem to change the color of the selecte ...

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

Issue with JQuery image upload functionality not functioning correctly for upcoming events

In order to enable users to upload images with their posts, I have implemented an upload form alongside every reply form. Users can upload an image by clicking the upload button and then submitting the post. Currently, the upload form works for the first ...

Create an array by copying elements from another array object

My goal is to merge the data from two arrays, array1 and array2, into a new array called array3. Here's how I want it structured: array 1 objects: userName, userId array 2 objects: userId, msg I aim to obtain an array3 consisting of: userId, userNa ...

Animating camera movement and rotation simultaneously using slerp in THREE.js

I am looking to smoothly move the camera position while rotating it. Below is the function I am using: function moveAndLookAt(camera, destinationPosition, destinationLookAt, options) { options || (options = {duration: 300}); var originalPosition = n ...

Utilizing checkboxes to toggle the visibility of a div element with varying headings

By toggling a checkbox, I aim to show or hide the same div with a different heading. $('#cbxShowHide').click(function() { this.checked ? $('#block').show(1000) : $('#block').hide(1000); }); #block { display: none; bac ...

Tips on utilizing koa2 for streaming a video file:

I am looking to use Koa2 for streaming my video files, with support for HTTP 206 (Partial Content) requests. The code is functioning properly on Firefox but encountering issues in Chrome. In Chrome, the video request is only made once and then stops requ ...

Exploring the Functionality of worker-loader Inline

It was my understanding that the Webpack worker-loader configuration below: ... module: { rules: [ { test: /worker\.js/, loader: "worker-loader", options: { inline: 'fallba ...

Issue with Element.update() method malfunctioning on IE browser is causing concern

Utilizing the Element.update() method from the prototype: [ ... ] var link_1 = new Element('a').update( '<' ); var link_2 = new Element('a').update( '<<' ); [ ... ] Encountering a unique issue only in IE: ...

The issue of Jquery selectors not functioning properly when used with variables

Currently working on a script in the console that aims to extract and display the user's chat nickname. Initially, we will attempt to achieve this by copying and pasting paths: We inspect the user's name in the Chrome console and copy its selec ...

Passing an ID in Next.js without showing it in the URL

I am looking to transfer the product id from the category page to the product page without showing it in the URL Category.js <h2> <Link href={{ pathname: `/product/car/${title}`, query: { id: Item.id, }, }} as={`/p ...

Angular.js hierarchical model issue: grandchildren functionality not functioning as expected

Currently, I am delving into the world of Angular and exploring its functionalities. My main goal is to construct a hierarchical data structure that can be easily manipulated using a hierarchical view: Root: - addChild - child 1: { remove, addChild, c ...

Can anyone help me with integrating a search functionality inside a select tag?

I am working on a select dropdown and want to add a search box to easily filter through the available options. I know this can be done using the chosen library, but I prefer to implement it using plain JavaScript or jQuery. Does anyone have suggestions on ...