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 ← 0variable 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 dragging ← false 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 )dragging ← true lastClientX ← event.clientX lastClientY ← event.clientY
When the user releases the mouse button , stop tracking.
function onmouseup(event )dragging ← false
When the user moves the mouse while the button is down, alter the orientation of the model accordingly.
function onmousemove(event )if dragging dX ← event.clientX − lastClientX dY ← event.clientY − lastClientY modelRotationY ← modelRotationY + dX modelRotationX ← modelRotationX + dY if modelRotationX > 90.0modelRotationX ← 90.0if modelRotationX < −90.0modelRotationX ← −90.0lastClientX ← event.clientX lastClientY ← event.clientY
These functions must be made properties of the canvas entity…