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 --save

Or 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 | <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 for more information.

LICENSE

MIT