@flwkt/turntable
v0.4.0TypeScript
Create a turntable view from your GLB/GLTF model
0/weekUpdated 1 years agoMITUnpacked: 14.7 KB
Published by Flowkit
npm install @flwkt/turntableTurntable
Create a turntable view from your GLB/GLTF model.
powered by Flowkit's GLB 2 PNG
Demo
Demo on CodeSandbox
Usage
$3
``
html
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"
>`
$3
1. Install from NPM
`bash
npm install @flwkt/turntable
`
2. Use it in your project
`html
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"
>`
`js
import Turntable from '@flwkt/turntable'
const turntable = new Turntable();
turntable.init(document.querySelector('#your-div'));
`
Protect your assets
You can use the data-turntable-short attribute to hide the actual path to your GLB/GLTF file to hide your 3D assets from the public.
See data-turntable-short in the settings section below for more information.
Settings
$3
The URL of the GLB/GLTF file to load.
$3
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.
$3
if true the turntable will rotate automatically when the user scrolls and the image is in the viewport.
$3
if true the images will be loaded lazily.
This is a beta feature right now and leads to flickering.
$3
The vertical rotation of the images. Example:
- 0 means the camera looks straight at the model.
- 90 means the camera looks at the model from the top.
- -90 means the camera looks at the model from the bottom.
default is 15.
$3
The short URL of the GLB/GLTF file to load.
This can be used to hide the actual path to your GLB/GLTF file to hide your assets from the public.
You can get the short URL from the API response of https://www.flowkit.app/api/short?url=URL_TO_YOUR_GLB_OR_GLTF_FILE`.
For example:
https://www.flowkit.app/api/short?url=https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/main/2.0/Suzanne/glTF/Suzanne.gltf