modifying the properties of arrow head in the ArrowHelper class in Three.js

While using the arrow helper class, I came across this example . Following it, I managed to make the arrow work. However, the size of the arrowhead is larger than what I desire. My current code snippet looks like this:

var direction = new THREE.Vector3().subVectors(secondVector, firstVector).normalize();
var arrow = new THREE.ArrowHelper(direction, firstVector, computeDistance(node1, node2) - 32, co);
bigObject.add(arrow);

The arrow starts at firstVector and points to secondVector.

I am wondering if there is a way to adjust the size or any other properties of the arrowhead's appearance (e.g., stroke weight, arrowhead location, etc.). I couldn't find anything helpful in the documentation.

Any assistance on this would be greatly appreciated!

Answer №1

This question is interesting, but the answer is negative. The size of the arrow's head changes along with its length.

To solve this issue, you must construct your own personalized ArrowHelper.

Version three.js r.63

UPDATE: This functionality has been integrated into the development version three.js r.64dev.

let customArrow = new THREE.ArrowHelper( direction, startingPoint, magnitude, colorHex, sizeOfHeadLength, sizeOfHeadWidth );

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 to create an interpolated string using a negative lookahead condition?

When analyzing my code for imports, I will specifically be searching for imports that do not end with -v3. Here are some examples: @ui/components <- this will match @ui/components/forms/field <- this will match @ui/components-v3 ...

Combining objects using mathematical operations for identical properties in JavaScript

Imagine I have two sets of data: const obj1 = { CRITICAL: 0, ERROR: 1, INFO: 0, WARNING: 0, }; const obj2 = { CRITICAL: 0, ERROR: 0, INFO: 0, WARNING: 1, }; I'm looking to merge them into a single object with the summed values for e ...

Wait for response after clicking the button in Vue before proceeding

When the button is clicked for the first time and the data property is empty, I need to pause the button click code until an ajax response is received. Currently, when I press the button, both wait and scroll actions happen immediately without waiting for ...

The jQuery DataTable is repeatedly triggering when attempting to conceal columns

Update Here is an additional example, consisting of just a few lines of code... triggering the alert twice! $(document).ready( function () { var x = $('#example').dataTable( { fnRowCallback: function( nRow, aData ...

Complete and send HTML forms with changing IDs

I am facing an issue with storing data from two HTML forms with dynamic ID attributes using AJAX calls. Currently, the AJAX call only works for one HTML form with a static ID name "surveyImage". I am unsure how to individually call the submit() method for ...

Tips for handling Google Spanner Date type in JavaScript

I am facing a challenge with Google Cloud Spanner as I work with multiple tables containing columns of type Date. While inserting entries with specified dates works fine, the issue arises when trying to retrieve these entries in the JavaScript frontend. Th ...

The jquery datetimepicker function cannot be located or is not functioning as intended

<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <script src="Js/bootstrap-datetimepicker.min.js"></script> <script src="Js/bootstrap-datetimepicker.he.js"></script> ...

Having trouble with ESLint in VSCode? The ESLint extension seems to be ignoring linting rules after starting a new project within VSCode

I recently started using the ESLint extension in my VSCode editor for my React project. After creating the starter files, I ran the following command in my terminal: eslint --init This allowed me to choose the AirBnb style guide with React, which generat ...

Finding specific data within a nested HTML name array using either JQuery or JavaScript based on the second level key

Is there a way to target all input elements with names that contain 'pref[*][location][]' using a jQuery selector or JavaScript? Specifically, I want to retrieve those inputs based on the 'location' key in the second level. <input ty ...

Using NPM in conjunction with a PHP/STATIC web site directory structure: A comprehensive guide

My PHP website has a file structure like this: / css/ js/ index.php When I run the following commands: npm init npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8984849f989f998a9babdfc5dd">[email p ...

Using JavaScript to Filter Through Numerous Values Based on Different Attributes

My goal is to efficiently filter multiple attributes with multiple values 'arr' represents a list of all products, and 'f_...' indicates the attribute such as color or type. 'namet' denotes the selected attribute by the user ...

Script function in Google Sheets HTML not being called

Within my Google app, I have the following HTML code that is supposed to call a function below. However, I am not getting any response. This script has been used consistently throughout my code until now. <div id= "right_column"> <p> ...

Can you explain the technical distinctions between Express, HTTP, and Connect?

const express = require("express") , app = express() , http = require("http").createServer(app) As I observe, these dependencies are commonly used. As far as I understand it, http serves front-end HTML, while express manages server-side Node.js logic. ...

Trouble expanding Bootstrap Dropdown menu on mobile devices

I am currently facing an issue with a Bootstrap navbar that includes a dropdown menu for selecting courses. On my desktop, everything works perfectly fine when I click on the courses tab. However, when I try to select a course on mobile, nothing happens. ...

Use jQuery to clear the content within a div element following the removal of an element

A dynamic generation of checkboxes is introduced to div1: $.each(json, function(idx, obj) { $("#tbl1").append('<input type="checkbox" id='+obj.firstId+' onclick=nextPopulate('+obj.firstId+'); >'); } Upon selection, ch ...

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

Tips for automatically injecting Models and Services into all Controllers when developing a Node.js application using Express

After working with Sails and enjoying the automatic injection of models and services into controllers, I'm now looking to replicate this feature in my project using the Express framework. It will definitely save us from having to require them at the s ...

Switch up the Yii ListBox default onChange event to utilize AJAX with onClick instead

Below is the code I have for a <select> element: $htmlOptions = array( 'size' => '20', 'ajax' => array( 'type' => 'POST', 'url' => Y ...

Is it possible to use abbreviations instead of full names for object properties in a JSON string?

I'm looking for a way to efficiently convert large and repetitive javascript objects into JSON strings. With the abundance of repeating property names in these objects, I want to streamline the process by replacing those names with predefined abbrevia ...