Html – How can I make a 3D viewer using a Spritesheet

Right click on the image and click "Inspect Element" (the wording may be slightly different depending on your browser.) Use the tool to find the HTML element that renders the 3D image, which is this <div> element shown below. Pay attention to what happens when you drag the image around.

<div class="viewer-3d-frame" data-id="0" style="height: 243px; background: url(&quot;https://wiki.teamfortress.com/w/images/a/af/Pistol_3D.jpg?20180817142106&quot;) -9403px 0px no-repeat; left: 26px; top: 19px; width: 221px;"></div>

Specifically, pay attention to what’s in the style attribute:

height: 243px;
background: url("https://wiki.teamfortress.com/w/images/a/af/Pistol_3D.jpg?20180817142106") -9403px 0px no-repeat;
left: 26px;
top: 19px;
width: 221px;

Aside: As you discovered in the original post, by navigating to the image URL, it’s actually a sprite sheet of several 2D images and you are only seeing part of the full image.

When you drag the image around, the background, left, and width properties changed.

• The background property defines what image to draw and where to draw it. It uses a trick by setting a negative x-coordinate to "start" drawing the image further left, out of the bounds of the parent div.
• The left property defines the left-most point where to start drawing, as an absolute position in the parent element. Changing this value will shift the image you see left and right. This is what helps to keep the image centered in the parent. Setting left: 0 moves the image all the way to the left in the div.
• The width property simply defines how much of the background image to draw.
  A width of 0 will draw nothing, and a width of 9999px will draw the entire sprite set, even though it will go out of bounds from the parent div.

You can manually change these parameter values in the inspection tool to see the changes in real time. I created the image below to show you how all of these properties come together.

As for how it all works, there is likely an "internal dictionary" of sorts that contains lookup values for the x-coordinate, left, and width properties of each sprite in the sprite set, that propagates to the div style. I also expect that the MouseMove event is being used to trigger sprite changes on user mouse input and propagate these lookup values to the div.

Here is some pseudocode:

const spriteset = [
  {
    "x": -9403,
    "left": 26,
    "width": 221
  },
  {
    ...
  },
  ...
];

let currentSpriteIndex = 0;

const div3dViewer = document.querySelector("div.viewer-3d-frame");

div3dViewer.addEventListener('mousemove', e => {
    if (e.buttons === 1) {// Left button is down
        if (e.movementX < 0) {
            // mouse is dragged left
        } else if (e.movementX > 0) {
            // mouse is dragged right
        } else if (e.movementY < 0) {
            // mouse is dragged up
        } else if (e.movementY > 0) {
            // mouse is dragged down
        }
    }
})