"Changing the size of the ArrowHelper in three.js: A step-by-step guide

Question

"Changing the size of the ArrowHelper in three.js: A step-by-step guide

I am currently working on implementing ArrowHelpers to visualize and represent forces acting on an object. In my setup, the length of the vector indicates the strength of the force being applied. However, I have encountered an issue where changing the length of the arrowhelper does not actually result in any visible changes. Despite my efforts to update the length, all ArrowHelpers in the scene continue to maintain the length set during their creation. Interestingly, the direction of the vector is updated correctly. I am puzzled by this behavior and unsure of what I might be overlooking. Below is the snippet of my code:

// construction:
ARROW_GRAVITY = new THREE.ArrowHelper( dir, origin, length, 0xDD3377 );
SCENE.add( ARROW_GRAVITY );

// updating scene:
ARROW_GRAVITY.position.copy(BULLET.position);
var dirGrav = new THREE.Vector3( 0, -1, 0 );
dirGrav.normalize(); // deemed unnecessary in this particular case
ARROW_GRAVITY.setDirection(dirGrav);
var gravForce = PROJ_MASS * 9.8;
ARROW_GRAVITY.length = gravForce;
ARROW_GRAVITY.updateMatrix();
console.log(ARROW_GRAVITY.length); // operates as intended (displays gravForce)

javascript vector three.js

Answer 1

Answer №1

Refer to the official documentation for instructions on adjusting the size of the ArrowHelper.

To change the length of the arrowHelper, use the method arrowHelper.setLength( length );

Please note that there are additional optional arguments available for customization.

Version: three.js r.93

Answer 2

Refer to the official documentation for instructions on adjusting the size of the ArrowHelper.

To change the length of the arrowHelper, use the method arrowHelper.setLength( length );

Please note that there are additional optional arguments available for customization.

Version: three.js r.93

Answer 3

Answer №2

Adding on to the insights shared by WestLangley, when using .setLength() with specified parameters, it performs as anticipated:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(4);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101000);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var dir = new THREE.Vector3(0, 1, 0);
var arrow = new THREE.ArrowHelper(dir, scene.position, 2);
scene.add(arrow);

scene.add(new THREE.GridHelper(4, 4));

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  arrow.setLength(Math.cos(time) * 0.5 + 1.5, 0.5, 0.1);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

Answer 4

Adding on to the insights shared by WestLangley, when using .setLength() with specified parameters, it performs as anticipated:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5).setLength(4);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x101000);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

var dir = new THREE.Vector3(0, 1, 0);
var arrow = new THREE.ArrowHelper(dir, scene.position, 2);
scene.add(arrow);

scene.add(new THREE.GridHelper(4, 4));

var clock = new THREE.Clock();
var time = 0;

render();

function render() {
  requestAnimationFrame(render);
  time += clock.getDelta();
  arrow.setLength(Math.cos(time) * 0.5 + 1.5, 0.5, 0.1);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

"Changing the size of the ArrowHelper in three.js: A step-by-step guide

Answer №1

Answer №2

Similar questions

How can I access the object that created an interval from inside an interval callback function?

Interactive image popups with JavaScript

Attempting to invoke a static function from a imported ES6 module

The functionality of AJAX is successful when tested on a local server, but encounters issues when deployed on a live

Failure to populate AngularJS view

Step-by-step guide to showing the contents of every file in a directory on the console using node.js or express

The data type 'Event' cannot be assigned to the data type 'string' in this context

Discovering the specific value from a fixture file in Cypress

Performing an AJAX GET request to the API after a set time interval

before sending the url with fetch(url), it is adjusted

vue mapGetters not fetching data synchronously

Tracking changes to payment methods when an order is modified through the WooCommerce backend

Looking to align the labels of material UI tabs to the left instead of their default center alignment? Here's how

Issue: jQuery Datatable not functioning properly while attempting to populate the table through JavaScript.Explanation: The

Refresh the Data Displayed Based on the Information Received from the API

Production website fails to display updated data while the localhost version operates without issues

Is it possible to manage the form submission in React after being redirected by the server, along with receiving data

Changing the content of the initial post in a loop on WordPress

Ensuring uniqueness in an array using Typescript: allowing only one instance of a value

What sets my project apart from the rest that makes TypeScript definition files unnecessary?