OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Constraining Cloth in Three.JS

  • Thread starter Thread starter Jack Lynch
  • Start date Start date
J

Jack Lynch

Guest
(This is probably a noob question.) So I'm trying to "fit" a cloth material to a character model in Three.JS. What is the best way to do this? Do you model a complete, closed garment and import it as cloth geometry, then place it on the model and just apply some sort of physics library? Do you define a set of constraints where the cloth is "pinned" to the model, and let the rest loose?

To get some direction I examined the code behind Three's cloth example. However, the only part I could see that related to constraining the cloth mesh involved "pin" variables that, as far as I could tell, weren't implemented anywhere outside of their assignment functions:


Code:
/* testing cloth simulation */

var pinsFormation = [];
var pins = [6];

pinsFormation.push(pins);

pins = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
pinsFormation.push(pins);

pins = [0];
pinsFormation.push(pins);

pins = []; // cut the rope ;)
pinsFormation.push(pins);

pins = [0, cloth.w]; // classic 2 pins
pinsFormation.push(pins);

pins = pinsFormation[1];


function togglePins() {

  pins = pinsFormation[~~(Math.random() * pinsFormation.length)];

}

Does anyone have experience with this sort of thing?

I'm aware of this question, which was answered only rudimentarily ("collision detection") and referred to the example code I couldn't figure out.

I'm new to this, so sorry if this has an obvious answer. Thanks!

<p>(This is probably a noob question.) So I'm trying to "fit" a cloth material to a character model in Three.JS. What is the best way to do this? Do you model a complete, closed garment and import it as cloth geometry, then place it on the model and just apply some sort of physics library? Do you define a set of constraints where the cloth is "pinned" to the model, and let the rest loose?</p>

<p>To get some direction I examined the code behind <a href="http://threejs.org/examples/#webgl_animation_cloth" rel="nofollow noreferrer">Three's cloth example</a>. However, the only part I could see that related to constraining the cloth mesh involved "pin" variables that, as far as I could tell, weren't implemented anywhere outside of their assignment functions:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/* testing cloth simulation */

var pinsFormation = [];
var pins = [6];

pinsFormation.push(pins);

pins = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
pinsFormation.push(pins);

pins = [0];
pinsFormation.push(pins);

pins = []; // cut the rope ;)
pinsFormation.push(pins);

pins = [0, cloth.w]; // classic 2 pins
pinsFormation.push(pins);

pins = pinsFormation[1];


function togglePins() {

pins = pinsFormation[~~(Math.random() * pinsFormation.length)];

}</code></pre>
</div>
</div>
</p>

<p>Does anyone have experience with this sort of thing? </p>

<p>I'm aware of <a href="https://stackoverflow.com/questions/31667615/three-js-clothing-and-shape-keys">this question</a>, which was answered only rudimentarily ("collision detection") and referred to the example code I couldn't figure out.</p>

<p>I'm new to this, so sorry if this has an obvious answer. Thanks!</p>
 

Latest posts

Top