Creating an arc within a polyline in THREE.JS

My data consists of the following points:

    "POLYLINE":[[
        {"x":"-6094.1665707632401","y":"3074.764386330728","r":""},
        {"x":"-699.22595358468595","y":"1099.941236568309","r":""},                
        {"x":"-4940.397089330264","y":"576.87996358328382","r":""},
        {"x":"-1329.5259580814709","y":"3149.4874087018579","r":"0.5163456475719181"},
        {"x":"-6094.1665707632401","y":"3074.764386330728","r":""}
    ]]

In this data, x and y represent the vertices of a polyline, while r indicates the radius if it's an arc. I am able to draw the arc if necessary, but I would need to skip over it in the script.

function DRAWpline(vert){
            vert = JSON.parse(vert);
            var material = new THREE.LineBasicMaterial({
                color: 0x0000ff
            });
            var geometry = new THREE.Geometry();

            for (var i = 0; i < vert.length; i++) {     
                if(vert[i]['r'] != ""){
                    geometry.vertices.push(new THREE.Vector3(vert[i]['x'], vert[i]['y'], 0));
                } else {

                }
            }

            var line = new THREE.Line(geometry, material);



            scene.add(line);
        }
javascriptthree.js

Answer №1

If you need a solution, consider the following code snippet:

let pointZero = new THREE.Vector3(vert[i]['x'], 0, 0);
let pointOne = new THREE.Vector3(vert[i]['x'], vert[i]['y'], 0);
let pointTwo = new THREE.Vector3(vert[i+1]['x'], vert[i+1]['y'], 0);
let startAngle = Math.acos(pointZero.dot(pointOne)/(pointZero.length()*pointOne.length()));
let angle = Math.acos(pointOne.dot(pointTwo)/(pointOne.length()*pointTwo.length()));
geometry = new THREE.CircleGeometry(radius, nbSegments, startAngle, angle);
// Remove the center vertex
geometry.vertices.splice(0,1);

Make sure to include a check for 'vert[i+1]' before determining 'pointTwo'.

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

The Sprite.render Depth attribute is not compatible with three.js

Here is the code snippet: var sprite = new THREE.Sprite(material); sprite.renderDepth = 10; The renderDepth setting specified above is not valid for sprites. Do you know how to address this issue? ...

three.jssprite

The useNavigate() hook from react-router-dom is not properly setting the id in the URL path

I am currently using react-router-dom v6 for my routing needs. My goal is to pass an ID in the navigate URL path. Here is the onClick method and button code that I am working with: let navigate = useNavigate(); const routeChange = (id) => { let ...

javascriptreactjsnavigationreact-router-dom

Interact with AngularJS and ASP.NET MVC by invoking controller actions

Previously, I used the following code to retrieve a JSON result from a function before integrating AngularJS: $.ajax({ url: '@Url.Action("getGamedata", "Home")', type: 'GET', dataType: 'json', ...

javascriptangularjsjsonajaxasp.net-mvc

Adding dynamic values to nested form groups in Angular Form Array

After following a tutorial on creating a reactive form in an Angular application, I managed to implement it successfully. However, I encountered an issue when trying to add an additional control called "setNumber" to the form array. I want this control to ...

javascriptangulartypescriptformsangular-reactive-forms

I want the name of the hospital to be displayed in the dropdown menu with a shortened version of the hospital's name appearing

Check out my code snippet: here import Autocomplete from "@mui/material/Autocomplete"; import TextField from "@mui/material/TextField"; import React, { useState } from "react"; const hospitalList = { docs: [ { _id: ...

javascriptreactjsmaterial-ui

Obtaining a file using capybara independently of rails

Case Study: Attempting to access an external URL using Capybara for downloading a file. It is necessary to use Selenium or Webkit as the driver, since Rack-test does not allow visiting external URLs. This website utilizes iframes. The prompt for file dow ...

javascriptrubyseleniumcapybara

The masonry div is currently set to a height of 0, however it needs to dynamically adjust based

My content div's height is currently set to 0, but I want it to adjust dynamically based on its children - all of which have a position absolute. I am experimenting with masonry to showcase search results, resulting in the content div looking differe ...

javascriptjquerysearchgridmasonry

The authentication0 router fails to initiate navigation

I'm currently using Auth0 in combination with Angular 2. The issue I am encountering is that my login code isn't redirecting to the home page after authentication. Based on my understanding, Auth0 does not handle the redirection process itself. ...

javascriptangularauth0

Retrieving values from nested arrays in Vue.js

I'm currently delving into Vue3. My goal is to extract the values from an array within an array in order to create a neat table. Once extracted, I plan to separate these values with commas. For more information, you can visit this link: https://stack ...

javascriptarraysjsonvue.js

Continuously iterate through a PHP page until the session variable reaches a specific value

I am in the process of creating a web-based exam. All questions and answers are stored in a MySQL database. I began by retrieving and displaying one question along with multiple-choice answers. I used a session variable $_SESSION['questionno'] = ...

phpjavascript

Exploring the Dev Tools Console feature in Excel for Windows

I have developed an Excel add-in using AngularJS. I utilize <div ng-show="isLoggedIn">...</div> and <div ng-show="!isLoggedIn">...</div> to manage different content based on the value of $scope.isLoggedIn. While it functions well i ...

javascriptangularjsms-officeoffice-js

'Unlawful invocation' problem occurs while attempting to upload a file using ajax

Having trouble with uploading a file using ajax as I keep running into an 'Illegal invocation' error when trying to pass the file. All other input fields are successfully passed (if I exclude the file). Here is a simplified version of my code: ...

javascriptjqueryajax

The measurement of line width in Three.js

I'm working with three.js and am struggling to draw lines that are thicker than 1px. Despite trying to adjust the lineWidth property in the LineBasicMaterial, I can't seem to make any changes. Since this issue seems to be related to Windows Chrom ...

three.jslinethickness

Transferring identification data between views within an application (AngularJS, NodeJs, HTML)

I'm working on an HTML page that lists users from MongoDB. The page allows for deleting and updating users. I am encountering an issue with the update button - I want a new HTML page to appear with a form when the button is clicked, capturing the user ...

javascripthtmlangularjs

The PHP file is outputting the JavaScript code but it is not executing

My goal is to develop an Edit Modal. With the necessary html code in place, I proceeded to write the following javascript/jquery script: <script type='text/javascript'> $(function() { <?php $q = $db->query("select * f ...

javascriptphpjquery

Exploring the capabilities of JW Player 6 for seeking and pausing video

Is there a way to make JW Player 6 seek to a specific point and pause without pausing after each seek request, maintaining the ability to seek continuously during playback? The current solution provided pauses the player after every seek request, which is ...

javascripthtmlflashvideojwplayer

What is the best way to display a resolved promise object in string format on a button, as an example?

I've searched through many similar questions, but none of them seem to address my specific issue in a simple way. Currently, the behavior of my promise is shown in the image below: https://i.sstatic.net/9GETz.png When looking at lines 62 and 63 in ...

javascriptreactjspromisecallbackcomponents

Contrasting WebSQL and SQLite in terms of their utility in mobile applications and web browsers

Could you confirm if WebSQL and SQLite are the same? Are both WebSQL and SQLite available in PhoneGap? Will the JavaScript code used for WebSQL in a web browser be the same for a mobile app, or will we need different code? What advantages does WebSQL ha ...

javascriptangularjshtmlsqliteweb-sql

unable to render a vector layer in openlayers 6

Currently, I am facing an issue with displaying a vector layer on an openlayers map using the source of local geojson and gpx files in my Vuejs project. Unfortunately, even when testing outside of Vue.js, the vector layer is not being displayed. Here is t ...

javascriptvue.jsopenlayers-6

Avoid the rendering of child elements in React

How can I skip rendering children in React? I want to enclose existing DOM nodes on a page within a React component. I need to render the frame only, excluding the static content which already exists as pre-existing DOM nodes. Is there a way to achieve t ...

javascriptreactjsdom