Open tsdexter opened 1 year ago
I also tried testing this directly on openjscad.xyz but I get:
SyntaxError: Cannot find module @jscad/svg-deserializer
How do I load serializers into openjscad.xyz?
@tsdexter see #1087 which discusses the issues with SVG. Hopefully, you will find a few hints.
@z3dev thanks, I did see that and was hoping it wasn't related... Going back for a closer look, I was able to get some working extrusions by inverting them all and then knowingly combining specific entries in the returned array via intersect
like:
union(solids[0], intersect(solids[1], solids[2]), solids[3], intersect(solids[4], solids[5]))
I had to know which indexes were holes on which solids. However, I am doing this on dynamic/generated SVG paths, so this is not ideal. Is there any plans to improve the SVG importing in the near future?
Is there any plans to improve the SVG importing in the near future?
I would REALLY like to see SVG import fixed. I just have not had time to dig in. PRs are welcome :-)
@platypii in the interest of time, I am using a workaround for now (mapping indices to holes/solids for the known possible paths that will be generated).
So far, I like what I'm seeing with OpenJSCAD, I think it will be very useful for what I'm working on. I will definitely look to contribute (starting with SVG imports!), time permitting :)
I think it might not actually be that hard to fix. I'm not sure it works for all cases, but concatenating the sides together and making a single new geom2 object, instead of returning a list of separate objects, seems to work even for nested holes:
const { extrusions } = require('@jscad/modeling')
const { deserializers } = require('@jscad/io')
const main = () => {
// parse svg
const svgText = `
<svg>
<path d="m3 9h6v-6h-6v6zm1-5h4v4h-4v-4zm-4 8h12v-12h-12v12zm1-11h10v10h-10v-10" fill="#000"/>
</svg>`
const svg = deserializers.svg({ output: "geometry", target: "geom2"}, svgText)
// concatenate all sides together
const fixed = {
...svg[0],
sides: svg.reduce((acc, obj) => acc.concat(obj.sides), [])
}
// extrude
return extrusions.extrudeLinear({ height: 1 }, fixed)
}
module.exports = { main }
Expected Behavior
I expect to see a solid 'f'
Actual Behavior
The object that is extruded from the SVG looks like it's not solid, has no top face:![image](https://github.com/jscad/OpenJSCAD.org/assets/4126987/d992632c-93f5-45b3-a6ec-017528d630af)
However, when I rotate the viewport around, for example, to look at it from underneath then is appears there is a top surface:![image](https://github.com/jscad/OpenJSCAD.org/assets/4126987/6ffc86e8-c893-46e3-9826-952db6093526)
When I subtract the extruded SVG from a cube, it behaves strangely, looks more like an intersection of the two:
Cube and 'f' with no subtraction:![image](https://github.com/jscad/OpenJSCAD.org/assets/4126987/d05954c8-0984-44a7-a263-c69985f53d58)
Result of![image](https://github.com/jscad/OpenJSCAD.org/assets/4126987/e115109c-e605-408c-85d1-7c385abc2dbe)
subtract(cube({ size: 10 }), extrudedSvg)
:Even a basic path to create a square results in this behaviour (comment out line 13 to reproduce):![image](https://github.com/jscad/OpenJSCAD.org/assets/4126987/0223b04c-1e1a-4e9e-99b6-1729c48abeea)
Steps to Reproduce the Problem
https://codesandbox.io/s/jscad-react-js-demo-forked-7soe65?file=/src/App.js
Specifications
see codesandbox