@twoavy/gltf-viewer
v0.2.6
Published
Vue component to view 3D-Models in .gltf-format
Downloads
13
Keywords
Readme
gltf-viewer
A Vue component to view GLTF-3D-Models, incl. OrbitControls and v-model position
Installation
npm i @twoavy/gltf-viewer
OR
yarn add @twoavy/gltf-viewer
import GltfViewer from 'gltf-viewer';
Usage
Once installed, it can be used in a template as simply as:
<gltf-viewer url="path/to/model.gltf"
:options="options"
:points="points"
@point-clicked="onClick($event)"/>
or with multiple Models:
<gltf-viewer :urls="['path/to/model1.gltf', 'path/to/model2.gltf']"
@object-loaded="onLoaded" />
Options
{
bgColor: 0xcccccc,
maxClickAngle: 25,
lights: {
exposure: 1.0,
textureEncoding: 'sRGB',
ambientIntensity: 0.3,
ambientColor: 0xFFFFFF,
directIntensity: 0.8 * Math.PI,
directColor: 0xFFFFFF
},
controls: {
enabled: true,
minPolarAngle: 0,
maxPolarAngle: Math.PI,
minAzimuthAngle: -Infinity,
maxAzimuthAngle: Infinity,
minDistance: 0,
maxDistance: Infinity,
autoRotate: false,
autoRotateSpeed: -10,
enableZoom: true,
zoom: 1 // note that zoom and min/max distance affect each other!
}
}
Points
[
{
id: 0,
position: { x: 1, y: 1, z: 1 },
rotation: { x: 0, y: 0, z: 0 },
// payload can be anything (e.g. target camera position)
payload: {
x: -0.9,
y: 0.5,
z: -1.1
}
},
{
id: 1,
position: { x: 2, y: 4, z: -1 },
rotation: { x: 1, y: 2, z: 0 },
// payload can be anything
payload: {
x: -0.9,
y: 0.5,
z: -1.1
}
}
]
v-model
Animate positoin with e.g. Greensock:
<gltf-viewer url="path/to/model.gltf"
v-model="position" />
data() {
return {
position: {}
}
},
methods: {
tweenPosition() {
let formPos = { ...this.position }
let targetPos = { x: 1, y: 2, z: 3 }
TweenLite.to(fromPos, 0.6, {
...targetPos,
onUpdate: () => {
this.position = fromPos
}
})
}
}
Note that you cannot change the camera position via v-model if autoRotate is true!
Events
Name | Payload :--- | :---: start-drag | - end-drag | - point-clicked | Point object-loadad | { url: String, gltf: Object }
Point
Propery | Type | Default :--- | :---: | ---: id | Number | - position | Object | { x: 0, y: 0, z: 0 } rotation | Object | null color | Hex | 0xffffff opacity | Number | 0.5 radius | Number | 0.1 scale | Number | 0.5 object | Object | null onClick | Function | null payload | any | null doubleSide | Boolean | true