Youzu 3D Lens

The Youzu 3D Lens Component Transforms 2D product images into interactive 3D models.

Basic Usage

Add the <youzu-3d-lens> tag to your HTML:

<youzu-3d-lens></youzu-3d-lens>

Demo

Usage Options

<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');

// Listen for view changes
lens3d.addEventListener('viewChange', event => {
  console.log('View changed:', event.detail);
});

// Switch to 3D view programmatically
async function switchTo3D() {
  try {
    await lens3d.switchTo3D();
    console.log('Switched to 3D view');
  } catch (error) {
    console.error('Error switching to 3D:', error);
  }
}

// Toggle between 2D and 3D views
async function toggleView() {
  try {
    await lens3d.toggleView();
    console.log('Toggled view');
  } catch (error) {
    console.error('Error toggling view:', error);
  }
}
// Detect objects in an image
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);
  // Process the detected objects
})
.catch(error => {
  console.error('Error:', error);
});
import requests

# Detect objects in an image
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)
        # Process the detected objects
    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"

Props

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

Events

Event Description Type
viewChange Event emitted when view mode changes (2D to 3D or vice versa) CustomEvent<ViewChangeEventData>

Methods

Method Parameters Return Type Description
switchTo3D options?: LensOptions Promise<void> Switch to 3D view
toggleView Promise<void> Toggle between 2D and 3D views

Example

<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>