WordPress Code Snippets Collection

<div class="model-viewer-container">
  <model-viewer
    src="path/to/model.glb"
    alt="3D Model"
    auto-rotate
    camera-controls
    shadow-intensity="1"
    ar
    style="width: 100%; height: 500px;"
  >
  </model-viewer>
  
  <div class="model-controls">
    <button id="rotate-left">↺</button>
    <button id="zoom-in">+</button>
    <button id="zoom-out">-</button>
    <button id="reset-view">Reset</button>
  </div>
</div>

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>

<canvas id="simple-3d-canvas" width="400" height="300"></canvas>
<script src="three.min.js"></script>
<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, 400/300, 0.1, 1000);
  const renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('simple-3d-canvas') });
  
  // Load and display GLB model
  const loader = new THREE.GLTFLoader();
  loader.load('model.glb', (gltf) => {
    scene.add(gltf.scene);
  });
  
  function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  }
  animate();
</script>

<div class="photosphere-viewer">
  <div id="pano" style="width: 100%; height: 500px;"></div>
</div>

<link rel="stylesheet" href="photo-sphere-viewer.css">
<script src="photo-sphere-viewer.js"></script>
<script>
  const viewer = PhotoSphereViewer({
    container: document.getElementById('pano'),
    panorama: 'path/to/panorama.jpg',
    caption: '360° View',
    loadingImg: 'loader.gif',
    defaultZoomLvl: 0,
    minZoomLvl: 0,
    maxZoomLvl: 90
  });
</script>

<div class="item-rearranger" id="sortable-list">
  <div class="sortable-item" data-id="1">
    <span class="handle">⋮⋮</span>
    <span class="item-content">First Item</span>
  </div>
  <div class="sortable-item" data-id="2">
    <span class="handle">⋮⋮</span>
    <span class="item-content">Second Item</span>
  </div>
  <div class="sortable-item" data-id="3">
    <span class="handle">⋮⋮</span>
    <span class="item-content">Third Item</span>
  </div>
</div>

<button id="save-order">Save Order</button>

new Sortable(document.getElementById('sortable-list'), {
  handle: '.handle',
  animation: 150,
  onEnd: function() {
    // Update order array
    const order = [];
    document.querySelectorAll('.sortable-item').forEach(item => {
      order.push(item.dataset.id);
    });
    console.log('New order:', order);
  }
});

// Enqueue necessary scripts
function enqueue_snippet_assets() {
    // For specific snippet pages
    if (is_page('3d-models')) {
        wp_enqueue_script('model-viewer', 'https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js', [], '3.1.1', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_snippet_assets');