npm package: 3d-model-preview
Description: 3d model preview base on vue-3d-model
Author: Jeffrey Wang
Latest version: 0.0.1

# vue-3d-model

展示3d模型的组件，基于 MIT 开源协议的 [vue-3d-model](https://github.com/hujiulong/vue-3d-model) 功能增强

功能正在研发中，部分功能并未完工


增强功能包括

- 可选更多的控制器，TrackballControls
- 可自动优化模型定位，可设置默认展示角度
- 可选更多的相机，比如视差相机（适用移动端）
- 更强的展示效果，比如 FXAA减少锯齿
- 消灭了一些bug，比如 Z-flating 问题等
- 可选 线框、着色、线框着色 三种展示模式
- 可配置模型展示背景
- 可重置模型摆放
- 模型加载loading icon
- 新增更多的模型类型支持 ctm/fbx

## Example

## Install
using npm
```
npm install 3d-preview-model --save
```
Or using script tag for global use
```html
```

## Usage

## Documents

### props
| prop            | type          | default              |  example                                   |
| --------------- |---------------|----------------------|--------------------------------------------|  
| src             | string        | -                    | './exapmle.obj'                            |
| width           | number        | -                    | 300                                        |
| height          | number        | -                    | 300                                        |
| env          | string        | -                    | static/texture/Temp/                                        |
| 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                  |
| gammaOutput     | boolean       | false                | true/false                                 |
| 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           | \<model-obj>      |
| json          | \<model-three>    |
| stl           | \<model-stl>      |
| dae           | \<model-collada>  |
| ply           | \<model-ply>      |
| gltf(2.0)     | \<model-gltf>     |
| ctm     | \<model-ctm>     |
| fbx     | \<model-fbx>     |

## Browser Support
Modern browsers and IE 11.

You can click on [this](http://caniuse.com/#search=webgl) for more information. 

## LICENSE
MIT