The Youzu 3D Lens Component Transforms 2D product images into interactive 3D models.
Add the <youzu-3d-lens> tag to your HTML:
<youzu-3d-lens></youzu-3d-lens>
<youzu-3d-lens
src="https://example.com/product.jpg"
alt="Product example"
width="100%"
height="400px">
</youzu-3d-lens>
const lens3d = document.querySelector('youzu-3d-lens');
lens3d.addEventListener('viewChange', event => {
console.log('View changed:', event.detail);
});
async function switchTo3D() {
try {
await lens3d.switchTo3D();
console.log('Switched to 3D view');
} catch (error) {
console.error('Error switching to 3D:', error);
}
}
async function toggleView() {
try {
await lens3d.toggleView();
console.log('Toggled view');
} catch (error) {
console.error('Error toggling view:', error);
}
}
const imageFile = document.getElementById('image-input').files[0];
const formData = new FormData();
formData.append('image', imageFile);
fetch('https://platform-api.youzu.ai/api/v1/object-detection', {
method: 'POST',
headers: {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
'x-client-secret': 'YOUR_CLIENT_SECRET'
},
body: formData
})
.then(response => response.json())
.then(data => {
console.log('Objects detected:', data);
})
.catch(error => {
console.error('Error:', error);
});
import requests
with open('product-image.jpg', 'rb') as image_file:
files = {'image': image_file}
headers = {
'Authorization': 'Bearer YOUR_ACCESS_TOKEN',
'x-client-secret': 'YOUR_CLIENT_SECRET'
}
response = requests.post(
'https://platform-api.youzu.ai/api/v1/object-detection',
files=files,
headers=headers
)
if response.status_code == 200:
detections = response.json()
print('Objects detected:', detections)
else:
print('Error:', response.status_code, response.text)
curl -X POST https://platform-api.youzu.ai/api/v1/object-detection \
-H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
-H "x-client-secret: YOUR_CLIENT_SECRET" \
-F "image=@product-image.jpg"
| Property |
Attribute |
Description |
Type |
Default |
alt |
alt |
The alt text for the image |
string |
'' |
height |
height |
The height of the component |
string |
undefined |
modelSrc |
model-src |
The 3D model URL (.gib file) |
string |
undefined |
showLoader |
show-loader |
Manually control the loading state (for demo purposes) |
boolean |
false |
src |
src |
The source URL of the image |
string |
undefined |
width |
width |
The width of the component |
string |
undefined |
| Event |
Description |
Type |
viewChange |
Event emitted when view mode changes (2D to 3D or vice versa) |
CustomEvent<ViewChangeEventData> |
| Method |
Parameters |
Return Type |
Description |
switchTo3D |
options?: LensOptions |
Promise<void> |
Switch to 3D view |
toggleView |
|
Promise<void> |
Toggle between 2D and 3D views |
<div style="flex: 1; min-width: 500px">
<youzu-3d-lens
id="electronicsDemo"
src="https://example.com/product.jpg"
alt="Product example"
width="100%"
height="400px">
</youzu-3d-lens>
</div>