Perfect merging issue

by Nicolas Buecher

HTML

<script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script src="https://rawgit.com/chandlerprall/ThreeCSG/master/ThreeCSG.js"></script>

CSS

html, body
{
    margin: 0;
    padding: 0;
}

canvas {
  display: block;
}

JavaScript

// Basic ThreeJS Scene

var container, renderer, scene, camera, controls, plane;

init();


////////// CUSTOM //////////

// Add lights
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.x = 1;
directionalLight.position.y = 1;
directionalLight.position.z = 1;
directionalLight.position.normalize();
scene.add(directionalLight);

// Initialize phong mateiral
var material = new THREE.MeshPhongMaterial({ color: 0x333333 });

// Initialize the geometry
var box1Geometry = new THREE.BoxGeometry(100, 100, 100);
var box2Geometry = new THREE.BoxGeometry(100, 50, 100);
var box3Geometry = box1Geometry.clone();
box1Geometry.translate(-100, 0, 0);
box2Geometry.translate(0, +25, 0);
box3Geometry.translate(+100, 0, 0);


// FIGURE 1 : Basic merged geometry
var figure1 = new THREE.Geometry();
figure1.merge(box1Geometry);
figure1.merge(box2Geometry);
figure1.merge(box3Geometry);
figure1.computeFaceNormals();
figure1.computeVertexNormals();

var mesh = new THREE.Mesh(figure1, material);
scene.add(mesh);
mesh.translateX(-400);
var wireframe = new THREE.WireframeHelper(mesh, 0x00ff00);
scene.add(wireframe);
var normal = new THREE.FaceNormalsHelper(mesh, 50);
scene.add(normal);

console.log("1/ NUMBER OF VERTICES : " + mesh.geometry.vertices.length);
console.log("1/ NUMBER OF FACES : " + mesh.geometry.faces.length);

// FIGURE 2 : Merged geometry with merged vertices
var figure2 = figure1.clone();
figure2.mergeVertices();
figure2.computeFaceNormals();
figure2.computeVertexNormals();

mesh = new THREE.Mesh(figure2, material);
scene.add(mesh);
var wireframe = new THREE.WireframeHelper(mesh, 0x00ff00);
scene.add(wireframe);
var normal = new THREE.FaceNormalsHelper(mesh, 50);
scene.add(normal);

console.log("2/ NUMBER OF VERTICES : " + mesh.geometry.vertices.length);
console.log("2/ NUMBER OF FACES : " + mesh.geometry.faces.length);

// FIGURE 3 : Expected merged geometry...