vloid-3d

A zero-config 3D model viewer as a Web Component. Drop it into any project — no framework required.

<vloid-3d model="/character.glb" environment="studio" animation="walk" style="height: 500px"></vloid-3d>

Installation

npm i vloid-3d

Usage

Vanilla HTML

<script type="module">
  import 'vloid-3d'
</script>

<vloid-3d
  model="/assets/character.glb"
  environment="sunset"
  animation="run"
  background="#1c1c1c"
  auto-rotate="true"
  rotate-speed="1.5"
  style="width: 100%; height: 500px;"
></vloid-3d>

React / Next.js

import 'vloid-3d'

export default function Page() {
  return (
    <vloid-3d
      model="/character.glb"
      environment="studio"
      animation="walk"
      style={{ width: '100%', height: '500px' }}
    />
  )
}

Vue

<script setup>
import 'vloid-3d'
</script>

<template>
  <vloid-3d model="/character.glb" environment="city" style="height: 500px" />
</template>

Attributes

| Attribute | Type | Default | Description | |----------------|-----------|------------|---------------------------------------------------------------| | model | string | — | URL to a .glb or .gltf file | | environment | string | "studio" | Lighting preset (see below) | | animation | string | — | Name of an animation clip embedded in the model | | shadow | boolean | true | Contact shadow beneath the model | | ground | boolean | true | Grid ground plane | | background | string | "#1c1c1c"| Background color (any CSS hex color) or "false" for transparent | | auto-rotate | boolean | false | Continuously rotate the model around the Y axis | | rotate-speed | number | 1 | Rotation speed — positive = right, negative = left (−10 to 10) |

Environment presets

studio · city · sunset · forest · night · dawn · lobby · park · warehouse · apartment · corridor · neutral

Controls

| Input | Action | |-------------------|---------------| | Left drag | Rotate | | Right drag / pan | Pan | | Scroll wheel | Zoom |

Sizing

The element is display: block by default. Set width and height via CSS or inline styles:

vloid-3d {
  width: 100%;
  height: 600px;
}

Supported formats

.glb · .gltf

License

MIT