if i have similar geometry, but with different orientation and location, I should be able to apply transformation on CSG rather than recreating it again.

First off, great lib!
Secondly, I know I really should give you a jsfiddle for this, but wanted to just do a sanity check before I go through the pain of abstracting it into a fiddle

I have a problem where I have a mesh (say 300x300x20 box)
From that I subtract objects (example screenshot) meshes

Working from the outside in, the first cut (subtract) works fine. The second shape I subtract from a shape that was "inside" the first subtraction, does the subtraction, but doesnt fill in any geometry inside this mesh

Desired result (drawn in sketchup to illustrate the point)

Result with threejs and ThreeCSG.js

Applies to any shapes I throw at it, by the way, circles, triangles, rectangles, anything

The "subtracted" geometry is a 2d shape with holes, that gets extruded using threejs.

So my question is

a) Am i barking up the wrong tree, can this lib do what I need?
b) Am i doing something wrong (suspect you'll need a jsfiddle after all)
c) Am i just missing some extra steps like computing something between first subtraction and second subtraction?

In Three.js r55
DEPRECATED: Matrix4's .multiplyVector3() has been removed. Use vector.applyMatrix4( matrix ) or vector.applyProjection( matrix ) instead.' );

And because ThreeBSP.Vertex object doesn't have applyMatrix4() or applyProjection() method, it fails.

How could this great tool updated to work with Three.js r55?

I allready discussed this on SO and IRC. But it seems to be a bug within ThreeCSG. I load two meshes and try to substract them from each other. The resulting mesh is angular and lower quality. If you turn wireframe on you can also see that some of the vertexfaces are wrong after the substraction.

I created a small fiddle for demonstration here

I'm having an issue when trying to change the position and rotation of a mesh. The rotation is applied from point (0, 0, 0) rather than the center of the mesh, see this post on three.js discourse for more detail.

Seems like the problem can be solved by calling .updateMatrix() on a mesh before converting it to CSG and back. However I needed to use a different CSG wrapper from Michael Schlachter for this to work… any chance we could incorporate this feature into your version?

In ThreeCSG around line 39ish, there is an assumption made that faceVertexUVs will be available at all. In my test case, I'm using a model format that has no UVs at all and isn't relevant to the operation. Because of this, ThreeCSG breaks because it accesses an undefined array faceVertexUvs

ref:
https://github.com/jscad/csg.js/blob/V2/csg.js

There are some features that I find useful, such as polygon splitting.

Can you address the texturing issues mentioned in
http://stackoverflow.com/questions/9999531/adding-textures-to-a-three-js-shape-after-it-has-gone-throught-a-csg-js-process
in the latest version of ThreeCSG?

Result:

First of all, thanks for this very useful asset!

How can i use Typescript version ? there is any npm package to install before ?

Thanks

How to reproduce:

Given a MeshA with 0 verts or faces
Given a MeshB with some verts (say.. a THREE.CubeGeometry)

Do meshA.intersect( meshB )

Gives a null error at line 303
this.plane.flip()

chandlerp
: if there's no faces, no build operation happens, which means the plane attribute remains null

Too me, this looks closer to a fork of CSG.js than a completely new project. Yet there is no mention of the original project or its author. Thats probably an honest mistake, but one that will proliferate. Case in point, https://github.com/james-oldfield/three-js-csg

Original project: https://github.com/evanw/csg.js

Hi guys and girls,

I'm getting thrown an error Uncaught ThreeBSP: Given geometry is unsupported when passing in an instance of THREE.Mesh into the library's ThreeBSP method.

Any ideas why i'm getting this error? I've provided a snippet of my code below, the object i'm passing into the library method resolves to true when logged to the console, so I'm clueless as to why the code is throwing the error. Any help would be greatly appreciated!

Important to note that i'm using version 0.73.0 of three.js. I guess it might have something to do with idiosyncrasies between the versions.

import THREE from 'three';
import CSG from 'three-csg';

[...]

export const meshFactory = () => {
  const cone = {};
  cone.geometry = new THREE.CylinderGeometry(5, 100, 100, 32);
  cone.mesh = new THREE.Mesh(cone.geometry);

  console.log(cone.mesh instanceof THREE.Mesh); // prints true

  const coneBSP = new CSG(cone.mesh); // error thrown here as it doesn't appear to be an instance of THREE.Mesh or other valid cases

[...]
};

6040bc2

This change is breaking for ThreeJS release 86 and possibly earlier. Would it be possible to create a release for the plugin before this ClassifyBySide update and then a new major version after?

I made some threejs models using your ThreeCSG like 4 months ago and now replace ThreeCSG with the new update and seems to be a bug with the geometry generated... check the pictures

... Same codes results after Update

...Same codes with Original version

whant to use that lib with obj or stl or other files loaded through three.js.

now lib shows me error "the geometry is not supported"

How can I do it with this lib?

Is it planned to support vertex colors in the future? The blender exporter of three.js can export these attributes but they get lost when an operation with this library is made

hello,

is there an example available to subtract a text mesh from another geometry mesh?
I tried to play around with text meshes and geometry meshes. is it even possible?

best regards

Hey,

I've been trying to use this library to use CSG subtraction, but have been running into an issue. When I try to make a BSP from my geometry, which in this case is a THREE.TubeGeometry, I get a maximum call stack exceeded error. Having looked into the source, I narrowed down the problem to the creation of the ThreeBSP.Node. However, I got very lost in the math and wasn't able to figure out what the problem was.

In further attempts to debug, I called all of the compute() methods on the geometry, such as computeFaceNormals(), computeVertexNormals(), etc. Unfortunately, the error remains. What can I do to address this issue?

Thanks in advance.

Problem

According to this: https://stackoverflow.com/a/68000360/3405291

Three.js r125 removed support for Geometry. We have to now use custom BufferGeometry now onwards. https://threejsfundamentals.org/threejs/lessons/threejs-custom-buffergeometry.html

Solution 1: older version

PR #67 is a workaround by using an older version of ThreeJS. But that might not be possible for all the projects.

Solution 2: Refactor

A stable solution is to change the source code. There is a PR doing the same refactor for another library, maybe helpful: tengbao/vanta#118

When I subtract mesh B from mesh A while they have no intersections, I get a result different from "A". Is this a bug?

Simple example:

var greenMat = new THREE.MeshPhongMaterial({
    color: 0x00FF00,
    specular: 0xcccccc
});
var planeGeom = new THREE.PlaneGeometry(10, 10, 1, 1);

var wall = new THREE.Mesh(planeGeom, greenMat);
var wall_bsp = new ThreeBSP(wall);

var cubeGeom = new THREE.CubeGeometry(3, 3, 3);
var cube = new THREE.Mesh(cubeGeom, greenMat);
cube.position.z = -30;
var cube_bsp = new ThreeBSP(cube);

var res = wall_bsp.subtract(cube_bsp);

var wall_result = res.toMesh(greenMat);
//wall_result.material.side = THREE.DoubleSide;
wall_result.quaternion = wall.quaternion;
wall_result.position = wall.position;
wall_result.scale = wall.scale;

this._scene.add(wall_result);

I am porting this great lib to C++ to be compiled to WASM using ecmscripten. Just to let you know. It is so to speak a blind porting, as I am not really going into the algorithms, just "translating" to C++.

The goal is to recude the computation time.

It is to be used in https://beta.bitbloq.cc/app/playground/3d

I'm seeing shading artifacts on the examples.html dated 24 Apr 2017. Here is what I get when I start a webserver and load examples.html (Windows 10, Chrome or Edge)

This is probably a duplicate of #17 issue by Mawalu. Also, on
Stackoverflow 40808392

Robert

There are two methods ThreeBSP.Node and ThreeBSP.Node.prototype.build that if I am not mistaken seem to do exactly the same.

Maybe one of them can be removed (duplicate code).

Below is my code

var bBox = new THREE.Box3().setFromObject(doorMesh),
    cubeGeom = new THREE.BoxGeometry(bBox.size().x,bBox.size().y,bBox.size().z),
    cubeMesh = new THREE.Mesh(cubeGeometry,new THREE.MeshNormalMaterial),
    geom = new THREE.Geometry();

    cubeMesh.position.set(doorMesh.position.x,doorMesh.position.y,doorMesh.position.z);
    cubeMesh.updateMatrix();
    geom.merge(cubeMesh.geometry, cubeMesh.matrix);

    var cubeBsp = new ThreeBSP(geom),
          wallBsp = new ThreeBSP(wallMesh.geometry);

        var sub = wallBsp.subtract(cubeBsp);

I am doing the above steps but it's not working. However when I convert cubeGeometry to BSP instead of geom then it works but the cut is at the center of the object.

In the file "csg.js/csg.js" line48:
vertex = new ThreeBSP.Vertex( vertex.x, vertex.y, vertex.z, face.vertexNormals[2], uvs );

I think we should get the normal from the array vertexNormals with key 1 instead of key 2:

vertex = new ThreeBSP.Vertex( vertex.x, vertex.y, vertex.z, face.vertexNormals[1], uvs );

Thanks,
Radhwane C.

The screen is black.
This is in Chrome.

https://github.com/chandlerprall/ThreeCSG/blob/master/threeCSG.es6#L547

It doesn't transpile.

Obviously it needs to be changed to:

if (this.back) this.back.invert();

Hello,
I want to create an animation where an object is subtracted with a box but csg is a bit slow to do what i want.

The object is not moving but the box does. i wanted to add the possibility to move box csg without recreate it each time but it doesn t work. Could you look at this code please ?

`ThreeBSP.prototype.transform = function(transformation_matrix) {
var i, j,
polygons = this.tree.polygons/.allPolygons()/,
polygon_count = polygons.length,
polygon, polygon_vertice_count;

		var transformation_matrix_elements = transformation_matrix.elements;


	for ( i = 0; i < polygon_count; i++ ) {
		polygon = polygons[i];
		polygon_vertice_count = polygon.vertices.length;
		for ( j = 0; j < polygon_vertice_count; j++ ) {
			polygon.vertices[j].applyMatrix4_2(transformation_matrix_elements);
			
			polygon.calculateProperties();
		}
	}

	console.log(polygons[0].vertices[0].x + " " + polygons[0].vertices[0].y + " " + polygons[0].vertices[0].z);
	
	this.matrix = this.matrix.multiply(transformation_matrix);
	this.tree = new ThreeBSP.Node( polygons );
};

ThreeBSP.Vertex.prototype.applyMatrix4_2 = function ( e ) {

	// input: THREE.Matrix4 affine matrix
	var x = this.x, y = this.y, z = this.z;

	this.x = e[0] * x + e[4] * y + e[8]  * z + e[12];
	this.y = e[1] * x + e[5] * y + e[9]  * z + e[13];
	this.z = e[2] * x + e[6] * y + e[10] * z + e[14];

	return this;
}

`

Hello

I have 2 STL models imported via this code (simplified):

var A, B;

var loader = new THREE.STLLoader();

// Load Object A
loader.load( './stl/A.stl', function ( geometry ) {
	material = new THREE.MeshPhongMaterial( {
		color: 0xffffff
	} );

	A = new THREE.Mesh( geometry, material );

	scene.add( A );
} );

// Load object B
loader.load( './stl/B.stl', function ( geometry ) {
	material = new THREE.MeshPhongMaterial( {
		color: 0xffffff
	} );

	B = new THREE.Mesh( geometry, material );

	scene.add( B );
} );

Now I'm goint to use ThreeCSG to subtract B from A (At first I had the problem of unsupported geometry error and after some googling I got here, creating geometries from buffer geometry, that error has gone but the new error appeared! ):

// convert buffer geometry to geometry
var A_geometry = new THREE.Geometry().fromBufferGeometry( A.geometry );
var B_geometry = new THREE.Geometry().fromBufferGeometry( B.geometry );

// convert to BSP
var A_bsp = new ThreeBSP( A_geometry );
var B_bsp =  new ThreeBSP( B_geometry );

// subtract
var subtract_bsp  = A_bsp.subtract( B_bsp );

// convert back to mesh
var result = subtract_bsp.toMesh();

// add to the scene
scene.add(result);

But the error I get:

ThreeCSG.js:434 Uncaught RangeError: Maximum call stack size exceeded
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:434)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)
    at new window.ThreeBSP.ThreeBSP.Node (ThreeCSG.js:455)

I think it's because the faces of the STL files are too large (each about 200,000). Is there a way to handle this?

Where is the inverse function from the original CSG?

http://evanw.github.io/csg.js/docs/

All examples of examples.html can see the results, but when use with the fbx model can not see the result without any error messages.
So I insert the console.log function to test, found the following program will stop at step 2.
What to do next?

  //es6 js style
  //defined scene camera renderer blahblahblah
  const manager = new THREE.LoadingManager();
  const loader = new THREE.FBXLoader(manager);
  loader.load('https://threejs.org/examples/models/fbx/xsi_man_skinning.fbx', fbx => {
    window.FBX = fbx;
    /*
      Found the fbx.children[0].children[1].isMesh is true and had geometry data(Type of BufferGeometry)
    */
    let start_time = new Date().getTime();
    let cubeGeo = new THREE.CubeGeometry(5, 5, 1);

    console.log('step 1');
    let cube_bsp = new ThreeBSP(cubeGeo);

    console.log('step 2');
    let car_bsp = new ThreeBSP(fbx.children[0].children[1].geometry);

    console.log('step 3');
    let subtract_bsp = car_bsp.intersect(cube_bsp);

    console.log('step 4');
    let result = subtract_bsp.toMesh(new THREE.MeshLambertMaterial({
      shading: THREE.SmoothShading
    }));

    console.log('step 5');
    result.geometry.computeVertexNormals();
    scene.add(result);
    console.log('used time: ' + ((new Date()).getTime() - start_time) + 'ms');
  });

I want to create an indoor room area using the ThreeCSG plugin. The challenge I'm up to is windows. I'd like to be able to union a window frame cube into the room and then subtract a 'glass' cube.

Is there was a way for me to retain the materials from the original shape? In the scenario above, I'd like to be able to retain the wall, window frame and glass materials.

I have been using CSG for geometry manipulation and it's awesome.
However, it seems there is a problem with the polygon splitting and there are missing/wrong polygons.
I have checked it with latest threeCSG.js and three.js
Also used all previously mentioned suggestions including changing EPSILON.
I have checked it with netfabb.
Here's the original and the fixed geometry pictures:

Here is a very simple code:
var boxG = new THREE.BoxGeometry(100, 100, 100, 1, 1, 1);
boxG.verticesNeedUpdate = true;
boxG.computeVertexNormals();
boxG.computeFaceNormals();
boxG.normalsNeedUpdate = true;
var holeG = new THREE.BoxGeometry(50, 50, 50, 1, 1, 1);
var holeM = new THREE.Mesh(holeG);
holeM.position.z = 50;
var holeG = new THREE.Geometry();
THREE.GeometryUtils.merge(holeG, holeM);
holeG.verticesNeedUpdate = true;
holeG.computeVertexNormals();
holeG.computeFaceNormals();
holeG.normalsNeedUpdate = true;
var boxBsp = new ThreeBSP(boxG);
var holeBsp = new ThreeBSP(holeG);
boxBsp = boxBsp.subtract(holeBsp);
var boxG = boxBsp.toGeometry();

Is this familiar and planed to be fixed?

Hi,

I am working on a prototype in which I need to create holes in a cylinder. Below is the original model I am using:

After using subtract I get the following output:

As you can see, the output is correct, but the surface detail is lost and the radial segments are reduced.

I have been looking for a solution everywhere and all I get is use computeVertexNormals and computeFaceNormals to make surface smooth. I have tried both of these API's along with/without mergeVertices and it still doesn't work.

Any solution?

Since geometries can get complicated, I wonder if there is a way (maybe using these techniques) that could 'detect' if two geometries intersect. I've noted that you can call intersection on an object, and if there are 0 (zero) nodes in the tree then it indicates that they are NOT intersected. This is useful, but where I struggle is I wish there was a way to detect if complex geometries intersect in the world regardless of what child/parent structure they have.

Any ides?

Could you please make a release of the old code as version 1, and then make the v1 branch version 2 and then start following semantic versioning? (semver.org)

What is needed to merge the v1 branch back into the master as version 2?

Using three.min.js rev 73

Method used:
var roomBSP = new ThreeBSP(_RoomShape); // HUGE SHAPE

Info gathered from a TryCatch:
"number : -2146828260"
"Error: Out of stack space
at ThreeBSP.Vertex.prototype.dot (/ThreeCSG.js)
at ThreeBSP.Polygon.prototype.classifyVertex (/ThreeCSG.js)
at ThreeBSP.Polygon.prototype.classifySide (/ThreeCSG.js)
at ThreeBSP.Polygon.prototype.splitPolygon (/ThreeCSG.js)
at ThreeBSP.Node (/ThreeCSG.js)
at ThreeBSP.Node (/ThreeCSG.js)
at ThreeBSP.Node (/ThreeCSG.js)
at ThreeBSP.Node (/ThreeCSG.js)
at ThreeBSP.Node (/ThreeCSG.js)
at ThreeBSP.Node (/ThreeCSG.js)"

Using the OUTDATED csg-wrapper from kraag22/csg-wrapper it doesn't happen but his wrapper is way outdated and needs an update.

Might this occur when using high values/numbers?

Another example:
var intersect = shape1.intersect(shape2); // Small shapes

Info gathered from a TryCatch:
"number : -2146828260"
-:-

I'm pretty new to three.js so I'm sorry if this issue seems a bit odd.
I need to subtract window area from the wall. The issue started when I had multiple window on same wall.
As I'm using loops to create multiple windows, I need to either add them to group or scene directly.
So how can I use the CSG around them?
can we use CSG operations on group? Like can we add object to a group which we haven't converted to mesh after converting it to BSP. Or, can we convert a group from mesh to BSP using ThreeCSG?
@chandlerprall Please help needed :p