vue-3d-model




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

Example
DEMOInstall
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
$3
| 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 |
| crossOrigin | string | anonymous | anonymous/use-credentials |
| requestHeader | object | - | { 'Authorization: Bearer token' } |
| outputEncoding | number | THREE.LinearEncoding | see
WebGLRenderer OutputEncoding |
| glOptions | object | { antialias: true, alpha: true } | see
WebGLRenderer Parameters |
$3
| 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 for more information.
TODO List
* Support for more model formats
* Animation
* Post-processingLICENSE
MIT