test1

Product details

基本造型 戴帽子 戴眼镜 ⚡ 全副武装 当前选择：基本造型 document.addEventListener('DOMContentLoaded', function() { const viewer = document.getElementById('product-viewer'); const currentSelection = document.getElementById('current-selection'); // 模型文件映射（你需要替换这些URL为你实际上传的文件地址） const modelFiles = { 'body': 'https://cdn.shopify.com/3d/models/.../untitled41.glb', 'with-hat': 'https://cdn.shopify.com/s/files/1/YourShopifyPath/body-with-hat.glb', 'with-glasses': 'https://cdn.shopify.com/s/files/1/YourShopifyPath/body-with-glasses.glb', 'full-gear': 'https://cdn.shopify.com/s/files/1/YourShopifyPath/body-full.glb' }; // 按钮文字映射 const buttonText = { 'body': '基本造型', 'with-hat': '戴帽子', 'with-glasses': '戴眼镜', 'full-gear': '全副武装' }; // 为所有按钮添加点击事件 document.querySelectorAll('.model-switch').forEach(button => { button.addEventListener('click', function() { const modelKey = this.dataset.model; const modelUrl = modelFiles[modelKey]; if (!modelUrl) { alert('模型文件未配置，请先上传并替换URL'); return; } // 显示加载状态 viewer.style.opacity = '0.7'; currentSelection.textContent = `当前选择：${buttonText[modelKey] || modelKey}（加载中...）`; // 切换模型 viewer.src = modelUrl; // 按钮激活样式 document.querySelectorAll('.model-switch').forEach(btn => { btn.style.transform = 'scale(1)'; btn.style.boxShadow = '0 2px 10px rgba(0,0,0,0.1)'; }); this.style.transform = 'scale(1.05)'; this.style.boxShadow = '0 4px 15px rgba(0,0,0,0.2)'; // 模型加载完成后的处理 viewer.addEventListener('load', function onLoad() { viewer.style.opacity = '1'; currentSelection.textContent = `当前选择：${buttonText[modelKey] || modelKey}`; viewer.removeEventListener('load', onLoad); }); // 加载失败处理 viewer.addEventListener('error', function onError() { viewer.style.opacity = '1'; currentSelection.textContent = `当前选择：${buttonText[modelKey] || modelKey}（加载失败）`; alert('模型加载失败，请稍后重试'); viewer.removeEventListener('error', onError); }); }); }); }); .model-switch { transition: all 0.3s ease; font-family: inherit; } .model-switch:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important; } model-viewer { --poster-color: transparent; }