Turntable

Create a turntable view from your GLB/GLTF model.

powered by Flowkit's GLB 2 PNG

Demo

Demo on CodeSandbox

Usage

Vanilla

<div
  style="max-width: 256px; margin: 0 auto"
  data-turntable-file="https://github.com/KhronosGroup/glTF-Sample-Models/raw/refs/heads/main/2.0/Avocado/glTF-Binary/Avocado.glb"
></div>

<script src="https://unpkg.com/@flwkt/[email protected]/npm/autoinit.js" />

Module

1. Install from NPM

npm install @flwkt/turntable

2. Use it in your project

<div
  id="your-div"
  style="max-width: 256px; margin: 0 auto"
  data-turntable-file="https://github.com/KhronosGroup/glTF-Sample-Models/raw/refs/heads/main/2.0/Avocado/glTF-Binary/Avocado.glb"
></div>

import Turntable from '@flwkt/turntable'

const turntable = new Turntable();
turntable.init(document.querySelector('#your-div'));

Settings

data-turntable-file

The URL of the GLB/GLTF file to load.

data-turntable-count

The number of images to generate from the GLB/GLTF file.

For example, if you set data-turntable-count="14" then the 360° view will be split into 14 images.

It's recommended to set data-turntable-count as small as posiible because all images need to be loaded on your users device.

Currently the maximum is 20 images.

data-turntable-scroll

if true the turntable will rotate automatically when the user scrolls and the image is in the viewport.

data-turntable-lazy

if true the images will be loaded lazily.

This is a beta feature right now and leads to flickering.