Clickable

[alizadeh2007]

Hello, I wanted to create an SVG with Maker.js that includes shapes like circles, squares, etc., and I would like to perform actions when clicking on, for example, the circle. Is this functionality possible in Next.js with this library? Could you show me how to do it? Also, if I want to turn this 2D shape into 3D, can you guide me on how to do it? Is it possible to display it in 3D, similar to Three.js, using this library?

[alizadeh2007]

Actually, I want to convert this to 3D, but I don't know how to do it at all. In the library documentation, it says it can be converted to a 3D file with JSCAD. My question is: what format does this 3D file have? And which library and method should I use to display this 3D file?

[danmarshall]

He @alizadeh2007, you may want to check out the JSCAD project at https://github.com/jscad/OpenJSCAD.org . JSCAD can import SVG and extrude them to create 3d objects. It can also do a lot more :)

[alizadeh2007]

My question is also about JSCAD. Does this library handle the drawing and displaying operations itself, or does it only generate a 3D file? And what format is the file it provides? I'm currently in the middle of a project where I'm struggling to display DXF files with Three.js. Would switching my code to JSCAD be a difficult task?

[danmarshall]

Sorry, I interpreted your second comment as you didn't want to use SVG since you were interested in 3D.

There are 2 modes for SVG - one is to have multiple elements for every segment in a drawing, the other is to have a single element representing an entire shape in the drawing (this one can even have a fill - the first one can't). Can you provide a code smaple how you are trying to access it?

[danmarshall]

JSCAD has an entire suite of libraries, some for programmatically modeling (without a UI) and they also have a UI to render models.
The STL file format is an older format that many still use, but 3MF is more modern and robust. Here's a screenshot of file formats from their page at https://jscad.app/#./examples/nuts-and-bolts.example.js

[alizadeh2007]

"use client";

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useRouter } from "next/navigation";
import { useUpdateTempPart } from "@/hooks/use-update-temp-part";
import { dxfExporter, svgExporter } from "@/services/converters/export-file";
import {
setLength,
setPartObjectURL,
setWidth,
} from "@/store/slices/order-slice";
import { INSTANT_QUOTE_WIZARD } from "@/constants/internal-urls";
import { useUploadFile } from "@/hooks/use-upload-file";
import makerjs from "makerjs";
import { type TBuildPart } from "@/interfaces/build-part";
import {
setCompletedFile,
setTemplatesSetting,
} from "@/store/slices/build-part-slice";
import { type RootState } from "@/store/store";
import { ring } from "./ring";
import { boltCircle } from "./bolt-circle";
import { mmToCm } from "@/utils/convert-unite";

interface TIcon {
thikness?: number;
setting?: TBuildPart["setting"];
}

function Template4({
thikness = 0.5,
setting = {
ring: { inner: 7, outer: 18 },
boltCircle: { radius: 2, distance: 12, number: 10 },
},
}: TIcon): JSX.Element {
const dispatch = useDispatch();
const router = useRouter();
const { mutate: updateOrder } = useUpdateTempPart();
const { mutate: uploadFile } = useUploadFile();
const [dxfStorage, setDxfStorage] = useState("");
const [svgStorage, setSvgStorage] = useState("");
const completedFile = useSelector(
(state: RootState) => state.buildPartSlice.completedFile,
);
const currenPage = useSelector(
(state: RootState) => state.step.currentBuildPartStep,
);
useEffect(() => {
dispatch(
setTemplatesSetting({
grid: { status: false },
rect: { status: false },
bolts: { status: false },
ovalBolt: { status: false },
oval: { status: false },
boltCircle: {
status: true,
number: 10,
distance: Number(currenPage) === 1 ? 12 : 24,
radius: Number(currenPage) === 1 ? 2 : 4,
},
ring: {
status: true,
inner: Number(currenPage) === 1 ? 7 : 14,
outer: Number(currenPage) === 1 ? 18 : 36,
},
}),
);
}, []);

useEffect(() => {
const pathData = {
models: {
ring: ring(setting?.ring),
boltCircle: boltCircle(setting?.boltCircle),
},
};
const svgOptions = {
strokeWidth: thikness.toString(),
scalingStroke: true,
fill: "#aaaaaa",
units: "mm",
};
const dxfOptions = {
layer: "0",
color: "0,255,0",
units: makerjs.unitType.Millimeter.toString(),
usePOLYLINE: true,
};
const svg = makerjs.exporter.toSVG(pathData, svgOptions);
const dxf = makerjs.exporter.toDXF(pathData, dxfOptions);
setDxfStorage(dxf);
setSvgStorage(svg);
const svgContainer = document.getElementById("svg-container4");
if (svgContainer) {
svgContainer.innerHTML = svg;
}
dispatch(setWidth(mmToCm(Number(setting.ring?.outer))));
dispatch(setLength(mmToCm(Number(setting.ring?.outer))));
}, [thikness, setting]);
useEffect(() => {
if (completedFile) {
const submitModelForUpload = () => {
const dxfFile: File = dxfExporter(dxfStorage);
if (dxfFile) {
uploadFile(dxfFile, {
onSuccess: ({ data }) =>
updateOrder(
{ part_object_file_id: data?.file_id },
{
onSuccess: (info) => {
dispatch(
setPartObjectURL({
file: info?.part_object_uploaded_file?.file,
id: info?.part_object_uploaded_file?.id,
build_part: svgExporter(svgStorage),
}),
);
router.push(INSTANT_QUOTE_WIZARD);
},
},
),
});
}
};
submitModelForUpload();
dispatch(setCompletedFile(!completedFile));
}
}, [completedFile]);
return

;
}

export default Template4;

[alizadeh2007]

This is one of the my shape that i wrote

[alizadeh2007]

"use client";
import makerjs from "makerjs";

export const ring = (setting) => {
const model = {
models: {
circle: new makerjs.models.Ring(setting?.inner, setting?.outer),
},
};
return model;
};

"use client";
import makerjs from "makerjs";

export const boltCircle = (setting) => {
const model = new makerjs.models.BoltCircle(
setting?.distance,
setting?.radius,
setting?.number,
);
return model;
};

[alizadeh2007]

and also why the thikness are differents?

[alizadeh2007]

In another section of my website, users need to upload files that are in DXF format. Can the jscad library accept this format and convert it into a suitable format for display? For example, can it convert DXF files to SVG so that I can use r3f to render them?

[z3dev]

So, what's the BIG goal? A full web application?