CSG operation with STLLoader

Question

I am trying to perform a boolean operation on an imported STL mesh file using the ThreeCSG.js. Here is the code..

function openFile() {
filePath = document.form.selectedFile.value;
var loader = new THREE.STLLoader();
loader.addEventListener('load', function(event) {
//A simple cube geometry imported from STL file.

var geometry = event.content;
var cube_mesh = new THREE.Mesh(geometry);
cube_mesh.position.x = -7;
var cube_bsp = new ThreeBSP(cube_mesh);
//Create a sphere
var sphere_geometry = new THREE.SphereGeometry(1.8, 32, 32);
var sphere_mesh = new THREE.Mesh(sphere_geometry);
sphere_mesh.position.x = -7;
var sphere_bsp = new ThreeBSP(sphere_mesh);
//subtract cube from sphere
var subtract_bsp = cube_bsp.subtract(sphere_bsp);
var result = subtract_bsp.toMesh(new THREE.MeshLambertMaterial({shading:  THREE.SmoothShading, map: THREE.ImageUtils.loadTexture('texture.png')}));
result.geometry.computeVertexNormals();
scene.add(result);

});
loader.load(filePath);
}

But it doesn't seem to work. I am using three.js R62 and importing a STL file using the STLLoader.js.

I have just started learning Three.js and not entirely sure if the imported mesh files are supported by ThreeCSG.js. However, in thoery the CSG operations should work on the imported mesh files as they work on the mesh geometries created within the program.

Any suggestions please?

Answer 1

OK figured out the answer myself. For anyone who is a beginner with three.js, it is important to understand the concept of UVs texture mapping. See here http://wiki.blender.org/index.php/Doc:2.6/Manual/Textures/Mapping/UV. Now, there is no UV co-ords. available in the STL files so many of the three.js functions don't work as desired. One way, I found to overcome this issue was to import the STL files in blender and perform a UV mapping and then export the geometry files as a JSON object (You will also need to install a three.js exporter with blender). You can then perform Boolean operations on the JSON geometries with three.js