diff --git a/public/guides/step-file-to-2d-drawing-3d-view.png b/public/guides/step-file-to-2d-drawing-3d-view.png new file mode 100644 index 0000000..8a0efa2 Binary files /dev/null and b/public/guides/step-file-to-2d-drawing-3d-view.png differ diff --git a/public/guides/step-file-to-2d-drawing-editor.png b/public/guides/step-file-to-2d-drawing-editor.png new file mode 100644 index 0000000..aad3965 Binary files /dev/null and b/public/guides/step-file-to-2d-drawing-editor.png differ diff --git a/public/sitemap.xml b/public/sitemap.xml index e612650..bcf6973 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -2,19 +2,25 @@ https://cadviewer.xyz/ - 2026-08-21 + 2026-08-22 weekly 1 https://cadviewer.xyz/viewer - 2026-08-21 + 2026-08-22 monthly 0.8 https://cadviewer.xyz/guides/split-step-assembly - 2026-08-21 + 2026-08-22 + monthly + 0.9 + + + https://cadviewer.xyz/guides/step-file-to-2d-drawing + 2026-08-22 monthly 0.9 diff --git a/src/main.tsx b/src/main.tsx index b0128cd..b0a0af8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,6 +3,7 @@ import { ClientOnly, Head, ViteReactSSG } from "vite-react-ssg"; import type { RouteRecord } from "vite-react-ssg"; import Landing from "./pages/Landing"; import SplitStepAssembly from "./pages/guides/SplitStepAssembly"; +import StepFileTo2dDrawing from "./pages/guides/StepFileTo2dDrawing"; const App = lazy(() => import("./ui/App")); @@ -50,6 +51,10 @@ function NotFound() { export const routes: RouteRecord[] = [ { path: "/", element: }, { path: "/guides/split-step-assembly", Component: SplitStepAssembly }, + { + path: "/guides/step-file-to-2d-drawing", + Component: StepFileTo2dDrawing, + }, { path: "/viewer", element: ( diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx index a72840b..5de6319 100644 --- a/src/pages/Landing.tsx +++ b/src/pages/Landing.tsx @@ -178,6 +178,13 @@ export default function Landing() { Need to split an assembly into parts? Read the guide → + + Need a 2D drawing from a STEP file? Read the guide → + +

Supported: STEP · IGES · STL · OBJ · 3MF · BREP · GLB · DXF

diff --git a/src/pages/guides/StepFileTo2dDrawing.module.css b/src/pages/guides/StepFileTo2dDrawing.module.css new file mode 100644 index 0000000..ba802fc --- /dev/null +++ b/src/pages/guides/StepFileTo2dDrawing.module.css @@ -0,0 +1,289 @@ +:global(body.guide-page) { + overflow-y: auto; + height: auto; + min-height: 100vh; +} + +:global(body.guide-page #root) { + height: auto; + min-height: 100vh; +} + +.page { + min-height: 100vh; + background: #fafafa; + color: #1a1a1a; + display: flex; + justify-content: center; + padding: 4rem 1.5rem 6rem; +} + +.article { + width: min(720px, 100%); + display: flex; + flex-direction: column; + gap: clamp(3rem, 5vw, 4rem); +} + +.section { + display: flex; + flex-direction: column; + gap: 1.25rem; +} + +.breadcrumb { + display: inline-flex; + align-self: flex-start; + color: #4b5563; + font-size: 0.9rem; + text-decoration: none; +} + +.breadcrumb:hover { + color: #3b82f6; +} + +.eyebrow { + margin: 0; + color: #6b7280; + font-family: + "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", + "Courier New", monospace; + font-size: 0.75rem; + letter-spacing: 0.12em; + text-transform: uppercase; +} + +.headline { + margin: 0.5rem 0 0; + color: #1a1a1a; + font-size: 2.25rem; + line-height: 1.2; + font-weight: 700; +} + +.intro { + margin: 0; + color: #4b5563; + font-size: 1.1rem; + line-height: 1.7; +} + +.lede { + margin: 0; + color: #1f2937; + font-size: 1.1rem; + line-height: 1.7; +} + +.sectionHeading { + margin: 0; + color: #1a1a1a; + font-size: 1.5rem; + font-weight: 700; +} + +.paragraph { + margin: 0; + color: #4b5563; + font-size: 1.05rem; + line-height: 1.7; +} + +.list { + margin: 0; + padding-left: 1.25rem; + color: #4b5563; + font-size: 1.05rem; + line-height: 1.7; + display: flex; + flex-direction: column; + gap: 0.65rem; +} + +.externalLink { + color: #2563eb; + text-decoration: underline; + text-underline-offset: 2px; +} + +.externalLink:hover { + color: #1d4ed8; +} + +/* Numbered step cards */ +.stepList { + margin: 0; + padding: 0; + list-style: none; + display: flex; + flex-direction: column; + gap: 0.85rem; +} + +.stepCard { + display: flex; + align-items: flex-start; + gap: 1.1rem; + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 12px; + padding: 1.25rem 1.5rem; +} + +.stepNumber { + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + width: 2.5rem; + height: 2.5rem; + border-radius: 999px; + background: #eff6ff; + color: #3b82f6; + font-size: 1.15rem; + font-weight: 700; +} + +.stepBody { + display: flex; + flex-direction: column; + gap: 0.3rem; +} + +.stepTitle { + margin: 0; + color: #1a1a1a; + font-size: 1.05rem; + font-weight: 700; +} + +.stepDescription { + margin: 0; + color: #4b5563; + font-size: 1rem; + line-height: 1.6; +} + +.stepImageWrap { + margin: 0.5rem 0; +} + +/* Embedded video */ +.videoWrap { + position: relative; + width: 100%; + padding-top: 56.25%; + margin: 0.5rem 0; + border-radius: 8px; + overflow: hidden; + background: #000; +} + +.videoWrap iframe { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: none; +} + +/* FAQ accordion */ +.faqGrid { + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.faqItem { + background: #ffffff; + border: 1px solid #e5e7eb; + border-radius: 12px; + padding: 0.35rem 1.5rem; +} + +.faqItem[open] { + padding-bottom: 1.25rem; +} + +.faqQuestion { + margin: 0; + padding: 1rem 0; + color: #1a1a1a; + font-size: 1.05rem; + font-weight: 600; + cursor: pointer; + list-style: none; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.faqQuestion::-webkit-details-marker { + display: none; +} + +.faqQuestion::after { + content: "+"; + flex: none; + color: #3b82f6; + font-size: 1.3rem; + font-weight: 400; + transition: transform 0.15s ease; +} + +.faqItem[open] .faqQuestion::after { + transform: rotate(45deg); +} + +.faqAnswer { + margin: 0.25rem 0 0; + color: #4b5563; + font-size: 1rem; + line-height: 1.65; +} + +.ctaRow { + margin-top: 0.25rem; +} + +.cta { + display: inline-block; + background: #3b82f6; + color: #ffffff; + border: none; + border-radius: 8px; + padding: 0.85rem 2.25rem; + font-size: 1rem; + font-weight: 600; + text-decoration: none; + box-shadow: 0 8px 24px -8px rgba(59, 130, 246, 0.45); + transition: + background 0.15s ease, + transform 0.15s ease; +} + +.cta:hover { + background: #2563eb; + transform: translateY(-1px); +} + +@media (max-width: 768px) { + .page { + padding: 2.5rem 1.25rem 4rem; + } + + .article { + gap: clamp(2.25rem, 8vw, 3rem); + } + + .headline { + font-size: 1.75rem; + } + + .stepCard { + flex-direction: column; + gap: 0.6rem; + } +} diff --git a/src/pages/guides/StepFileTo2dDrawing.tsx b/src/pages/guides/StepFileTo2dDrawing.tsx new file mode 100644 index 0000000..fbb018e --- /dev/null +++ b/src/pages/guides/StepFileTo2dDrawing.tsx @@ -0,0 +1,330 @@ +import type { ReactNode } from "react"; +import { Link } from "react-router-dom"; +import { Head } from "vite-react-ssg"; +import styles from "./StepFileTo2dDrawing.module.css"; + +function ExternalLink({ + href, + children, +}: { + href: string; + children: ReactNode; +}) { + return ( + + {children} + + ); +} + +type Step = { + title: string; + description: ReactNode; +}; + +const STEPS: Step[] = [ + { + title: "Load your file", + description: ( + <> + Go to{" "} + + cadviewer.xyz + {" "} + and drop in your file. STEP, + IGES, STL, OBJ, 3MF, BREP, or GLB all work. Nothing to install, no + account to create, and the file never leaves your browser — it's + processed client-side. You'll get an interactive 3D view + immediately — rotate, section, and measure it like you would in any + CAD viewer. + + ), + }, + { + title: "Generate the drawing", + description: ( + <> + Click Generate 2D Drawing. This captures true + orthographic Front, Top, and Right views in third-angle projection, + adds an isometric reference view, and dimensions the part + automatically — hole sizes, locations, overall dimensions — + following standard drafting conventions, not just whatever fits + visually. + + ), + }, + { + title: "Adjust anything that needs it", + description: ( + <> +

+ The drawing opens in an editor where you can: +

+ + + ), + }, + { + title: "Export", + description: ( + <> + Download it as a true-to-scale PDF. Printed at 100%, the dimensions + on the page match the real part — it's not just a picture of a + drawing, it's one you can actually use. + + ), + }, +]; + +const FAQS: { question: string; answer: ReactNode; answerText: string }[] = [ + { + question: "Does this replace SolidWorks or Fusion for real production drawings?", + answer: ( + <> + For getting a dimensioned drawing out of a model quickly — for a + machine shop quote, a personal project, or a student assignment — + yes. For full{" "} + + GD&T + {" "} + with feature control frames and formal revision control, a dedicated + CAD package is still the right tool. + + ), + answerText: + "For getting a dimensioned drawing out of a model quickly — for a machine shop quote, a personal project, or a student assignment — yes. For full GD&T with feature control frames and formal revision control, a dedicated CAD package is still the right tool.", + }, + { + question: "Is my file uploaded anywhere?", + answer: "No — everything runs in your browser. Nothing is sent to a server.", + answerText: "No — everything runs in your browser. Nothing is sent to a server.", + }, + { + question: "What file formats are supported?", + answer: + "STEP, IGES, STL, OBJ, 3MF, BREP, GLB, and DXF for import; PDF for the generated drawing.", + answerText: + "STEP, IGES, STL, OBJ, 3MF, BREP, GLB, and DXF for import; PDF for the generated drawing.", + }, +]; + +const FAQ_JSON_LD = { + "@context": "https://schema.org", + "@type": "FAQPage", + mainEntity: FAQS.map((faq) => ({ + "@type": "Question", + name: faq.question, + acceptedAnswer: { + "@type": "Answer", + text: faq.answerText, + }, + })), +}; + +export default function StepFileTo2dDrawing() { + return ( + <> + + + How to Turn a STEP File into a 2D Engineering Drawing (Free) | + CAD Viewer + + + + + + + + + + + + +
+
+
+ + ← Back to CAD Viewer + +

Guide

+

+ How to Turn a STEP File into a 2D Engineering Drawing — Free +

+
+ +
+

+ No SolidWorks. No Fusion 360. No install. +

+ +

+ If you've got a 3D model and need an actual engineering + drawing from it — the kind with dimensions, a title block, and + a scale you can hand to a machine shop — the usual answer is + "open it in SolidWorks or Fusion 360." That's fine if you + already have a seat. If you don't, there hasn't really been a + free way to do this without installing something. +

+ +

+ Here's how to do it directly in your browser, in about a + minute. +

+ + +
+ +
+

How to do it

+
    +
  1. + 1 +
    +

    {STEPS[0].title}

    +

    + {STEPS[0].description} +

    +
    +
    2. + +
  2. + 2 +
    +

    {STEPS[1].title}

    +

    + {STEPS[1].description} +

    +
    +
    3. +
+ +
+ CAD Viewer's 3D viewer showing an uploaded Pump Housing Face Plate STEP file with the Generate 2D Drawing button highlighted in the side panel +
+ +
    +
  1. + 3 +
    +

    {STEPS[2].title}

    + {STEPS[2].description} +
    +
    2. +
+ +
+ CAD Viewer's 2D drawing editor showing a fully dimensioned Front, Top, and Right orthographic drawing with an isometric reference view, notes, and title block +
+ +
    +
  1. + 4 +
    +

    {STEPS[3].title}

    +

    + {STEPS[3].description} +

    +
    +
    2. +
+ +
+