@twoavy/gltf-viewer

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