Three.js Pin Placement for Clothing

I am in need of assistance! I am currently working on a simulation involving a cloth that is attached to four corners. I am attempting to reposition the pins at coordinates 0, 10, 88, 98 within a 10x10 array. My goal is to place each pin at a different position in x, y, z dimensions. For this project, I am utilizing Three.js and Cloth.js libraries.

For reference, I am looking for a setup similar to the example provided in the following link: []

Below you will find my code along with the Cloth code that I am using:

var pinsFormation = [];
pinsFormation.push( pins );
pins = [ 0, 10, 88, 98 ];
var container, stats;
var camera, scene, renderer, clothGeometry, object;

init();
animate();

	// Code continues here...

Answer №1

To lock a specific point, you need to determine the vertex associated with that location and pin it using its index. This can be achieved through either a raycast when clicking on the mesh or by analytical methods.

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

Discovering the amount of time a section of a webpage remains in view on a browser

I am looking for a way to track user engagement on my website that contains pages with extensive scrolling and numerous images. Each user who logs in sees a unique selection of images. My goal is to monitor how long users linger on each part of the page t ...

Can pins be added or removed from a location plan (image or vector) using either Javascript or the DevExpress library?

At the factory where I am employed, there are close to 1000 cameras in operation. I have requested to have the locations of these cameras marked on a non-geographical map of the factory. By simply clicking on one of the camera icons, it should be possible ...

What is preventing the data property from updating in setInterval?

Looking for a way to increase the speed of the props while my marker is moving? Currently, the speed only updates when the pause button is clicked. How can I automatically update this.speed when clicking the speed button? I have defined the speed prop in ...

Embracing PWAs with subdomains – seamless installation

One of my Progressive Web Applications (PWA) called app A contains a link to another app, app B. Initially, I hosted both apps on the same subdomain (for example: ) and everything worked perfectly - installing app A also installed app B. However, when I a ...

React Component is not functioning with the timer running

I am currently developing a basic timer app using React. Here is the code snippet I have so far: import React from "react" const timer = (props) => { let time = 25; let processStatus = props.timerProcessStatus; // set to true if(processSta ...

Utilizing HTML5 for page-relative translation

Is there a way to apply a translate to an element so it moves to a specific point on the page instead of relative to its starting position? For instance, in the code snippet below, the "card" elements will move 50, 100 relative to their initial position. ...

Run JavaScript code when the HTML file has been modified for the second time

After browsing through this online forum, I stumbled upon a helpful solution. See the code snippet below for reference. However, I encountered a problem in my case. The script in question is essentially monitoring itself. The code resides in index.html an ...

An individual referred to as "User" is currently not defined, despite

I am currently working on a react application and I'm facing an issue where the App component does not seem to be receiving my user value even though it is present. Interestingly, the same syntax works perfectly fine in other components. The error me ...

Tips for retrieving a nested data value within an array

I am currently puzzled by the undefined error I encounter when attempting to access a value using dot notation. The following illustrates my point: My goal is to retrieve the value from within the nested object in the headline color array: ...

React: Unexpected error occurs with invalid element type

I encountered the following issue while attempting to utilize a component Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forg ...

What is causing the ng-show function to malfunction after building with phonegap?

My current javascript framework for my PhoneGap app is the Ionic Framework. I have a specific item on one of my pages that I want to make expandable and collapsible by clicking an anchor on the page. Here is what the code looks like: In the HTML file: & ...

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript Currently working with an array of functions like this private listeners: ((name: string) => void)[] = []; Successfully adding functions to the array within another function. Now looking to trigger those ...

Attempting to send arguments to a jQuery ajax request

After successfully implementing my original ajax call, I decided to create a reusable function for it. This way, I can easily modify the data and URL fields of the ajax call without having to retype everything each time. However, I encountered an issue whe ...

Placeholder variable not specified in radio buttons

I am currently facing challenges applying validations to radio buttons in Angular. Normally, I create a #templateRefVariable on the input for other input types, which allows me to access the NgControl and use properties like touched. My goal is to set the ...

I'm interested in knowing if it's feasible to develop unique jQuery selectors that can navigate ancestors, such as a :closest or :parents selector

As a developer who frequently creates jQuery plugins, I often find myself using custom jQuery selectors like :focusable and :closeto to simplify common filters in my code. For example, the :focusable selector is defined as follows: jQuery.extend(jQuery.e ...

"Use jQuery to toggle the slide effect for the first element of a

Below is the HTML code snippet: <div class="row header collapse"> Content 1 <i class="fas fa-chevron-circle-up" ></i> </div> <div class="instructions-container"> <div></di ...

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...

Is it possible to extract the value displayed on a Typography component in Material UI and store it in a state variable?

I'm currently facing an issue with mapping a data array onto material-ui Typography elements. Here's the code snippet: { array.map((item, id)=> <Typography key={id} value={item.name} />) } While this code successfully displays the val ...

Struggling to grasp the syntax, trying to invoke a JavaScript function using an input button

I'm really struggling to grasp the xhtml syntax involved in calling a function with an input button. Despite my efforts to find a clear explanation, this concept still eludes me. Within the snippet of code from my book that I've been referencing ...

The process of batch file conversion and how to effectively utilize it

I am facing an issue with a small batch script that I have been working on. The purpose of this batch script is to execute a Javascript file that converts an XML file to a csv file, followed by running a Python script to analyze the created csv file and ge ...