Three.js Cloth Animation Example

example.html

<link href="/assets/threejs-cloth/styles/styles.css" rel="stylesheet">

<div class='container'>
    <div class='row'>
    </div>
      <h1> A quick demonstration - <small>writeup soon!</small></h1>
    <div class='row'>
      <h1 class='col-md-6'> Choose a pattern:</h1>
    </div>
    <div class='row controls'>
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img class="active" src="/assets/threejs-cloth/images/pattern-1.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-2.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-3.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-4.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-5.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-6.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-7.png" />
              </a>
            </div>
          </div> 
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-8.png" />
              </a>
            </div>
          </div>
          <div class='col-md-1'>
            <div class='thumbnail'>
              <a href="#">
                <img src="/assets/threejs-cloth/images/pattern-9.png" />
              </a>
            </div>
          </div> 
    </div>
</div>
<div class='container'>
  <div class='row'>
    <div id='canvas-wrapper' class='col-md-7'>
    </div>
    <div class="col-md-3">
    <h1> Rotation:</h1>
      <div class='btn-group' role="group">
        <button class='btn btn-default btn-lg rotate' data-direction="left" data-container="body" data-toggle="popover" data-placement="bottom" data-content="">
          <span class="fa fa-reply"></span>
         </button>
        <button class='btn btn-default btn-lg rotate'>
          <span class="fa fa-pause"></span>
        </button>
        <button class='active btn-default btn btn-lg rotate' data-direction="right">
          <span class="fa fa-share"></span>
        </button>
      </div>
    </div>
  </div>
</div>