3D object resulted from binary operation can't rotate around its own center of geometry & results in breaking the mesh? ThreeJS (r106)

My objective is to create a geometry by performing binary operations on 3d objects using three.js and threeBSP.js and bring it to origin (0,0,0) to rotate it around y-axis.

In doing so, the resulted mesh from boolean opearation comes out fine but the pivot point of the object appears to be outside the geometry and it can be seen while rotating the object around Y axis.

I tried to center the geometry pivot point by using this line of code


This brings the object’s pivot point to the center but messes up the geometry. Tried all the methods on geometry that are described at the three.js docs but nothing seems to correct the mesh.

Can anybody tell me why the mesh is broken by centering it. The code follows.

var scene = new THREE.Scene();

var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x999999, 1.0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

var sphere1 = createMesh(new THREE.SphereGeometry(5, 20, 30));
sphere1.position.x = -2;

var sphere2 = createMesh(new THREE.SphereGeometry(5, 20, 30));
sphere2.position.set(3, 0, 0);

// adding 2 spheres to the scene to find the binary intersection of

camera.position.x = 0;
camera.position.y = 20;
camera.position.z = 20;
camera.lookAt(new THREE.Vector3(0, 0, 0));


var sphere1BSP = new ThreeBSP(sphere1);
var sphere2BSP = new ThreeBSP(sphere2);

var resultBSP;
var result = resultBSP.toMesh();


var axes = new THREE.AxisHelper(80);
renderer.render(scene, camera);

function createMesh(geom) {

    // assign two materials
    var meshMaterial = new THREE.MeshNormalMaterial();
    meshMaterial.side = THREE.DoubleSide;
    var wireFrameMat = new THREE.MeshBasicMaterial({opacity: 0, wireframeLinewidth: 0, flatShading: false});

    // create a multimaterial
    var mesh = new THREE.Mesh(geom, wireFrameMat);

    return mesh;

Any suggestion will be greatly appreciated.

threeBSP.coffee can be found here

Result image

Can you please demonstrate this issue with a live example? It might be easier to provide feedback if you make it possible to debug the broken geometry object.

I have uploaded the code in the fiddle: here

The threeBSP.coffee script is not found hosted in any cdn so the fiddle is not running. Other than that all the code is in the fiddle.

I’m new here and this is my first question. I do not know why my question was hidden flagging it spam. I only added the link of the script that was necessary for the people to know as the code depends entirely on the linked script.

Please look at the fiddle or download the script and code to see the actual problem. The mesh is deformed by trying to center the object.

The spam detection tools are sometimes too restrictive. Don’t worry about that.

Okay…It seems it’s visible now…

@Mugen87: Are you able to recreate the problem with the fiddle and linked scripts or locally? It might seem like this problem has been shared on stack-exchange and there seems to have answers for that. I’ve tried to implement them as well but none seem to work correctly with the binary-op resulted mesh generated in this code. After the geometry.center(); line execution the geometry gets deformed at the mesh intersections.

If you are not able to share a running live example, please prepare a github repository that I can just download. TBH, I’m not going to assemble your demo by myself.