Tumble Interaction

A tumble interaction allows the user to view the model from any angle by clicking and dragging in the canvas. Let the current position and orientation of the model be initialized and stored globally:

〈Interaction〉 ≡
  variable modelRotationX ← 0
  variable modelRotationY ← 0

We'll want a relative tumble, so we'll need to track whether a mouse drag is happening and where the pointer has been:

  variable draggingfalse
  variable lastClientX
  variable lastClientY

When the user presses the mouse button, make a note of it and start tracking the most recent mouse location.

  function onmousedown(event)

When the user releases the mouse button, stop tracking.

  function onmouseup(event)

When the user moves the mouse while the button is down, alter the orientation of the model accordingly.

  function onmousemove(event)
    if dragging

      modelRotationYmodelRotationY + dX
      modelRotationXmodelRotationX + dY

      if modelRotationX > 90.0
        modelRotationX ← 90.0
      if modelRotationX < −90.0
        modelRotationX ← −90.0

      Request a new animation frame.


These functions must be made properties of the canvas entity…