Table of Contents

Interactive Boxart 3D

Examples

2015

boxart front
boxart top
boxart bottom
boxart back
boxart left

2009

boxart front
boxart top
boxart bottom
boxart back
boxart left

Modifications

Implemented Changes

  • Added support to pinch to zoom in-page to view model closer and allow panning (See "Known Bugs" below).

Possible Changes


Possible Upgrades

Possible upgrades could include switching to three.js's TrackballControls as shown in this example.

Known Bugs

  • On touch input devices, switching between native window-based pinch-to-zoom and trackball rotation capture requires a seperate successive swipe or pinch.
  • On iOS touch devices, the touch area for the box is limited to a plane, and when orthogonal to the screen can be too thin to register a hit.
  • On Chrome in Windows 10 and iOS Safari, -webkit-box-reflect reflections only render whats on the screen, and disapear while scrolling off the page. Disable them if its a problem.
  • On Firefox and Edge in Windows 10, -webkit-box-reflect reflections are not supported.

Research

Using the traqball.js library, based on the following examples.