Delete the top part of an ArrowHelper in Three.js

Within my code, I have implemented an ArrowHelper and its parameters are updated through the function below (each invocation of this function adjusts the ArrowHelper's dimensions):

function updateArrowHelper() {

    // Update parameters for transportedVector
    transportedVector.arrowHelper.setLength(transportedVector.coordLocal.length(), headLengthVector, headWidthVector);
    transportedVector.arrowHelper.setDirection(directionVector.normalize());
    transportedVector.arrowHelper.position.copy(coordTorus);
    transportedVector.arrowHelper.line.material.linewidth = widthVector;
    transportedVector.arrowHelper.setColor(hexVector);
    // Set head length and width to zero if dirVector.length is zero
    if (transportedVector.coordLocal.length() == 0.0)
        transportedVector.arrowHelper.setLength(0, 0, 0);    
}

I am aiming to hide the head of the ArrowHelper if its length (determined by

transportedVector.coordLocal.length()
) is zero. To achieve this, I implemented the following check:

// Set head length and width to zero if dirVector.length is zero
if (transportedVector.coordLocal.length() == 0.0)
    transportedVector.arrowHelper.setLength(0, 0, 0);

However, upon execution, this approach does not yield the intended result. Despite the length being zero, the head of the ArrowHelper remains visible after the function is called. I am unsure as to why this is happening.

If anyone can identify the issue, I would greatly appreciate it.

Thank you in advance.

Answer №1

To conceal the top of the ArrowHelper, follow this technique:

arrowHelper.cone.visible = false;

This method applies to three.js version r.80

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

Issue with Vue JS router component: Unable to reuse JavaScript file containing webpack imports after switching routes

Hey, I'm facing a bit of a complex issue here, but I'll do my best to explain it clearly. Currently, I'm using the latest versions of Vue and Vue-Router in my application with webpack. The main component in question is called CP.vue & ...

Insert an HTML page into a div element

I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...

Calculating the volume of an STL file mesh using three.js

I'm currently trying to figure out how to determine the volume of an STL file. I've successfully managed to obtain the dimensions of the model using var box = new THREE.Box3().setFromObject( mesh ); var sizes = box.getSize(); However, when it c ...

Vue/Vite vanilla setup encountering a 'Failed to fetch dynamically imported module' TypeError

We're currently working with a vanilla Vue/Vite setup and I'm encountering the error message TypeError: Failed to fetch dynamically imported module in Sentry logs. It appears that these errors coincide with new deployments to production, but I d ...

The result of combining two JavaScript variables

When I multiply a variable by 2 and assign the value to another variable, why do I get 0? My goal is to toggle the visibility of blocks every time a button is pressed. Oddly enough, it works when I use count++ * 2. For code reference, please refer below: ...

React.js - Implementing a Delayed Loading Indicator to Prevent Flickering

How do I implement a loading indicator in React that only appears if the loading state is true for over 1 second, and if it resolves before 2 seconds, show the indicator for at least 1 second? In Angular JS, there was a similar question with 5 conditions: ...

How can I use JavaScript to create a drop-down menu that only appears after selecting the previous one?

<div class="row"> <div class="col-md-4"> <label for="selectCustomers">Customer Select</label> <select class="form-control pointer" name="tableCustomers" id=" ...

When trying to access $model.show() in Vue.js, the returned model is showing as undefined

I'm running into a console error message every time I try to click the button for $model.show('demo-login'): TypeError: Cannot read property 'show' of undefined Error output when the button is clicked: TypeError: Cannot read prop ...

Say goodbye to document.write?

There is a function defined below: function loadJavaScript(src) { document.write('<' + 'script src="' + src + '"' + ' type="text/javascript"><' + '/script>'); } This ...

Hide panel when button is clicked - bootstrap

Is it possible to make a panel collapse by clicking a regular bootstrap button? Below is the code snippet: <div class="panel panel-primary" style="border-color: #464646;"> <div class="panel-heading" style="border-color: #BBBBBB; height: 35px; ...

The code for implementing the "Read More" feature is not functioning as intended

I have been experiencing an issue with the implementation of the "read more" feature on my website. Although the code seems to be functioning properly, it only works after pressing the read more button twice. This particular code is designed to detect the ...

Tips for repositioning a node element as the first child within its parent element

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='parent'> <div>B</div> <div>C</div> <div onload='this.parentNode.prependChild();'>A&l ...

Exploring an unusual HTML structure using Python's Beautiful Soup and urllib for web scraping

While extracting data may not be a challenge, the real issue lies in locating it. My focus is on scraping football data from a website that presents statistics either for all years or for specific seasons. However, despite selecting a particular season, ...

Menus that mimic the style of Google Translate's select options

I'm looking to design an HTML select menu using CSS in a similar fashion to Google Translate's style on Google Translate. I've searched for tutorials online, but they all involve jQuery. Is there a way to achieve something similar using only ...

Ways to eliminate redundant older React components within a different library

Having trouble with material-ui in my React project as I encounter this error. Error: Invalid hook call. Ensure hooks are only called inside the body of a function component. Check for: Possible mismatch of React and renderer versions (i.e., React DOM) ...

Issue with Mongoose not triggering callback

This particular function is the one that we are discussing function matches_password(password) { var modified = false; var matched = false; User.count({password : password}, function (err, result) { modified = true; console.log('hey& ...

I keep receiving an error in Angular JS but I'm unsure of the reason

I've been working on AngularJS and created a basic module and controller. I'm attempting to show the data of an element inside the controller on the HTML view page, but all I see is {{student.name}} and I'm receiving an error message that sa ...

Issue with Adding Additional Property to react-leaflet Marker Component in TypeScript

I'm attempting to include an extra property count in the Marker component provided by react-leaflet. Unfortunately, we're encountering an error. Type '{ children: Element; position: [number, number]; key: number; count: number; }' is n ...

Can we avoid the error callback of an AJAX request from being triggered once we have aborted the request?

Initially, I encountered a challenge where I needed to find a way to halt an AJAX request automatically if the user decided to navigate away from the page during the request. After some research, I came across this helpful solution on Stack Overflow which ...

Tips for managing and loading data into a dataGrid or table with the help of ReactJS and ReactHooks

Struggling to retrieve user input data from the form and display it in the table/Datagrid below, without success. Follow the process flow outlined below Once the user submits the form and clicks the send now button, the {handleSubmit} function is trigger ...