# 3d-model-preview

> 3d model preview base on vue-3d-model

Latest version **0.0.1** (published 2020-04-15) · 0 weekly downloads

## Install

```sh
npm install 3d-model-preview
pnpm add 3d-model-preview
yarn add 3d-model-preview
bun add 3d-model-preview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-04-15 |
| First published | 2020-04-08 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 352.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Jeffrey Wang |
| Maintainers | wangerzi |
| Keywords | vue, three.js, component |

## Links

- npm: https://www.npmjs.com/package/3d-model-preview
- npm.io page: https://npm.io/package/3d-model-preview

## Dependencies (1)

- [three](https://npm.io/package/three.md) ^0.112.0

## Recent versions

- 0.0.1 (latest) — 2020-04-15
- 1.0.1 — 2020-04-15
- 1.0.0 — 2020-04-08

## README

# 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

---
_Source: https://npm.io/package/3d-model-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._