<p dir="auto">I'd like to be able to have multiple instances of a model in a scene, each using different materials.</p>
<p dir="auto">If I have a mesh with only one material, I can just create multiple THREE.Mesh objects that all use the same mesh geometry and then apply different materials to each THREE.Mesh. No problem.</p>
<p dir="auto">However, if I have geometry that has multiple materials, I need to use the MeshFaceMaterial for the THREE.Mesh and assign an array of materials to the geometry object.  So, my question is, is there any way to have multiple instances of that geometry that also have different materials without duplicating the geometry data?</p>
<p dir="auto">If this functionality doesn't exist, I'd be interested in adding it to Three.JS.</p>
<p dir="auto">Up until now, I've actually been splitting this type of geometry into pieces (one for each material) and then creating a separate THREE.Mesh for each but I'm not sure this is the best way (and it seems like it might cause a fair bit more overhead since there are potentially many more transformations being processed for a single model).</p>
<p dir="auto">The aClockwise option in arc / absarc / absellipse on THREE.Path has some strange behavior.</p>
<p dir="auto">Here's a test that plots the curve on a canvas context:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function test(ctx) {
  var path = new THREE.Path();

  path.absarc( 100,    // x
               100,    // y
               50,     // radius
               2,      // start
               6,      // end
               false);  // anti-clockwise

  var pts = path.getSpacedPoints();

  pts.forEach(function(p) {
    ctx.lineTo(p.x, p.y);
  });

  ctx.stroke();
}"><pre class="notranslate"><code class="notranslate">function test(ctx) {
  var path = new THREE.Path();

  path.absarc( 100,    // x
               100,    // y
               50,     // radius
               2,      // start
               6,      // end
               false);  // anti-clockwise

  var pts = path.getSpacedPoints();

  pts.forEach(function(p) {
    ctx.lineTo(p.x, p.y);
  });

  ctx.stroke();
}
</code></pre></div>
<p dir="auto">This produces: <a href="https://cloudup.com/cqjdrH4C1T8" rel="nofollow">https://cloudup.com/cqjdrH4C1T8</a></p>
<p dir="auto">Changing anti-clockwise to true produces the exact same ellipse instead of following the other path of the circle to the same destination.</p>
<p dir="auto">It also has some strange effects when you introduce other actions into the path.</p>
<p dir="auto">If I add a lineTo after absarc:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="function test(ctx) {
  var path = new THREE.Path();

  path.absarc( 100,    // x
               100,    // y
               50,     // radius
               2,      // start
               6,      // end
               false);  // anti-clockwise

  path.lineTo(100, 50);

  var pts = path.getSpacedPoints();

  pts.forEach(function(p) {
    ctx.lineTo(p.x, p.y);
  });

  ctx.stroke();
}"><pre class="notranslate"><code class="notranslate">function test(ctx) {
  var path = new THREE.Path();

  path.absarc( 100,    // x
               100,    // y
               50,     // radius
               2,      // start
               6,      // end
               false);  // anti-clockwise

  path.lineTo(100, 50);

  var pts = path.getSpacedPoints();

  pts.forEach(function(p) {
    ctx.lineTo(p.x, p.y);
  });

  ctx.stroke();
}
</code></pre></div>
<p dir="auto">I get <a href="https://cloudup.com/c8yYMvgAx3T" rel="nofollow">https://cloudup.com/c8yYMvgAx3T</a></p>
<p dir="auto">and if I change anti-clockwise to true: <a href="https://cloudup.com/cinzkh2Oj75" rel="nofollow">https://cloudup.com/cinzkh2Oj75</a></p>