3D model viewer component, based on threejs, is inspired by the model tag. Vue component that renders a 3D model, supports model operations and model click events, can automatically resize the model to an appropriate size and correct offset, and supports multiple model formats.
How to make use of it:
Install and download:
npm install vue-3d-model --save
Or using the script tag for global use.
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
Usage
<template>
<model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</template>
<script>
import { ModelObj } from 'vue-3d-model';
export default {
components: { ModelObj }
}
</script>API
Props
| prop | type | default | example |
|---|---|---|---|
| src | string | – | ‘./exapmle.obj’ |
| width | number | – | 300 |
| height | number | – | 300 |
| position | object | { x: 0, y: 0, z: 0 } | { x: 100, y: 20, z: -10 } |
| rotation | object | { x: 0, y: 0, z: 0 } | { x: Math.PI / 2, y: 0, z: – Math.PI / 4 } |
| cameraPosition | object | { x: 0, y: 0, z: 0 } | { x: 1, y: 2, z: -3 } |
| cameraRotation | object | { x: 0, y: 0, z: 0 } | { x: 3, y: 2, z: -1 } |
| scale | object | { x: 1, y: 1, z: 1 } | { x: 2, y: 2, z: 3 } |
| lights | array | – | |
| backgroundColor | number/string | 0xffffff | 0xffffff/’#f00’/’rgb(255,255,255)’ |
| backgroundAlpha | number | 1 | 0.5 |
| controlsOptions | object | – | see OrbitControls Propertiesopen in a new window |
| crossOrigin | string | anonymous | anonymous/use-credentials |
| requestHeader | object | – | { ‘Authorization: Bearer token’ } |
| outputEncoding | number | THREE.LinearEncoding | see WebGLRenderer OutputEncodingopen in new window |
| glOptions | object | { antialias: true, alpha: true } | see WebGLRenderer Parametersopen in new window |
Events
| event |
|---|
| mousedown |
| mousemove |
| mouseup |
| click |
| load |
| progress |
| error |
Slots
| slots |
|---|
| progress-bar |
| poster |
See Demo And Download
Official Website(hujiulong): Click Here
This superior jQuery/javascript plugin is developed by hujiulong. For extra Advanced usage, please go to the official website.
