Creating a Halo (external outline) for a circular sector in THREE.JS

I'm working on adding a halo (external black outline) to certain shapes in three.js. While I was able to achieve this easily with rectangles and circles, I am facing challenges with circular sectors (not full circles).

Here is my current attempt:

It is not perfect as the halo appears 'on' the mesh at the circle's center.

This is the code I am using:

var radius = 50
var segments = 32;
var thetaStart = 0;                   
var thetaLength = 0.5 * Math.PI; 

var geometry = new THREE.CircleGeometry(radius, segments, thetaStart, thetaLength);
var material = new THREE.MeshBasicMaterial({color: 0xffffff});
var circle = new THREE.Mesh(geometry, material);

/* create halo */
var unit =  1 / radius; 
var biggerGeometry = new THREE.CircleGeometry(radius + 2, segments, thetaStart - 2*unit, thetaLength + 4*unit); 
var haloGeometry = new THREE.EdgesGeometry(biggerGeometry);    
var haloMaterial = new THREE.LineBasicMaterial({ color: 0x000000 }); //black halo    
var halo = new THREE.LineSegments(haloGeometry, haloMaterial);
circle.add(halo);

Is there a simpler or more efficient solution to achieve this effect?

Thank you in advance.

Answer №1

If you're looking to enhance your visuals with edge detection, consider using a shader like the one found here (keep in mind it may require an additional pass):

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

Trying to bring in components from directories above

I'm currently facing an issue with importing components from a parent directory into my project. My goal is to be able to use these components across multiple projects, which seems like the most straightforward approach. However, when I attempt this, ...

Reverse the Angular component to AngularJS

I'm currently working on downgrading an Angular component for use in an AngularJS app. To test this, I created a simple Angular component: // my-test.component.ts @Component({ selector: 'my-test', template: '<h1>Hello Wor ...

Retrieving Information from JSON File Using a Variable (JavaScript/Discord.js)

While I was coding my Discord bot, I encountered an unexpected issue. Normally, after linking a JSON file, you can access data by using jsonFile.path to retrieve specific information. However, I faced a challenge where I needed to replace the path with a ...

Upon initializing mean.io assetmanager, a javascript error is encountered

I am eager to utilize the MEAN.io stack. I completed all the necessary initialization steps such as creating the folder, performing npm install, and obtaining the required libraries. Currently, in server/config/express.js file, I have the following code: ...

Validating CodeIgniter using advanced JavaScript techniques

When trying to insert data using a JavaScript and Bootstrap validation script, I encountered an issue. After entering a value in the text box, a warning pops up stating that the input value already exists. What should I modify in my script to address this ...

The Ajax form's malfunction is attributed to JSON, as it throws a parser error indicating a SyntaxError. Specifically, the JSON.parse function encounters an unexpected end of data at line 1, column 1

I understand that this is a commonly asked question, but I have tried all the solutions provided and none of them have worked for me. My specific issue is that I am unable to load a JSON response from the server using AJAX. Here's the setup: my "scrip ...

Browsing HTML Documents with the Click of a Button

After collecting JSON data from a SharePoint list, I am currently in the process of creating an HTML Document. At this point, I have completed approximately 80% of the expected outcome. Due to Cross-Origin Resource Sharing (CORS) restrictions, I have hard ...

Here's a unique version: "Discovering how clients can easily connect to a new room using socketio

There are 5 rooms on my server named "A", "B", "C", "D", and "E." Server-Side In the server side code: io.on('connection', (socket) => { console.log('New user connected'); socket.on('disconnect', () => { ...

AccessMediaStream - camera direction

My current setup involves using an Android tablet and GetUserMedia to capture images in my program. It seems that by default, GetUserMedia uses the front camera. How can I set the rear camera as the default instead? Below is the code snippet I am using w ...

Ways to update the state within a class-based component

I am facing an issue with updating the state value. Can someone guide me on how to load the textfield with the current state value? Kindly refer to the code snippet below: class Form extends React.Component{ constructor(props){ super(props); thi ...

When attempting to send data from Ajax to PHP as JSON, an error occurs and the data transmission fails

When attempting to send data as JSON, an error response is received stating: SyntaxError: Unexpected token < in JSON at position 0. If the data is sent as text, it successfully reaches PHP, but PHP does not respond accordingly. AJAX/JavaScript using J ...

The ajax method is encountering an issue when trying to perform an action: It is unable to find the necessary anti-forgery form field "__RequestVerificationToken" required for the operation

I am encountering an issue with my ajax method that triggers the action method from the controller. When I run this method, I receive an error stating: The required anti-forgery form field "__RequestVerificationToken" is not present. However, upon inspecti ...

Objects remaining static

I'm currently working on a VueJS component that has the ability to export data into .xlsx format. To achieve this functionality, I am utilizing the json2xls library, which requires an array of objects with identical keys (representing column names) to ...

Attempting to manipulate the selected tab material using a custom directive with two-way data binding

I've been struggling to change the tab using code and can't seem to figure out what's causing the error. It works fine when I use the controller to change the variable, but when trying to bind it through a directive, it breaks. var app = an ...

Adjust the width of menu options using jQuery

One issue I am facing is with the menu on my homepage. I would like the menu options to enlarge upon hover, and while I have achieved this effect, there is a flaw in the animation: When I move my cursor away before the animation completes, the option abru ...

Resolving the bothersome complications of self-looping steps in jQuery animate delay

My timeline definition includes selectors and a sequence of delays and animations to apply to an object. I have also provided the option to loop through the steps for a specific object. Here is the function that I use to queue the animations: function an ...

Setting the height of a div tag in CSS/HTML5 to match the current height of the browser window

Is there a way to make the height of my div tag always equal to the height of the browser's window, so it adjusts automatically when the browser is resized? I have tried using .class { height: 100%; } But this doesn't work. I've learne ...

Why isn't the click event triggering MVC 5 client-side validation for ajax posts?

To incorporate client-side validation with a click event for ajax posts, I followed a guide found at the following URL: Call MVC 3 Client Side Validation Manually for ajax posts My attempt to implement this involved using the code snippet below: $(&apos ...

ReactJS with conditional closing tags

Here is a sample json response : {id: 1, name: a} {id: 2, name: b} {id: 3, name: c} {id: 4, name: d} {id: 5, name: e} {id: 6, name: f} I am looking to organize these by pairs in my React component like so : <div className="group-item"> ...

The Node.js application that uses Express and connects to a MSSQL database is reporting that the database

One of my other applications utilizes express and routes, but for this new app I wanted to simplify it. Despite being confident in the correctness of the connection string, I encountered an issue. script.getQuestions(connection); script.getQuestions = fu ...