I am using both three.js and CSG.js together to make a new shape.
var materialText = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(rel_path_name+"images/wood.jpg")
});
var material = new THREE.MeshLambertMaterial({
color: 0xFFFFFF
});
var cylinder = new THREE.Mesh(new THREE.CylinderGeometry(120, 100, 300, 40, 50, false), material);
cylinder.position.y = 100;
var bodyMainCSG = new THREE.CSG.toCSG(cylinder);
var cutOutShapeMaterial = new THREE.MeshLambertMaterial({
color: 0x000000
});
var bodyMainFront = new THREE.Mesh(new THREE.CylinderGeometry(200, 190, 300, 40, 50, false), material);
bodyMainFront.position.z = -126;
bodyMainFront.position.y = 100;
var bodyMainFrontCSG = new THREE.CSG.toCSG(bodyMainFront);
var cutOutShapeFront = new THREE.Mesh(new THREE.CubeGeometry(300,300,200), cutOutShapeMaterial);
cutOutShapeFront.position.z = 140;
cutOutShapeFront.position.y = 100;
var cutOutShapeFrontCSG = new THREE.CSG.toCSG(cutOutShapeFront);
var cutOutShapeBack = new THREE.Mesh(new THREE.CubeGeometry(300,300,200), cutOutShapeMaterial);
cutOutShapeBack.position.z = -140;
cutOutShapeBack.position.y = 100;
var cutOutShapeBackCSG = new THREE.CSG.toCSG(cutOutShapeBack);
var spareCube = new THREE.Mesh(new THREE.CubeGeometry(400,300,400), cutOutShapeMaterial);
spareCube.position.z = -160;
spareCube.position.y = 100;
var spareCubeCSG = new THREE.CSG.toCSG(spareCube);
var bodyMainBack = new THREE.Mesh(new THREE.CylinderGeometry(220, 210, 300, 40, 50, false), material);
bodyMainBack.position.z = 148;
bodyMainBack.position.y = 100;
var bodyMainBackCSG = new THREE.CSG.toCSG(bodyMainBack);
var spareCube2 = new THREE.Mesh(new THREE.CubeGeometry(440,300,440), cutOutShapeMaterial);
spareCube2.position.z = 180;
spareCube2.position.y = 100;
var spareCube2CSG = new THREE.CSG.toCSG(spareCube2);
//Front creation Shape - Mixture of body main shape/Cube cut out shape
var extraCircle = bodyMainFrontCSG.subtract(spareCubeCSG);
//Front creation Shape - Mixture of body main shape/Cube cut out shape
var extraCircle = bodyMainFrontCSG.subtract(spareCubeCSG);
var extraCircleBack = bodyMainBackCSG.subtract(spareCube2CSG);
var frontCreationShape = bodyMainCSG.subtract(cutOutShapeFrontCSG);
var backCreationShape = frontCreationShape.subtract(cutOutShapeBackCSG);
var geometry = extraCircle.union(backCreationShape);
var geometry = geometry.union(extraCircleBack);
//var bulkRemoval = bodyMainCSG.subtract(cubeBulkCG);
//var geometry = bulkRemoval.subtract(frontCreationShape);
var mesh = new THREE.Mesh(THREE.CSG.fromCSG( geometry ), materialText);
Not the best code – The most important lines are
var materialText = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(rel_path_name+"images/wood.jpg")
});
var mesh = new THREE.Mesh(THREE.CSG.fromCSG( geometry ), materialText);
Im trying to add a texture to a cut shapes that has been converted to CSG, then back to THREE. Every time i do it i get a random error from three.js. I tired changing MeshBasicMaterial to “MeshPhongMaterial” and “MeshLambertMaterial”, still the same error.
So my question is , am i doing something wrong or is it not possible?
This is actually quite easy by slightly changing CSG.js and THREE.CSG.js. UVs need to be introduced to the CSG vertex prototype and in THREE.CSG the UVs need to be passed into and out of the CSG polygon.
The adapted codes look like the following:
Vertex prototype in CSG.js:
Whole THREE.CSG.js file:
Using these codes, applying CSG-operations to two THREE.Geometry’s textured with the same texture-map works well, while keeping up the correct vertex UVs.
Hope that may help you a little!