"The utilization of either Threejs ArrowHelper or Line with an outlined design

Is there a way to outline an arrow or line using the ArrowHelper or Line geometries within the Three.js framework?

While trying to achieve this, I encountered the issue that outlining a complex object or a line is not as straightforward as shown in this example by Stemkoski.

After some experimentation, I discovered a method for determining the bounding box minimums and maximums for both scenarios. This is how I obtained these parameters:

var edgeBoundingBox = new THREE.Box3().setFromObject(element);

For lines, I had to adjust the bounding box with some additional height and width to make it visible, as otherwise it would have 0 height and 0 width. Then, I utilized BoxGeometry to create the desired outline effect with a THREE.BackSide mesh.

However, the resulting outcome did not align correctly with the position and rotation of the original line/arrow element, requiring some workarounds to match them up. Are there any more efficient or cleaner methods to achieve this? Perhaps another technique that yields better results? Should I be retrieving the rotation and position information from a different source?

Answer №1

Since there are limitations to changing the linewidth property in certain contexts (refer to the post here), I offer two alternatives to outlining your line or arrow that may be useful for those seeking solutions: 1) Adjust the color of the line. 2) Utilize a Cylinder instead of a Line and apply outlining as usual (similar to the example by Stemkoski).

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

What is the technique for adjusting the background while rotating the corner?

Is it possible to position a background image in the corner while rotating another image? rotate: $('#ship').css({ transform: 'rotate(' + corner + 'deg)' }); } move background: starx[i]=starx[i]+... s ...

How can I use JavaScript to capture the "MDCMenu:selected" event for the Menu Component in Material Design Web Components?

I am currently using the Material Design Web Components plugin known as "Menu." Once the menu is launched, my goal is to be able to effectively handle all possible ways a "menu item" can be selected. While adding an on-click event through my framework&apo ...

Unable to execute any actions on object in JavaScript

I currently have two functions in my code: getRawData() and getBTRawData(). The purpose of getBTRawData() function is to retrieve data from Bluetooth connected to a mobile device. On the other hand, getRawData() function takes the return value from getB ...

Using shortcode to enhance wordpress post content

I am trying to implement a feature similar to the one found at http://jsfiddle.net/theimaginative/gA63t/ within a wordpress post. I have attempted to create a shortcode for inserting this into a post, but I am encountering difficulties. While I have been s ...

Displaying an image within a textarea using JS and CSS

Could someone help me create a form with textareas that have small images on them? I want clicking on the image to call a function fx(). Can anyone code this for me using JavaScript/jQuery/CSS? In the image below, clicking on "GO" will call Fx() I attemp ...

If IE's conditional comments are dysfunctional

Could this be a silly question? I feel puzzled by it. I've been using an if IE conditional statement to address some issues in IE6. In the head section, this is what I have: <!--[if lt IE 7] > <script type="text/javascript" src="js/ie6.js" ...

Can the distinction between a page refresh and closure be identified using the method below?

My idea is to trigger a popup window when the page is closed, not when it is refreshed. The plan is as follows: Client Send an ajax request to the server every x seconds. Server var timeout=0 var sec=0 while (sec>timeout) { open popup win ...

Can anyone provide guidance on how to make slideToggle move upwards with jQuery?

<div class="row"> <div class="col-lg-2" ></div> <div class="head" style="background-color: #1c94c4; text-align: center; cursor: pointer;"> Connect</div> <div class="chat" style="display: none;width:a ...

Using the Ternary Operator in JavaScript to Dynamically Update HTML Elements with Angular

Is there a way to convert the code below into a ternary operator so that it can be used in an .HTML file? statusChange && statusChange === 'Employed' ? true : employmentStatus === 'Employed'; To clarify, I want to assign the re ...

The value of a Highcharts series does not match that of a Data Source

Encountering an issue with Highcharts where the value of this.y does not reflect the data source. The discrepancy is apparent in the image below. Uncertain if this is a bug or user error. Screenshot illustrating the problem You can view my Demo here: htt ...

Comparing v-show(true/false) and replaceWith: Exploring the best practice between Vue and jQuery

Currently, I am in the process of learning vue.js and have a question regarding the best approach to implement the following scenario: https://i.sstatic.net/2YBEF.png https://i.sstatic.net/YCEHG.png The main query is whether it is acceptable in HTML to w ...

Determining when props are updated in Vue.js 2 when passing an object as a prop

Let's say there is an array feedsArray, with a sample value like this: this.feedsArray = [ { id: 1, type: 'Comment', value: 'How are you today ?' }, { id: 2, type: 'Meet', name: 'Daily ...

Display the content of a Vue file directly on the webpage

I am currently developing a website to showcase UI components using plain CSS. The project is built with Vue, utilizing standard HTML and CSS. One of the key features I am working on is providing users with two views for each component: 'Preview' ...

Having trouble with my bootstrap slider carousel - it's just not cooperating

I incorporated Bootstrap's carousel to display the various courses on my website, featuring three courses at a time before transitioning to the next set of three. However, I am encountering an issue with this setup. Please see the image below for refe ...

JavaScript code for displaying and concealing elements

I have a simple requirement where I need to check for a variable and display or hide a class based on its value. This is being done on a SharePoint publishing page. The snippet below is not working as expected: if (source === 'show') { $(&a ...

Footer placement not aligning at the bottom using Bootstrap

I'm having trouble getting my footer to stay at the bottom of my website without it sticking when I scroll. I want it to only appear at the bottom as you scroll down the webpage. Currently, the footer is positioned beneath the content on the webpage. ...

CSS - owl carousel automatically stretches images to full width

Here is the code snippet that I am working with: $(document).ready(function() { $('.owl-carousel').owlCarousel({ loop:true, items:4, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true }); }); #owl-demo ...

The compare function in bcryptjs will result in a false output if the passwords include numerical

I have successfully used bcryptjs to hash my passwords during user registration. However, I am facing an issue with the bcrypt.compare function when attempting to log in. The function returns a false promise when passwords contain numbers or special charac ...

Editing Fields in Asp-net 3.1: A guide to using Summernote or other rich text editors

I am facing an issue where some fields in my database contain strings that generate HTML code such as "<p'>Hello world</p'>". I am attempting to import these strings into a summernote rich text editor for editing purposes. H ...

Can you explain the concept of a factory function to me?

As I delve into learning Javascript, I have encountered terms like factory functions and constructor functions in the realm of object-oriented programming. Despite my attempts to grasp the distinction between them, I still find myself struggling to fully ...