Getting Started

Learn how to set up and use Vuer-Viz in your project

Installation

First, install Vuer-Viz and its peer dependencies. We recommend using pnpm, but npm and yarn work just as well.

pnpm add @vuer-ai/vuer-viz

Basic Setup

To start using Vuer-Viz, you'll need to set up a basic scene. The VuerScene component is the root container for all your 3D objects.

1. Import Components

import { VuerScene, Box, Sphere, Light } from '@vuer-ai/vuer-viz';

2. Create a Scene

function MyVisualization() {
  return (
    <VuerScene
      width="100%"
      height="600px"
      camera={{ position: [0, 5, 10] }}
    >
      {/* Add a light source */}
      <Light type="ambient" intensity={0.5} />
      <Light type="directional" position={[10, 10, 5]} />

      {/* Add 3D objects */}
      <Box
        position={[0, 0, 0]}
        size={[2, 2, 2]}
        color="#3498db"
      />

      <Sphere
        position={[3, 0, 0]}
        radius={1}
        color="#e74c3c"
      />
    </VuerScene>
  );
}

3. Add to Your App

import React from 'react';
import { MyVisualization } from './MyVisualization';

function App() {
  return (
    <div className="app">
      <h1>My 3D Visualization</h1>
      <MyVisualization />
    </div>
  );
}

export default App;

Configuration Options

The VuerScene component accepts several configuration options:

Camera Settings

<VuerScene
  camera={{
    position: [x, y, z],
    target: [x, y, z],
    fov: 60,
    near: 0.1,
    far: 1000
  }}
/>

Renderer Options

<VuerScene
  width="100%"
  height="600px"
  background="#1a1a1a"
  antialias={true}
  shadows={true}
/>

Controls

<VuerScene
  controls={{
    enabled: true,
    type: 'orbit', // or 'fly', 'first-person'
    damping: 0.05,
    minDistance: 1,
    maxDistance: 100
  }}
/>

Adding Interactivity

Make your visualizations interactive by adding event handlers:

function InteractiveBox() {
  const [color, setColor] = React.useState('#3498db');
  const [scale, setScale] = React.useState(1);

  return (
    <Box
      position={[0, 0, 0]}
      size={[2, 2, 2]}
      color={color}
      scale={scale}
      onClick={() => setColor('#e74c3c')}
      onHover={() => setScale(1.2)}
      onHoverEnd={() => setScale(1)}
    />
  );
}

Next Steps

• Explore the API Reference for detailed documentation
• Check out Examples for more complex use cases
• Read the Guides for advanced techniques