# vue-3d-model

Version Build License 996.icu

vue.js 3D model viewer component, based on threejs, inspired by [model-tag](https://github.com/mrdoob/model-tag) 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。

## Example [DEMO](https://hujiulong.github.io/vue-3d-model/#/demo-basic) ## Install using npm ``` npm install vue-3d-model --save ``` Or using script tag for global use ```html ``` Or Download vue-3d-model.js and include it in your html ## Usage ```vue ``` Or ```vue
``` ## Documents ### 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 Properties](https://threejs.org/docs/#examples/en/controls/OrbitControls) | | crossOrigin | string | anonymous | anonymous/use-credentials | | requestHeader | object | - | { 'Authorization: Bearer token' } | | outputEncoding | number | THREE.LinearEncoding | see [WebGLRenderer OutputEncoding](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.outputEncoding) | | glOptions | object | { antialias: true, alpha: true } | see [WebGLRenderer Parameters](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer) | ### events | event | | ------------- | | on-mousedown | | on-mousemove | | on-mouseup | | on-click | | on-load | | on-progress | | on-error | ## Model Format Support | model format | component tag | | ------------- |-------------------| | obj | \ | | json | \ | | stl | \ | | dae | \ | | ply | \ | | fbx | \ | | gltf(2.0) | \ | ## Browser Support Modern browsers and IE 11. You can click on [this](http://caniuse.com/#search=webgl) for more information. ## TODO List * Support for more model formats * Animation * Post-processing ## LICENSE MIT