To inspect the 3D image, right click on it and select "Inspect Element" (the wording might vary based on your browser). Locate the HTML element responsible for rendering the image, typically a <div> as shown below. Observe the changes as you move the image around.
<div class="viewer-3d-frame" data-id="0" style="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;"></div>
Pay close attention to 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;
Note: The image URL actually leads to a sprite sheet containing multiple 2D images, displaying only a portion of it.
When moving the image, observe how the background, left, and width properties change.
- The
background property specifies which image to display and where. By setting a negative x-coordinate, the image shifts off-screen to the left.
- The
left property determines the starting point for drawing the image within its container, shifting it horizontally. Setting left: 0 places the image at the far left.
- The
width property controls how much of the background image is visible. Adjusting this value alters the displayed section.
You can experiment with these values using the inspection tool to see real-time adjustments. Check out the diagram below for a visual representation of these concepts.
https://i.sstatic.net/fl6Zj.png
Behind the scenes, there's likely a lookup mechanism storing coordinates for each sprite's position and size within the sprite sheet, dynamically updating the MouseMove event tracking user input to modify these values in the div.
Here's a hypothetical code snippet:
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
}
}
})