SW-Valve: Industrial valve assembly instruction
Client: SW Valve Corporation Year: 2024 Services: Interactive 3D, Assembly Instruction, Internal-Structure Visualization Duration: 10 weeks Tech: Three.js, Verge3D, cross-section rendering
The problem
SW Valve Corporation manufactures industrial valves (butterfly valves, check valves, actuated control valves) for shipbuilding, LNG, petrochemical, and hydrogen-infrastructure applications. Their products are installed globally, often by contractors working from documentation in their second or third language, often in field conditions where reaching engineering support is slow.
The traditional solution to this problem is a printed assembly manual with exploded-view diagrams. SW Valve had several. Well-produced, technically accurate, and largely unused. Field installers either memorized the procedure from prior installs or called the engineering team. Both approaches introduced errors and slowed installs.
SW Valve wanted an interactive assembly tool that a field installer could open on a laptop or tablet, navigate through at their own pace, and use as a reference during the install. Replacing the printed manual and compressing the calls back to engineering.
What we built
A browser-based interactive 3D assembly tool for SW Valve's most-installed product line.
- Complete valve exploded view. Every component, from the body casting through the seat, disc, stem, bonnet, and actuator, presented in 3D with proper engineering geometry
- Sequenced assembly steps. The installer steps through the assembly in the correct order, with each step highlighting the part being added and showing the correct orientation
- Cross-section views on demand. Any step can be viewed in cross-section to show how the components fit internally, including the seat-disc interface that's the most common source of install errors
- Reverse (disassembly) mode. The same sequence runs in reverse for maintenance and replacement scenarios
- Spec callouts per component. Torque specs, material grades, sealing-compound recommendations, and other install-critical specifications surfaced per component
- Fallback to static reference. Every 3D step has a companion static-image export the installer can save offline for worksite use without connectivity
How we built it
Weeks 1–2. Kickoff, CAD review, assembly-sequence documentation. SW Valve's engineering team supplied the CAD and the ordered sequence of install steps; we validated the sequence against field-installer feedback.
Weeks 3–4. 3D asset build from CAD. Component-level optimization. Cross-section geometry preparation (cross-sections in 3D require specific geometry treatment. Proper capping, material adjustments for the cut surfaces).
Weeks 5–6. Assembly-sequence engine. The state machine moving through install steps, with the disassembly reverse mode sharing the same state logic. First staging build at end of week 6.
Weeks 7–8. UI layer. Step navigation, cross-section toggle, spec-panel design, static-image fallback export.
Weeks 9–10. Performance tuning for field-tablet hardware (not always premium equipment), copy review with SW Valve's field-installation team, launch.
What it changed
SW Valve deployed the tool alongside their printed manual as a pilot with a subset of their installer network. Early feedback from the pilot group was positive enough to justify a broader rollout.
What we learned
Assembly tools must survive poor connectivity. Field installers often work in contexts where the internet is unreliable. Shipyards, remote industrial sites, offshore platforms. The tool had to load once and then work without re-fetching assets. Service Worker caching + a static-image fallback export made the tool usable in contexts where a fully-online tool would have failed.
Reverse mode is as important as forward mode. We initially scoped only the assembly sequence. SW Valve came back after the first prototype and asked for the disassembly mode. For maintenance and replacement work. The same underlying state machine handled both with minor additions. Lesson for future assembly projects: scope reverse-mode in from the start.
Spec accuracy requires engineering review at every step. Torque values, material compatibility, sealing-compound recommendations. Each spec callout was fact-checked against SW Valve's current engineering documentation. Getting a torque value wrong in an industrial assembly tool isn't a rounding error. It's a product-failure event waiting to happen. We built the review cycle into the project explicitly.
Stack
- Runtime: Three.js + Verge3D
- UI: Next.js App Router, Tailwind, step-state in URL for deep-linking to specific install stages
- Cross-section rendering: custom stencil-shader approach for in-browser CSG-style cross sections
- Offline support: Service Worker + IndexedDB for state persistence
- Static-image fallback: programmatic PNG export of each step for installer offline reference
- Hosting: client-managed, offline-first-enabled via a small Node proxy
Want something similar?
Industrial assembly, field-installation, mechanical-maintenance training (any product where the install or service procedure benefits from three-dimensional clarity and field-deployable tooling. Valves, pumps, pressure vessels, compressors, precision machinery) the pattern translates.
Send a two-sentence email to hello@cclemang.com.
