Why am I unable to subtract from a bone model of an stl?

Questions
1

I have an stl of a bone that I am trying to cut with a sphere using react-three-csg as shown below. The image is what i see with showOperations=true. But without that, all i get is a blank screen. I have tried it with a box and a sphere and it worked fine. Is the bone model just too complex?

                <mesh>
                    <Geometry>
                        <Base geometry={geometry}>
                            <meshPhysicalMaterial color={`green`} />
                        </Base>
                        <Subtraction position={[0, -150, 900]}>
                            <sphereGeometry args={[50, 64, 64]} />
                            <meshPhysicalMaterial color={`red`} />
                        </Subtraction>
                    </Geometry>
                </mesh>

Screenshot 2024-03-08 at 7.25.29 AM

2

Could be anything. That bone looks super high rez, as does the sphere. It shouldn’t fail silently though… I’d expect it to hang or throw oom.
Also csg works best with closed volumes… You may need to run bufferGeometryUtils.mergeVertices on the geometries first. Generally speaking though… I’d expect an operation of that complexity to take on the order of minutes.

1 Like
3

OK. thanks.

1 Like
4

I’d suggest starting with simple cylinder/sphere or box and verify that you have everything set up right, then go for the big meshes.

1 Like
5

Thanks @manthrax. I tried it using cylinderGeometry before I tried the bone stl. It worked. The bone did not. Now I tried a coarse stl of a cylinder. All my attempts result in a blank screen. I also tried mergeVertices.

This works using the cylindergeometry instead of the stl…

            <mesh>
                    <Geometry useGroups showOperations>
                        <Base>
                            <cylinderGeometry args={[10, 10, 100, 64, 64]} />
                            <meshPhysicalMaterial color={`green`} />
                        </Base>
                        <Subtraction position={[10, 0, 0]}>
                            <sphereGeometry args={[20, 10, 10]} />
                            <meshPhysicalMaterial color={`red`} />
                        </Subtraction>
                    </Geometry>
                </mesh>

This does not. getGeometry() returns the buffer geometry.

               <mesh>
                  <Geometry useGroups showOperations>
                        <Base geometry={getGeometry()}>
                            <meshPhysicalMaterial color={`green`} />
                        </Base>
                        <Subtraction position={[10, 0, 0]}>
                            <sphereGeometry args={[20, 10, 10]} />
                            <meshPhysicalMaterial color={`red`} />
                        </Subtraction>
                    </Geometry>
                </mesh>

This also does not. group was loaded using the stl loader.

                <mesh>
                    <Geometry useGroups showOperations>
                        <Base>
                            <primitive object={group} /> 
                            <meshPhysicalMaterial color={`green`} />
                        </Base>
                        <Subtraction position={[10, 0, 0]}>
                            <sphereGeometry args={[20, 10, 10]} />
                            <meshPhysicalMaterial color={`red`} />
                        </Subtraction>
                    </Geometry>
                </mesh>

I also tried replacing the primitive with…

                <bufferGeometry>
                    <bufferAttribute
                        attach="attributes-position"
                        array={bufferGeometry.attributes.position.array}
                        count={bufferGeometry.attributes.position.array.length / 3}
                        itemSize={3}
                    />
                    <bufferAttribute
                        attach="attributes-normal"
                        array={bufferGeometry.attributes.normal.array}
                        count={bufferGeometry.attributes.normal.array.length / 3}
                        itemSize={3}
                    />
                </bufferGeometry>

And…

<bufferGeometry attach={`geometry`} {...getGeometry()} />

And this is the image with showOperations. It is the same for all of the above variations.

Screenshot 2024-03-08 at 1.59.41 PM
Screenshot 2024-03-08 at 1.59.41 PM571×536 25.5 KB

6

Can you post a repro in codepen or similar?
CSG is a notoriously tricky thing to get right/consistent for complex meshes. Things I usually end up trying is checking and removing uv/color attributes on the geometry…
geometry.setAttribute(‘uv’,null);
geometry.setAttribute(‘color’,null);

… performing geometry = bufferGeometry.mergeVertices( geometry… then calling geometry.computeVertexNormals() and verify that the model shows smooth shaded…
hard to say.

7

Yeah. i am working on it. Thanks.

1 Like
8

here is an example… https://codesandbox.io/p/sandbox/cut-stl-58fg72?file=%2Fsrc%2FApp.tsx%3A35%2C20

9

Sandbox is gone or not public?

10

Sorry. Try this please. Sandbox

11

Oh. I am getting TypeError: Cannot read properties of undefined (reading ‘count’). That is probably the issue. It somewhat works if apply the following to the geometry stl.setAttribute(uv, new BufferAttribute(new Float32Array([]), 1)); it is just not closed.

12

Yeah. I’m not very familiar with the jsx “syntax” so… its a bit tricky for me to understand what it going on. it looks like you’re adding a dummy uv attribute to make it work?

I’m dm’ing you…