Find the vertices located on the "upper surfaces" of the ring using Three.js

I'm currently immersed in a project centered around creating different types of "rings" using Three.js. Each ring is formed through an algorithm I designed myself, which involves defining 4 sections placed at π, π/2, 3π/2, and 2π, then utilizing quadratic bezier curves to interpolate a ring from those sections. So far, this approach has been quite successful. My next goal is to programmatically identify which vertices lie on the "upper surface" of the ring.

How can I accomplish this task?

The 4 shapes displayed on the left represent my 4 sections. The ring on the right is created based on these 4 sections.

javascript3dthree.jsgeometry

Answer №1

There are numerous approaches to tackle this issue, and in order to devise the most effective method, we need more information about your specific situation... However, one potential solution could be:

  • Utilize vertex index if each section contains an equal number of vertices (for example, place every vertex where % == 2 or 3 on the perimeter)
  • Determine the distance from each vertex to the center of the ring and compare it against a predetermined threshold (considering vertices further away as visible)
  • Analyze whether the vertex normal aligns somewhat with the radius or calculated distance.

The decision is yours... If you require further assistance, providing detailed information about your scenario would greatly aid in finding a suitable solution.

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

Issue with Vue.js: Child component emitting event but parent component method not triggering

When a child component makes an input change, it emits an event with some data: Vue.component('gum-option', { inheritAttrs: false, props: ['label'], template: ` <label class="gum-option"> ...

javascriptvue.jseventscomponentsemit

Error encountered in Internet Explorer 11 - Access is forbidden - XMLHttpRequest

I am encountering a unique issue with IE11 and ajax. Most of the time, everything works as expected when I use the code below for my requests. However, I have noticed that when I try to use it in combination with a copy and paste function, an 'Access ...

javascriptajaxinternet-explorerxmlhttprequestinternet-explorer-11

Unpredictable Redirection when URL is Clicked using PHP or Javascript

Looking to send users to a random URL from a specific list? For instance: With 3 URLs available - Google.com, Facebook.com, and Yahoo.com <a href="<?php $sites[array_rand($sites)] ?>">Click here</a> Upon clicking the link, users will ...

javascriptphpjqueryhtmlajax

Is there a way to incorporate Vue script in Laravel without utilizing Vue templates?

I have a question that may seem simple, but I'm curious about the best way to use vue script on pages individually without declaring it globally. For example, I have multiple pages in Laravel Blade such as the home page, category page, and product pag ...

javascriptlaravelvue.jsvuejs2

Optimizing Shader Caching in WebGL: Best Practices

I am currently in the process of developing a WebGL application, and I have encountered some challenges with shader storage... In most examples, shaders are directly written in plaintext within the xHTML file itself. However, this approach can lead to clu ...

javascriptjsonwebgl

Is there a glitch in jQuery that causes other items in the UI to disappear when deleting a single item from local storage, even though they

After clicking delete on a record, it is successfully deleted from Localstorage. However, upon page reload, none of the "drop downs" show the other records in Localstorage even though they still exist. How can I address this issue? Seeking guidance on res ...

javascriptjqueryjquery-ui

What is the process for comparing two objects in TypeScript?

There is a unique class named tax. export class tax { private _id: string; private _name: string; private _percentage: number; constructor(id: string = "", taxName: string = "", percentage: number = 0) { thi ...

javascripttypescript

Issue encountered while using AJAX to load images

Currently, I am utilizing a jQuery plugin to fetch images from Flickr. My aim is to organize these images into 3 columns dynamically as they are loaded, ensuring that each image is placed in the shortest column to achieve close to equal lengths for all col ...

javascriptimagejquery

Get the name of the array using JavaScript

Here is an example of my situation: var list1 = ['apple', 'banana', 'orange']; var list2 = ['carrot', 'lettuce', 'tomato']; When I use: alert(list1) I get: apple, banana, orange. This is corre ...

javascriptarraysalert

Navigating through the complexities of scoping in JavaScript when integrating Node.js

Currently, I am working on an express.js application without using mongoose. My goal is to create a function that can handle calls to MongoDB, pass parameters to it, and retrieve data from the database. However, I have encountered a problem with the foll ...

javascriptnode.jsmongodbexpress

Is there a way to optimize Typescript compiler to avoid checking full classes and improve performance?

After experiencing slow Typescript compilation times, I decided to utilize generateTrace from https://github.com/microsoft/TypeScript/pull/40063 The trace revealed that a significant amount of time was spent comparing intricate classes with their subclass ...

javascriptnode.jstypescripttsconfigtypescript-compiler-api

Can I send a DELETE request with request body and headers using Axios?

When working with Axios in ReactJS, I am attempting to send a DELETE request to my server. In order to do this, I need to include the following headers: headers: { 'Authorization': ... } The body of the request consists of: var payload = { ...

javascriptreactjshttpaxioshttp-delete

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...

javascripthtmlcssreactjsmaterial-ui

Concentrate on a specific component within an overlay using jQuery

How can I focus on a specific area within an overlay when adding an item to the cart? I want to make the rest of the overlay darker and the targeted area more visible. See a quick mockup here: https://i.sstatic.net/UpJuc.png Here's the HTML code: & ...

javascriptjqueryhtmlcss

Manipulate all vertex positions in a circular motion centered around a specific pivot point or axis using Three.js and GLSL

I'm exploring ways to manipulate the coordinates of objects in a Three.js environment around a specific central point or axis. Imagine placing a tube within the scene and seeing everything else in the scene curve around that axis while maintaining a c ...

three.jsopengl-esglslwebgl

What exactly does the question mark represent in the code structure as indicated in VSCode?

When looking at the image, you can see that in the description of done(), VSCode indicates the type of parameters using a colon error: any or sometimes with a question mark and colon user?: any. So, what exactly is the distinction between these two ways o ...

javascriptnode.jstypescriptvisual-studio-code

Can an in-progress NPM package be tested using NPX?

I am currently developing an NPM package that is designed to be used exclusively through npx *, similar to packages like create-nuxt-app. Is there a method to test my package using npx *? Essentially, I want to run my bin script without actually installin ...

javascriptnode.jsnpmnpx

"Swapping out a parent view with a child route component in Vue: Step-by-step

I have created Vue routes with a parent route for 'dashboard' and a child route for 'report', set up like this: { path: '/dashboard', component: dashboard, children: [ { path:'report', com ...

javascriptvue.jsvue-componentvue-router

Tips for successfully passing ExpressJS locals variable to an EJS template and utilizing it as a parameter when invoking a JavaScript function during the onload HTML event

const hostname = "192.168.8.154"; const port = 3002; app.use('*', function (req, res, next) { db.collection('sys_params').find().toArray() .then(sysParams => { //console.log(sysParams); app.locals.sysParams ...

javascripthtmlnode.jsexpressejs

Is p-queue designed to utilize multiple threads?

Have you heard of a nodejs module that allows you to limit the number of concurrent promises? Check out this link I'm curious, does this module utilize multiple threads? Here's an example taken from the official page: const {default: PQueue} ...

javascriptnode.jsmultithreadingpromise