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
object.geometry.center();
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
scene.add(sphere1);
scene.add(sphere2);
camera.position.x = 0;
camera.position.y = 20;
camera.position.z = 20;
camera.lookAt(new THREE.Vector3(0, 0, 0));
document.getElementById("WebGL-output").appendChild(renderer.domElement);
var sphere1BSP = new ThreeBSP(sphere1);
var sphere2BSP = new ThreeBSP(sphere2);
var resultBSP;
resultBSP=sphere1BSP.intersect(sphere2BSP);
var result = resultBSP.toMesh();
result.geometry.computeFaceNormals();
result.geometry.computeVertexNormals();
result.geometry.center();
result.position.set(0,0,0);
scene.add(result);
var axes = new THREE.AxisHelper(80);
scene.add(axes);
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…
