vue-3d-model
Version:
3D models viewer with vue.js
121 lines (102 loc) • 4.68 kB
Markdown
# vue-3d-model
<p align="center">
<a href="https://www.npmjs.com/package/vue-3d-model"><img src="https://img.shields.io/npm/v/vue-3d-model.svg" alt="Version"></a>
<a href="https://travis-ci.org/hujiulong/vue-3d-model"><img src="https://travis-ci.org/hujiulong/vue-3d-model.svg?branch=master" alt="Build"></a>
<a href="https://www.npmjs.com/package/vue-3d-model"><img src="https://img.shields.io/npm/l/vue-3d-model.svg" alt="License"></a>
<a href="https://996.icu"><img src="https://img.shields.io/badge/link-996.icu-red.svg" alt="996.icu"></a>
</p>
vue.js 3D model viewer component, based on threejs, inspired by [model-tag](https://github.com/mrdoob/model-tag)
一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。
<p align="center">
<img src="./preview.gif">
</p>
## 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
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
```
Or Download <a href="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js">vue-3d-model.js</a> and include it in your html
## Usage
```vue
<template>
<model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</template>
<script>
import { ModelObj } from 'vue-3d-model';
export default {
components: { ModelObj }
}
</script>
```
Or
```vue
<html>
<head>
<meta charset="UTF-8"></head>
<body>
<div id="app">
<model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj>
</div>
<script src="vue.js"></script>
<script src="vue-3d-model.js"></script>
<script>
new Vue({ el: '#app' });
</script>
</body>
```
## 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 | \<model-obj> |
| json | \<model-three> |
| stl | \<model-stl> |
| dae | \<model-collada> |
| ply | \<model-ply> |
| fbx | \<model-fbx> |
| gltf(2.0) | \<model-gltf> |
## 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