GuideAPI Reference

Room Visualizer

Visualize different room styles, furniture, and products in a 3D environment with this interactive component.

Basic UsageCopied!

Add the <room-visualizer> tag to your HTML:

<room-visualizer></room-visualizer>

Basic ExampleCopied!

HTMLCopied! 

<div style="width: 800px; height: 600px;">
  <room-visualizer 
    room-type="living-room" 
    style-preset="modern"
    height="600px">
  </room-visualizer>
</div>

JavaScriptCopied! 

document.addEventListener('DOMContentLoaded', () => {
  const visualizer = document.querySelector('room-visualizer');
  
  // Listen for room selection events
  visualizer.addEventListener('roomSelected', event => {
    console.log('Room selected:', event.detail);
  });
  
  // Listen for style selection events
  visualizer.addEventListener('styleSelected', event => {
    console.log('Style selected:', event.detail);
  });
  
  // Listen for furniture selection events
  visualizer.addEventListener('furnitureSelected', event => {
    console.log('Furniture selected:', event.detail);
  });
  
  // Listen for product selection events
  visualizer.addEventListener('productSelected', event => {
    console.log('Product selected:', event.detail);
  });
  
  // Programmatically change the room
  document.getElementById('room-selector').addEventListener('change', (e) => {
    visualizer.setRoom(e.target.value);
  });
});

DemoCopied!

PropsCopied!

Prop Type Default Description
room-type String "living-room" Type of room to visualize. Options: "living-room", "bedroom", "kitchen", "bathroom", "office".
style-preset String "modern" Visual style preset for the room. Options: "modern", "minimalist", "classic", "luxury".
furniture-preset String "default" Furniture configuration preset. Options: "default", "minimal", "complete".
width String "100%" Width of the visualizer.
height String "500px" Height of the visualizer.
allow-custom-products Boolean false If true, allows users to add custom products to the visualizer.

EventsCopied!

The Room Visualizer component emits the following events:

Event Detail Description
roomSelected { roomId, roomType, roomName } Fired when a room is selected.
styleSelected { styleId, styleName, stylePreset } Fired when a style is selected.
furnitureSelected { furnitureId, furnitureName, furnitureType } Fired when a furniture piece is selected.
productSelected { productId, productName, price, imageUrl } Fired when a product is selected.

MethodsCopied!

The Room Visualizer component exposes the following methods:

Method Parameters Return Description
setRoom(type) type: String Promise Sets the current room type.
setStyle(preset) preset: String Promise Sets the current style preset.
addProduct(productData) productData: Object Promise Adds a custom product to the visualizer.
removeProduct(productId) productId: String Promise Removes a product from the visualizer.
takeSnapshot() None Promise Takes a snapshot of the current visualization and returns a URL.

Advanced UsageCopied!

Custom Product IntegrationCopied!

You can integrate your own product catalog with the Room Visualizer:

const visualizer = document.querySelector('room-visualizer');

// Add a custom product
async function addCustomProduct() {
  try {
    await visualizer.addProduct({
      id: 'custom-sofa-1',
      name: 'Custom Leather Sofa',
      type: 'sofa',
      price: '$999',
      imageUrl: 'https://example.com/sofa.jpg',
      modelUrl: 'https://example.com/sofa.glb'
    });
    console.log('Custom product added successfully');
  } catch (error) {
    console.error('Failed to add custom product:', error);
  }
}

// Remove a product
function removeProduct(productId) {
  visualizer.removeProduct(productId);
}

Taking and Sharing ScreenshotsCopied! 

const visualizer = document.querySelector('room-visualizer');

async function shareVisualization() {
  try {
    // Take a snapshot of the current visualization
    const imageUrl = await visualizer.takeSnapshot();
    
    // Use the image URL as needed
    document.getElementById('preview-image').src = imageUrl;
    
    // Optionally, share the image
    if (navigator.share) {
      await navigator.share({
        title: 'My Room Design',
        text: 'Check out my room design created with YouZu Room Visualizer!',
        url: imageUrl
      });
    }
  } catch (error) {
    console.error('Failed to share visualization:', error);
  }
}

Performance TipsCopied!

  • Set the height and width explicitly to avoid layout shifts
  • Don't place the visualizer in containers with frequent resizing
  • Consider using a lower quality setting for mobile devices: <room-visualizer quality="medium"></room-visualizer>

Products are not rendering correctlyCopied!

  • Ensure 3D models are in glTF/GLB format
  • Check if the model URL is accessible
  • Verify the model size is not too large (under 5MB recommended)

For additional help, contact our support team.