Error in three.js: LineLoop gap caused by CircleGeometry

There seems to be a gap in the circle I'm creating using LineLoop in Three.js. Below is the code snippet I am working with:

const discGeometry = new THREE.CircleGeometry(50, 64);
const lineMaterial = new THREE.LineBasicMaterial({
     transparent: true,
     opacity: 0.5,
     color: 0xffffff,
     linewidth: 1.5
});
const zenithEquator = new THREE.LineLoop(discGeometry, lineMaterial);
zenithEquator.rotation.z = THREE.Math.degToRad(90);
scene.add(zenithEquator);

Here is the output of the above code:

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

I also tried using Line instead of LineLoop for the same task:

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

The issue is the visible gap in the circle segment. This gap changes as I adjust the number of segments.

Can anyone help me figure out how to draw a complete circle without this undesirable gap?

javascriptthree.js

Answer №1

Utilize the EdgesGeometry to create edges and display them using LineSegments

const discGeometry = new THREE.EdgesGeometry(new THREE.CircleGeometry(50, 64));
const lineMaterial = new THREE.LineBasicMaterial({
     transparent: true,
     opacity: 0.5,
     color: 0xffffff,
     linewidth: 1.5
});
const zenithEquator = new THREE.LineSegments(discGeometry, lineMaterial);
zenithEquator.rotation.z = THREE.Math.degToRad(90);
scene.add(zenithEquator);

Answer №2

To remove the first vertex from an array of vertices, you can utilize the .shift() method:

const shapeGeometry = new THREE.CircleGeometry(75, 64);
shapeGeometry.vertices.shift(); // This operation removes the initial vertex from the array
const lineMaterial = new THREE.LineBasicMaterial({
     transparent: true,
     opacity: 0.7,
     color: 0xeeeeee,
     linewidth: 2
});
const circleOutline = new THREE.LineLoop(shapeGeometry, lineMaterial);
circleOutline.rotation.x = THREE.Math.degToRad(45);
scene.add(circleOutline);

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

Issues with displaying data in Angular ChartJS are troubling users

Currently utilizing Angular 6, my goal is to incorporate a Chart.js line chart. Essentially, I am fetching two arrays from my API: one named weight_data and the other named weight_date, which I then utilize for the chart. After receiving the arrays from t ...

javascriptangularchart.jsangular6

What could be causing the undefined form input?

As a newcomer to JavaScript, I may be asking a simple question. But I need your guidance to comprehend this situation. The issue at hand involves a form. const Form = () => { const[form, setForm] = useState({ username: '' ...

javascriptreactjsformseventssetstate

Making a Request.post call to a previously uploaded image file

Currently, I am utilizing Angularjs and nodejs in my project to handle file uploads securely. In order to send a post request to the URL endpoint while attaching an access token with the request, I have implemented a directive that allows users to choose a ...

javascriptnode.jsangularjsexpress

Steps for dynamically displaying the check mark symbol in JSP pages

Currently, I am utilizing the Unicode value "\u2713" to showcase a '✔' tick mark in a row of a table (in a static manner within .jsp). However, my requirement now is to exhibit the '✔' dynamically. This means that whenever I pr ...

javascriptajaxjspthickbox

Reset all modifications made by jQuery animations before initializing a fresh animation

Is there a way to reset the changes made to the first div before animating the second div using jQuery animation? $(".order-b").click(function(event){ $(".order-t").animate({top:'30%'}, "slow" ); }); $(".counsel-b").cl ...

javascriptjqueryhtmlcssanimation

JQuery struggling to attach blur event to every single <input> element on a webpage

I'm attempting to attach a blur event to all "input" elements on the page, including those nested inside iframes. While I've successfully attached blur events to input elements outside of iframes, I'm facing challenges with elements within ...

javascriptjqueryjquery-uiiframejquery-plugins

Equivalent of window.onkeypress in Typescript and NodeJS

Can someone help me figure out how to accomplish the following: document.addEventListener('keypress', (event) => { // Need this function to trigger whenever a key is pressed }); in a node.js environment using TypeScript or JavaScript? ...

javascriptnode.jstypescriptdom-events

Using ng-repeat in Angular JS to generate forms

Having just recently delved into angular JS, I began working on it a mere week ago. Utilizing the Angular-UI Bootstrap Tabs directive in my application, upon load, a grid displaying a list of records is presented within a static tab. Once a user selects a ...

javascriptjqueryangularjstwitter-bootstrap

How to show an array in AngularJS and also display any selected values?

Can someone assist me in displaying a list of data from an array on the loading page? Additionally, I need help with showing the selected value from a dropdown once it is chosen. <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

javascriptcssarraysangularjs

Exploring the Live Search Functionality on an HTML Webpage

I am attempting to create a live search on dive elements within an HTML document. var val; $(document).ready(function() { $('#search').keyup(function() { var value = document.getElementById('search').value; val = $.trim(val ...

javascriptjqueryhtml

How to use AJAX to retrieve the text content of an HTML option value?

I have a script that displays a list of values, which I want to write: <option th:each = "iName : ${iNames}" th:value = "${iName}" th:text = "${iName}" th:selected="${selectedIName == iName}" In addition, I have the function setSelectedName in my .j ...

javascriptjqueryhtmlajax

Is there a jQuery tool that can effortlessly add items to a list element?

I'm currently developing a task management application on the web. I have a textarea where users can input tasks, and when they press enter, it should automatically be added to a list element (li). The adding functionality works, but only after refres ...

javascriptjqueryhtmlcss

What is the best way to extract data from an XML file stored in a postgres database using jquery?

Hey there! I'm diving into the world of jQuery and XML for the first time. So far, I've managed to read an XML file using jQuery and display it on the front end. Now, my next challenge is figuring out how to store this XML data in a database. Can ...

javascriptjqueryhtmlxmlpostgresql

Issue with ng-true-value in AngularJS version 1.6.1 - not functioning as expected

Recently, I delved into AngularJS and followed an online tutorial that showcased how to utilize ng-true-value and ng-false-value. Here's the snippet: <!DOCTYPE html> <html lang="en"> <head> <script src="https://ajax.googleapis ...

javascripthtmlangularjscheckbox

What are the drawbacks of making API calls in getStaticProps?

After looking through the nextJs documentation, I came across a recommendation not to make API calls within the getStaticProps function. Can someone provide a clear example explaining why this is advised? The reason given in the docs is that server-side ...

javascriptreactjsnext.js

Creating a dropdown selection that allows for both multiple and single choices

I am working on a JavaScript function that dynamically changes the display of a DIV based on the selection made in another dropdown. The first dropdown contains options for one, multiple, or none. When 'single' is selected, I want it to change th ...

javascripthtmljquery

Sorting through various data inputs in one JSON file

I have a JSON file containing an array of objects: obj= [{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"ten",lanme:"kumar" },{fname:"abhi",age:5,class:"t ...

javascripthtmlreactjsuitableviewmaterial-ui

CSS animation is designed to work with a single element

For my school project, I've been experimenting with creating a functional phone using HTML. To achieve this, I incorporated a JavaScript class as shown below: document.querySelector(".app-content").classList.add("app-on"); The class .app-on alters th ...

javascripthtmlcsscss-animations

Making a request to an API using the useEffect hook resulted in an error when attempting to iterate through the list of users. The error message displayed was: TypeError: Cannot read property

import logo from './logo.svg'; import './App.css'; import { useEffect, useState } from 'react'; import User from './components/User/User'; function App() { const [user, setUser] = useState([]); useEffect(() => ...

javascriptcssreactjsajax

Code Wizard

I am currently working on a project to develop an HTML editor. How it Needs to Function Elements Inside: Text Area - Used for typing HTML as text Iframe - Displays the typed HTML as real [renders string HTML to UI] Various Buttons Functionality: When ...

javascriptjqueryhtmlregexeditor