0.0.1 • Published 4 years ago
3d-model-preview v0.0.1
vue-3d-model
展示3d模型的组件，基于 MIT 开源协议的 vue-3d-model 功能增强
功能正在研发中，部分功能并未完工
增强功能包括
- 可选更多的控制器，TrackballControls
- 可自动优化模型定位，可设置默认展示角度
- 可选更多的相机，比如视差相机（适用移动端）
- 更强的展示效果，比如 FXAA减少锯齿
- 消灭了一些bug，比如 Z-flating 问题等
- 可选 线框、着色、线框着色 三种展示模式
- 可配置模型展示背景
- 可重置模型摆放
- 模型加载loading icon
- 新增更多的模型类型支持 ctm/fbx
Example
Install
using npm
npm install 3d-preview-model --saveOr using script tag for global use
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 |
| crossOrigin | string | anonymous | anonymous/use-credentials |
| gammaOutput | boolean | false | true/false |
| glOptions | object | { antialias: true, alpha: true } | see WebGLRenderer Parameters |
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 | \ |
| gltf(2.0) | \ |
| ctm | \ |
| fbx | \ |
Browser Support
Modern browsers and IE 11.
You can click on this for more information.
LICENSE
MIT