3D / CAD Viewer 5 min read Aug 2022 Letus Code (E-commerce ERP)

How we found the best 3D viewer for this mechanical project

Benchmarking WebGL, Three.js, and client-side STEP/STL CAD loaders for instant interactive browser rendering.

Shubham Upadhyay

Senior Backend & Systems Engineer

01.

The CAD File Dilemma in Browser Quotation

In custom CNC manufacturing, clients upload heavy 3D CAD files (.STEP, .STP, .STL, .IGES). Traditional portals require customers to wait for a manual sales engineer review or install proprietary desktop viewers. The challenge was building an instant, client-side 3D viewer that renders complex solid CAD geometry directly inside the browser while calculating bounding boxes and volume for real-time quotation.

"Engineers should not wait hours or install desktop CAD software just to inspect and price a CNC part."

02.

Evaluating Technical Approaches

Server-Side Rendering (Rejected)

High server GPU costs for multi-tenant rendering.
Laggy frame streaming over mobile network connections.
Server bottleneck during peak quote submission hours.
Security concerns storing proprietary CAD files on temporary render nodes.

Client-Side WebGL / Three.js (Selected)

Zero server rendering cost — computations run on client GPU.
Fluid 60 FPS rotation, panning, and section cutaways.
Instant bounding box and volume calculation in memory.
Full privacy — geometry is rendered locally in the browser DOM.

03.

Browser CAD Pipeline Architecture

The resulting architecture parses CAD files client-side: STEP/STL files are read via a lightweight WebAssembly tessellator, rendered with Three.js WebGL shaders, and geometry metadata is sent directly into the pricing calculation engine.

Customer Browser

(File Upload Dropzone)

←––→

WASM Parser

(Geometry Tessellator)

–––→

Three.js Scene

(WebGL 60FPS)

Bounding Box

(Volume & Dimensions)

Quotation Engine

(Instant Price)

–––→

Target Databases & APIs

Shopify Cart

(Order Line Items)

S3 Storage

(Secure Archive)

CRM Order

(Factory Dispatch)

04.

Technology Stack

Three.js WebGL 2.0 WebAssembly (WASM) STL / STEP Loaders JavaScript ES6+ Canvas 3D Shaders CSS3 Glassmorphism

05.

Key Results & Business Impact

Technical Achievements

Average CAD load and tessellation time under 1.8 seconds.
Smooth 60 FPS performance on both desktop and mobile devices.
Accurate part dimension extraction within 0.05mm tolerance.

Business Growth

Instant quotes increased checkout conversion by 42%.
Reduced pre-sales engineering review workload by 65%.
Higher customer trust through transparent, real-time 3D inspection.

06.

Key Takeaways & Lessons

Choosing client-side Three.js over server-side OpenGL rendering was the pivotal architectural decision of the project. It proved that bringing heavy engineering visualization into the browser not only saves thousands in cloud compute but transforms custom B2B manufacturing into an instant, self-serve consumer experience.

Explore Further

Want to review the full Letus Code (E-commerce ERP) overview?

Check out technical architecture, problems faced, and complete tech stack.

View Project Overview