title: Apply three.js subdivision modifier without changing outer geometry?
body: <p>I am trying to take any three.js geometry and subdivide its existing faces into smaller faces. This would essentially give the geometry a higher "resolution". There is a subdivision modifier tool in the examples of three.js that works great for what I'm trying to do, but it ends up changing and morphing the original shape of the geometry. I'd like to retain the original shape.</p>
  
  <p><strong><a href="https://threejs.org/examples/?q=subdi#webgl_modifier_subdivision" rel="noreferrer">View the Subdivision Modifier Example</a></strong></p>
  
  <hr>
  
  <p><em>Example of how the current subdivision modifier behaves:</em></p>
  
  <p><a href="https://i.stack.imgur.com/YACT9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/YACT9.png" alt="enter image description here"></a></p>
  
  <p><em>Rough example of how I'd like it to behave:</em></p>
  
  <p><a href="https://i.stack.imgur.com/fTdo7.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fTdo7.png" alt="enter image description here"></a></p>
  
  <hr>
  
  <p>The subdivision modifier is applied like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>let originalGeometry = new THREE.BoxGeometry(1, 1, 1);
  let subdivisionModifier = new THREE.SubdivisionModifier(3);
  let subdividedGeometry = originalGeometry.clone();
  subdivisionModifier.modify(subdividedGeometry);
  </code></pre>
  
  <p>I attempted to dig around the <a href="https://github.com/mrdoob/three.js/blob/dev/examples/js/modifiers/SubdivisionModifier.js" rel="noreferrer">source of the subdivision modifier</a>, but I wasn't sure how to modify it to get the desired result.</p>
  
  <p><strong>Note:</strong> The subdivision should be able to be applied to any geometry. My example of the desired result might make it seem that a three.js PlaneGeometry with increased segments would work, but I need this to be applied to a variety of geometries.</p>