<p dir="auto">When loading an obj file such as the following:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="v  0 1 1
v  1 1 0
v  1 0 1
v  1 1 1
f  1 2 3
f  1 2 4"><pre class="notranslate"><code class="notranslate">v  0 1 1
v  1 1 0
v  1 0 1
v  1 1 1
f  1 2 3
f  1 2 4
</code></pre></div>
<p dir="auto">The resulting <code class="notranslate">THREE.Geometry</code> contains 10 vertices, rather than the expected 4. This is because a new set of vertices are created for every face, rather than the same vertex reused.</p>
<p dir="auto">r62</p>
<p dir="auto">If you load a model using OBJLoader -- a Stanford Bunny for example -- and apply a matrix translation like so:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, -0.01, 0 ) );"><pre class="notranslate"><code class="notranslate">geometry.applyMatrix( new THREE.Matrix4().makeTranslation( 0, -0.01, 0 ) );
</code></pre></div>
<p dir="auto">this is what you get:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/52098191778007d8a2396d12510a5c0be77fac29507fe9d3dde7a83a4a740e95/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313030303031372f313138363435312f36393438633030612d323266652d313165332d393538362d3930316163386437373533612e706e67"><img src="https://camo.githubusercontent.com/52098191778007d8a2396d12510a5c0be77fac29507fe9d3dde7a83a4a740e95/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f313030303031372f313138363435312f36393438633030612d323266652d313165332d393538362d3930316163386437373533612e706e67" alt="screen shot 2013-09-21 at 4 37 25 pm" data-canonical-src="https://f.cloud.github.com/assets/1000017/1186451/6948c00a-22fe-11e3-9586-901ac8d7753a.png" style="max-width: 100%;"></a></p>
<p dir="auto">Poor bunny.</p>
<p dir="auto">There are two issues here:</p>
<p dir="auto"><strong>Issue 1.</strong> In this example, 2503 vertices in the data file result in 14904 vertices in the mesh.</p>
<p dir="auto">This is because vertices are replicated -- each face is assigned three unique vertices:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="geometry.vertices.push(
    vertices[ parseInt( result[ 1 ] ) - 1 ],
    vertices[ parseInt( result[ 2 ] ) - 1 ],
    vertices[ parseInt( result[ 3 ] ) - 1 ]
);

geometry.faces.push( face3(
    verticesCount ++,
    verticesCount ++,
    verticesCount ++
) );"><pre class="notranslate"><code class="notranslate">geometry.vertices.push(
    vertices[ parseInt( result[ 1 ] ) - 1 ],
    vertices[ parseInt( result[ 2 ] ) - 1 ],
    vertices[ parseInt( result[ 3 ] ) - 1 ]
);

geometry.faces.push( face3(
    verticesCount ++,
    verticesCount ++,
    verticesCount ++
) );
</code></pre></div>
<p dir="auto">So the question is: Should we really be doing this?</p>
<p dir="auto"><strong>Issue 2.</strong> The vertices are not unique <code class="notranslate">Vector3</code>s -- multiple vertices reference the same <code class="notranslate">Vector3</code>. This is why there is distortion when a matrix is applied to "each vertex".</p>
<p dir="auto">It is important that <code class="notranslate">geometry.vertices</code> be an array of unique objects.</p>
<p dir="auto">(This is not to be confused with "duplicated" vertices, in which two or more vertices have the same location. Duplicated vertices are OK.)</p>