Header me Google Model-Viewer script add karein aur product container me ye HTML lagayein:
<!-- 1. Add inside <head> -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
<!-- 2. Add in your Product Page Template -->
<div class="muzari-3d-wrapper">
<model-viewer
id="product3dViewer"
src="URL_TO_YOUR_PRODUCT.glb"
alt="Luxury Product in 3D"
camera-controls
auto-rotate
touch-action="pan-y"
ar
ar-modes="webxr scene-viewer quick-look"
shadow-intensity="1.2"
exposure="1.0">
<button slot="ar-button" class="muzari-ar-btn">
📱 View in Your Room (AR)
</button>
</model-viewer>
</div>
Apni stylesheet me ye CSS paste karein:
.muzari-3d-wrapper {
width: 100%;
height: 580px;
background: radial-gradient(circle at center, #ffffff 0%, #f3efe9 100%);
border-radius: 16px;
position: relative;
overflow: hidden;
}
model-viewer {
width: 100%;
height: 100%;
--poster-color: transparent;
}
.muzari-ar-btn {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
background: #1c1c1f;
color: #fff;
border: 1px solid #d4af37;
padding: 12px 24px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 25px rgba(0,0,0,0.25);
transition: all 0.3s ease;
}
.muzari-ar-btn:hover {
background: #d4af37;
color: #111;
}
Dynamic color change aur thumbnail switching ke liye ye JavaScript use karein:
// Dynamic Color / Material changer for any product
function changeProductColor(innerHex, outerHex) {
const viewer = document.querySelector('#product3dViewer');
if (!viewer || !viewer.model) return;
const hexToRgb = (hex) => {
const c = hex.replace('#', '');
return [
parseInt(c.substring(0, 2), 16) / 255,
parseInt(c.substring(2, 4), 16) / 255,
parseInt(c.substring(4, 6), 16) / 255,
1.0
];
};
viewer.model.materials.forEach(mat => {
if (mat.name.includes('Inner')) {
mat.pbrMetallicRoughness.setBaseColorFactor(hexToRgb(innerHex));
}
if (mat.name.includes('Outer')) {
mat.pbrMetallicRoughness.setBaseColorFactor(hexToRgb(outerHex));
}
});
}
Shopify / WordPress / Custom CMS par implement karne ka tarika:
Step 1: Apni `.glb` files apne server ya Shopify Files (`Settings > Files`) me upload karein.
Step 2: Product meta-field me `product.metafields.custom.model_3d_url` banayein.
Step 3: Agar 3D URL maujood ho to thumbnail strip me "3D / AR" button show karein exactly jese Herman Miller me hai.