A real assembly

A PiCAN 2 USB to CAN adapter going into its printed two-part shell, in four steps: the board into the upturned top shell, pushed toward the USB end, the bottom shell snapped on, and done. Press Next to step through, Play to watch a step's moves, or drag the view to look closer:

Things to try:

• Scroll past it. The page scrolls over the viewer until you click it, and over its step panel always; once you click the view, the wheel zooms it, and Esc lets go. See Scrolling past an embedded page.
• Press Play all to watch the whole assembly.
• Narrow the window. Once the frame is 760 pixels wide or less, the step panel moves under the view, and the frame grows to fit it, with no scrollbar inside. That is the auto-height protocol at work.
• Flip the site's light/dark toggle. The page follows it; see Light and dark mode.
• Press the fullscreen button in the corner of the view.

The page uses isikstech, a theme kept beside the project folders rather than bundled with 3DStep. Its page and its 3D view are transparent, so the viewer sits on this site's own background, with the site's amber for the highlights and arrows, and Roboto.

The model came from the adapter's 18 MB STEP export through the designer. The board alone had 304 bodies, of which the 2 mm size filter dropped 248, and simplifying the board to half its triangles did the rest: 3 parts and 18,537 triangles, in a 1.4 MB page.

The sources

Download pican2.toml, pican2.glb and the theme, isikstech.toml, and open the three together in the designer with Open project. The designer then previews the project in the site's theme, and its Generate gives this page. Opened without the theme, the project previews with the default look, and a banner offers to open isikstech.toml.

# Isik's Tech docs site 3DStep theme (docs/3d/isikstech.toml).
#
# The 3DStep counterpart of docs/pinouts/isikstech.toml (PinConnect): the
# page and the 3D view are transparent, so the viewer sits on the site's own
# background (#F8F8F8 light, #131313 dark), with the site's amber for the
# accent and the parts each step installs, and Roboto like the site.

[theme]
name = "isikstech"

[font]
family = "Roboto"
source = "google"
weights = "400;500;600"

[font.label]
family = "Roboto Mono"
source = "google"
weights = "400;500"

[colors.light]
bg             = "transparent"
view-bg        = "transparent"
accent         = "#ffa200"
highlight-fill = "#ffe3a1"
highlight-edge = "#a36500"
arrow          = "#ffa200"
arrow-edge     = "#7a4c00"

[colors.dark]
bg             = "transparent"
view-bg        = "transparent"
accent         = "#ffbf00"
highlight-fill = "#5c4300"
highlight-edge = "#ffd24d"
arrow          = "#ffbf00"
arrow-edge     = "#ffe8a3"

[[step]]
id = "push"
title = "Push it toward the USB end"
text = "Slide the board toward the USB end as far as it goes, so the USB plug sits fully in its opening."
highlight = ["pican2"]

  [[step.move]]
  parts = ["pican2"]
  offset = [-2.0, 0.0, 0.0]
  arrow = false

  [[step.arrow]]
  from = [24.0, -4.0, 0.0]
  to = [40.0, -4.0, 0.0]
  attach = "pican2"

  [[step.label]]
  text = "USB end"
  at = [66.0, 0.5, 0.0]
  side = "right"
  attach = "pican2"