3D Image Cube Loader

396 iroger7

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>3D Image Loader</title>
  <style>
    :root{
      --size: 320px;
      --face-size: calc(var(--size));
    }
    html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
    .wrap{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:24px;
      background:linear-gradient(180deg,#0f172a 0%,#071031 100%);
      color:#e6eef8;
      padding:32px;
      box-sizing:border-box;
    }

/* Scene */
    .scene{
      width:var(--size);
      height:var(--size);
      perspective:1000px;
      perspective-origin:50% 50%;
      position:relative;
    }

/* Cube */
    .cube{
      width:100%;
      height:100%;
      position:relative;
      transform-style:preserve-3d;
      transition: transform 0.3s cubic-bezier(.2,.9,.3,1);
      will-change:transform;
    }

/* Face common */
    .face{
      position:absolute;
      width:100%;
      height:100%;
      backface-visibility:hidden;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      border-radius:8px;
      box-shadow:0 6px 18px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.03);
      background:#0b1220;
      border:1px solid rgba(255,255,255,0.04);
    }

.face img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      pointer-events:none;
    }

/* Position faces */
    .face.front  { transform: rotateY(  0deg) translateZ(calc(var(--face-size) / 2)); }
    .face.back   { transform: rotateY(180deg) translateZ(calc(var(--face-size) / 2)); }
    .face.right  { transform: rotateY( 90deg) translateZ(calc(var(--face-size) / 2)); }
    .face.left   { transform: rotateY(-90deg) translateZ(calc(var(--face-size) / 2)); }
    .face.top    { transform: rotateX( 90deg) translateZ(calc(var(--face-size) / 2)); }
    .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--face-size) / 2)); }

/* Controls panel */
    .panel{
      min-width:260px;
      max-width:380px;
      background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));
      border:1px solid rgba(255,255,255,0.04);
      padding:16px;
      border-radius:8px;
      box-shadow:0 6px 20px rgba(2,6,23,0.6);
    }
    .panel h3{margin:0 0 8px 0;font-size:16px}
    .faces-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 16px}
    .face-slot{
      background:rgba(255,255,255,0.02);
      border:1px dashed rgba(255,255,255,0.06);
      padding:8px;border-radius:6px;
      text-align:center;font-size:13px;color:#cfe6ff;
      cursor:pointer; user-select:none;
    }
    .face-slot input{display:none}
    .btns{display:flex;gap:8px}
    button{
      background:#0b69ff;border:none;padding:8px 10px;border-radius:6px;color:white;font-weight:600;cursor:pointer;
    }
    button.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);}
    .hint{font-size:12px;color:#9fb8ff;margin-top:10px}

/* small footer */
    .footer{font-size:12px;color:#a8c2ff;margin-top:12px}
    /* loader style for empty face */
    .placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;color:#9fb8ff}
    .placeholder svg{width:36px;height:36px;opacity:0.9}
  </style>
</head>
<body>
  <div class="wrap">
    <div class="scene" id="scene" aria-hidden="false">
      <div class="cube" id="cube" style="transform: rotateX(-18deg) rotateY(26deg);">
        <div class="face front" data-face="front"><div class="placeholder"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M3 3h7v7H3z"></path><path d="M14 14h7v7h-7z"></path><path d="M14 3h7v7h-7z"></path><path d="M3 14h7v7H3z"></path></svg><div>Front</div></div></div>
        <div class="face back"  data-face="back"><div class="placeholder"><div>Back</div></div></div>
        <div class="face right" data-face="right"><div class="placeholder"><div>Right</div></div></div>
        <div class="face left"  data-face="left"><div class="placeholder"><div>Left</div></div></div>
        <div class="face top"   data-face="top"><div class="placeholder"><div>Top</div></div></div>
        <div class="face bottom"data-face="bottom"><div class="placeholder"><div>Bottom</div></div></div>
      </div>
    </div>

<aside class="panel" aria-label="controls">
      <h3>3D Image Loader</h3>
      <div class="faces-list" id="facesList">
        <label class="face-slot" data-target="front">Front
          <input type="file" accept="image/*" data-target="front" />
        </label>
        <label class="face-slot" data-target="back">Back
          <input type="file" accept="image/*" data-target="back" />
        </label>
        <label class="face-slot" data-target="right">Right
          <input type="file" accept="image/*" data-target="right" />
        </label>
        <label class="face-slot" data-target="left">Left
          <input type="file" accept="image/*" data-target="left" />
        </label>
        <label class="face-slot" data-target="top">Top
          <input type="file" accept="image/*" data-target="top" />
        </label>
        <label class="face-slot" data-target="bottom">Bottom
          <input type="file" accept="image/*" data-target="bottom" />
        </label>
      </div>

<div class="btns">
        <button id="autoRotate">Toggle Auto-Rotate</button>
        <button class="ghost" id="reset">Reset</button>
      </div>

<div class="hint">Tip: click a face slot to choose an image. You can also drag on the cube to rotate it.</div>
      <div class="footer">Drag an image file onto a face slot or use the file chooser.</div>
    </aside>
  </div>

// Size adaptation: set translateZ based on actual pixel size for effect when CSS variable changes
      function updateFaceZ(){
        // read computed size of scene to compute half depth
        const size = scene.clientWidth;
        document.documentElement.style.setProperty('--size', size + 'px');
        // set transform translateZ on faces (already set in CSS with calc); no change needed here
      }
      updateFaceZ();
      window.addEventListener('resize', updateFaceZ);

// Utility: set image on face
      function setFaceImage(faceName, dataURL){
        const face = document.querySelector('.face[data-face="'+faceName+'"]');
        if(!face) return;
        face.innerHTML = '';
        const img = document.createElement('img');
        img.src = dataURL;
        img.alt = faceName + ' image';
        face.appendChild(img);
      }

// Load file to face
      function handleFile(file, faceName){
        if(!file || !file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = e => setFaceImage(faceName, e.target.result);
        reader.readAsDataURL(file);
      }

// Wire file inputs
      faceSlots.forEach(input=>{
        input.addEventListener('change', e=>{
          const file = e.target.files[0];
          const target = e.target.dataset.target;
          handleFile(file, target);
          // clear value so same file can be reloaded
          e.target.value = '';
        });

// Allow drop to individual slots
        const label = input.parentElement;
        label.addEventListener('dragover', ev=>{ ev.preventDefault(); label.style.opacity = 0.9; });
        label.addEventListener('dragleave', ev=>{ label.style.opacity = ''; });
        label.addEventListener('drop', ev=>{
          ev.preventDefault(); label.style.opacity = '';
          const dt = ev.dataTransfer;
          if(dt && dt.files && dt.files.length) handleFile(dt.files[0], input.dataset.target);
        });
      });

// Also allow dropping files directly on cube faces
      faceElements.forEach(face=>{
        face.addEventListener('dragover', ev=>{ ev.preventDefault(); face.style.opacity = 0.95; });
        face.addEventListener('dragleave', ev=>{ face.style.opacity = ''; });
        face.addEventListener('drop', ev=>{
          ev.preventDefault(); face.style.opacity = '';
          const dt = ev.dataTransfer;
          if(dt && dt.files && dt.files.length){
            const faceName = face.dataset.face;
            handleFile(dt.files[0], faceName);
          }
        });
      });

// Basic drag rotate
      let dragging = false;
      let lastX=0,lastY=0;
      let rotX = -18, rotY = 26; // initial
      let velocityX = 0, velocityY = 0;
      const friction = 0.95;
      let autoRotate = false;
      let animId = null;

function applyRotation(){
        cube.style.transform = `rotateX(${rotX}deg) rotateY(${rotY}deg)`;
      }
      applyRotation();

// Pointer events for mouse/touch
      scene.addEventListener('pointerdown', e=>{
        e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId);
        startDrag(e.clientX, e.clientY);
      });
      window.addEventListener('pointermove', e=>{
        if(!dragging) return;
        moveDrag(e.clientX, e.clientY);
      });
      window.addEventListener('pointerup', e=>{
        endDrag();
      });
      window.addEventListener('pointercancel', e=>{
        endDrag();
      });

// Keyboard rotation for accessibility
      window.addEventListener('keydown', e=>{
        const step = 8;
        if(e.key === 'ArrowLeft'){ rotY -= step; applyRotation(); }
        if(e.key === 'ArrowRight'){ rotY += step; applyRotation(); }
        if(e.key === 'ArrowUp'){ rotX -= step; applyRotation(); }
        if(e.key === 'ArrowDown'){ rotX += step; applyRotation(); }
      });

// Auto-rotate toggle
      autoBtn.addEventListener('click', ()=>{
        autoRotate = !autoRotate;
        autoBtn.textContent = autoRotate ? 'Stop Auto-Rotate' : 'Toggle Auto-Rotate';
      });

// Reset
      resetBtn.addEventListener('click', ()=>{
        rotX = -18; rotY = 26; velocityX = velocityY = 0; autoRotate = false;
        autoBtn.textContent = 'Toggle Auto-Rotate';
        // clear images: revert to placeholders
        faceElements.forEach(face=>{
          const name = face.dataset.face;
          face.innerHTML = '<div class="placeholder"><div style="font-size:14px;opacity:0.95;">'+name.charAt(0).toUpperCase()+name.slice(1)+'</div></div>';
        });
        applyRotation();
      });

// Small UX: double-click a face to open file chooser for that face
      faceElements.forEach(face=>{
        face.addEventListener('dblclick', ()=>{
          const name = face.dataset.face;
          const input = document.querySelector('.face-slot input[data-target="'+name+'"]');
          if(input) input.click();
        });
      });

// Accessibility: allow keyboard focus on face slots
      document.querySelectorAll('.face-slot').forEach(label=>{
        label.tabIndex = 0;
        label.addEventListener('keypress', (e)=>{
          if(e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            const input = label.querySelector('input');
            if(input) input.click();
          }
        });
      });

// Preload sample images (optional): small data URLs so the demo immediately looks good.
      const samples = {
        front: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#0b69ff"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Front</text></svg>'),
        back:  'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#0b9f6a"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Back</text></svg>'),
        left:  'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#7e57c2"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Left</text></svg>'),
        right: 'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#ff6b6b"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#fff">Right</text></svg>'),
        top:   'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#ffb86b"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#111">Top</text></svg>'),
        bottom:'data:image/svg+xml;utf8,' + encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800"><rect width="100%" height="100%" fill="#4dd0e1"/><text x="50%" y="50%" alignment-baseline="middle" text-anchor="middle" font-size="64" fill="#033">Bottom</text></svg>')
      };
      // Initialize with samples
      Object.entries(samples).forEach(([face, data])=> setFaceImage(face, data));

})();
  </script>
</body>
</html>

CSS

3D Image Cube Loader

Recommended