Adjusting the position of the arrow helper to create more space from the

I am currently working on achieving a specific goal.

https://i.sstatic.net/XnAmo.png

Instead of moving farther away from the object, the two arrow helpers seem to be shifted inward. How can I adjust their positioning to move them away from the object?

Below is the code snippet in question:

var startx = wall.getStartX();
    var starty = wall.getStartY();
    var endx = wall.getEndX();
    var endy = wall.getEndY();

    // This section determines how far the arrow should be moved away
    // This is where I am encountering difficulty
    if (wall.getWallOrientation() == 'horizontal') {
        starty += 50;
        endy += 50;
    } else {
        // Vertical 
        startx += 50;
        endx += 50;
    }

    // Define start and end points of the dimension
    var from = new THREE.Vector3(startx, 0, starty);
    var to = new THREE.Vector3(endx, 0, endy);

    var direction = to.clone().sub(from);
    var length = direction.length();

    var hex = 0x0;
    var arrowGroupHelper = new THREE.Group();
    arrowGroupHelper.add(new THREE.ArrowHelper(direction.normalize(), from, length, hex, 10, 10));
    arrowGroupHelper.add(new THREE.ArrowHelper(direction.negate(), to, length, hex, 10, 10));

Thank you for your help and support!

Answer №1

Finally figured it out. My approach involves determining the line's center and calculating the angle to determine the movement direction.

var degrees = Utils.angleAccurate(center.x, center.y, lineCenterPoint.x, lineCenterPoint.y);

        var radians = degrees * Math.PI / 180;
        var x = startx + Math.cos(radians) * 30;
        var y = starty + Math.sin(radians) * 30;

var orientation = edge.wall.getWallOrientation();
        if (orientation == 'horizontal') {
            starty = y;
            endy = y;
        } else if (orientation == 'vertical') {
            // vertical 
            startx = x;
            endx = x;
        } 

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

Phaser 3 shows images as vibrant green squares

In my project, I have two scenes: Loading and Menu. In the loading scene, I load images with the intention of displaying them in the menu. Here is the code for the Loading scene: import { CTS } from './../CTS.js'; import { MenuScene } from &apo ...

Tips for creating horizontal dividers with CSS in Vuetify using <v-divider> and <v-divider/> styling

Currently, I am working on a project using Vue.js and adding Vuetify. However, I need to use a component. .horizontal{ border-color: #F4F4F4 !important; border-width: 2px ; } <v-divider horizontal class=" horizontal ...

Filling out forms simultaneously with input in ReactJS

Hey there! I'm having an issue with my form where the inputs are all being filled simultaneously. For example, when I enter something in the first name input, it also gets entered into the last name, email, and phone inputs at the same time. However, ...

What is the process for adding new data to a data source without overwriting existing information?

I need assistance with a react native app I am developing. I am currently facing an issue where the data received from a fetch request needs to be displayed in a list view. However, each time new data is fetched, it overwrites the previously received data ...

What is the best way to immediately update the state in a React functional component?

Having recently started learning React, I find myself struggling to understand the lifecycle of a functional component. Let's consider a scenario where I have multiple checkboxes labeled as: checkbox, a, b, c, and d, each corresponding to values a, b, ...

Dealing with Array Splicing Issues in Angular

Being fairly new to the world of AngularJS, I suspect that I am just making a simple mistake. My goal is to splice the cardTypes array at the var newCard = cardTypes.shift(); line rather than using .shift() so that I can consider my ng-repeat index. Whil ...

What techniques can I implement to optimize the speed of this feature in JavaScript?

I have developed a feature that highlights any text within a <p> tag in red based on a user-specified keyword. The current implementation works well, but it is slow when dealing with over 1000 lines of <p>. Is there a faster way to achieve this ...

What methods do Google and Facebook use to manage user sessions effectively?

I'm looking to incorporate a session in my asp.net application that remains active until the user logs out. I've come across this feature on websites like Google, where the session persists even after a computer restart. How do they achieve this ...

Saving logs to a file or variable in Ionic using Angularjs

I am currently developing a new project using Ionic (based on AngularJs) and so far everything is functioning as expected. For debugging purposes, I have implemented a method where every 'Function call' (every step) is output to the console via ...

The first parameter needs to be either a string, a buffer instance, or a uint8array. Null received

Encountering an error with my Node.js code and I'm not sure how to fix it. The error message reads: "First argument must be of type string or an instance of buffer or uint8array. Received undefined" I admit that I am new to Node.js and would apprecia ...

What is the process of modifying the data in DataTables once it has already been initialized?

I am looking to dynamically populate a table using datatables through an ajax request. Here is the approach I have taken: $(function(e) { $('#CampaignMenu').change(function(e) { $('#ReportWrapper').hide(); ...

having difficulty preserving the edited HTML document with JSoup and Java

I am facing an issue with modifying and saving changes to an existing HTML file. I can make modifications, but when it comes to saving the changes back to the HTML file, I encounter difficulties. https://i.sstatic.net/CRhUV.jpg The specific modification ...

Encountering the "Javascript must be enabled to run this" message when trying to retrieve data from an API

Express.js Setup const app = express(); app.use(express.static(path.join(__dirname, 'build'))); app.use(express.static(path.join(__dirname, 'doc'))); app.use(express.json({ limit: "10mb", type: "application/json" })) ...

JavaScript makes Chrome Hard Reload a breeze

We've created a browser-based app using AngularJS and are currently testing it with a group of clients. One major challenge we're facing is explaining how to "Empty Cache and Hard Reload" using the Chrome browser (by pressing F12, then clicking o ...

Preventing event propagation in jQuery's click handler

Is it possible to prevent the propagation of a click event on a dynamically created div within its parent div? HTML <div id = "parent"> Some Stuff </div> Jquery $('#parent').click(function(){ $(this).append('<div class = ...

Slider that allows range selection after midday

Currently facing a dilemma using the noUiSlider plugin. I have set up a time range picker starting from 6 am to 6 am the following day. Everything works smoothly until it reaches 23:59, but I need it to display 1:00, 2:00 instead of 25:00, 26:00 for the ...

Creating textures using a-frame's rendering capabilities

I have been trying to create a similar setup to this demo... ... as an a-frame component. However, I am encountering a problem where the quad, meant to display the "monitored" camera feed, is showing a blank white screen. It turns black when I enter VR mo ...

Using regular expressions, eliminate the element from a JSON object that contains a specified property

Imagine I have a string representing a JSON object. It could be invalid, with some params that will be replaced by another system (e.g. %param%). The task at hand is to remove all objects with a known propertyName equal to "true" using regex. { "someT ...

Is it possible to modify the shadowCameraNear parameter for a SpotLight in THREE.js?

Is it possible to adjust the shadowCameraNear and shadowCameraFar parameters of a SpotLight? In the example, I attempted to modify the shadowCameraNear parameter within the animation loop. However, despite confirming the change through console.log(), the ...

tips for showcasing an item in a tooltip within a data table

I am working on dynamically creating a table with data retrieved from an ajax response. My goal is to display the data stored in an object within a tooltip attached to each cell. Currently, I have successfully rendered the table, but it is displaying `[obj ...