|
7 | 7 | <a href="https://996.icu"><img src="https://img.shields.io/badge/link-996.icu-red.svg" alt="996.icu"></a> |
8 | 8 | </p> |
9 | 9 |
|
10 | | -vue.js 3D model viewer component, based on threejs, inspired by [model-tag](https://github.com/mrdoob/model-tag) |
11 | | - |
12 | | -一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。 |
| 10 | +A Vue 3 3D model viewer component, based on threejs, inspired by [model-tag](https://github.com/mrdoob/model-tag) |
13 | 11 |
|
14 | 12 | <p align="center"> |
15 | 13 | <img src="./preview.gif"> |
16 | 14 | </p> |
17 | 15 |
|
18 | | -## Example |
19 | | -[DEMO](https://hujiulong.github.io/vue-3d-model/#/demo-basic) |
20 | | - |
21 | | -## Install |
22 | | -using npm |
23 | | -``` |
24 | | -npm install vue-3d-model --save |
25 | | -``` |
26 | | -Or using script tag for global use |
27 | | -```html |
28 | | -<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script> |
29 | | -``` |
30 | | - |
31 | | -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 |
32 | | - |
33 | | -## Usage |
34 | | - |
35 | | -```vue |
36 | | -<template> |
37 | | - <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj> |
38 | | -</template> |
39 | | -<script> |
40 | | -import { ModelObj } from 'vue-3d-model'; |
41 | | -export default { |
42 | | - components: { ModelObj } |
43 | | -} |
44 | | -</script> |
45 | | -``` |
46 | | -Or |
47 | | -```vue |
48 | | -<!DOCTYPE html> |
49 | | -<html> |
50 | | -<head> |
51 | | - <meta charset="UTF-8"></head> |
52 | | -<body> |
53 | | - <div id="app"> |
54 | | - <model-obj src="example/models/obj/LeePerrySmith.obj"></model-obj> |
55 | | - </div> |
56 | | -<script src="vue.js"></script> |
57 | | -<script src="vue-3d-model.js"></script> |
58 | | -<script> |
59 | | - new Vue({ el: '#app' }); |
60 | | -</script> |
61 | | -</body> |
62 | | -``` |
63 | | - |
64 | | -## Documents |
65 | | - |
66 | | -### props |
67 | | -| prop | type | default | example | |
68 | | -| --------------- |---------------|----------------------|--------------------------------------------| |
69 | | -| src | string | - | './exapmle.obj' | |
70 | | -| width | number | - | 300 | |
71 | | -| height | number | - | 300 | |
72 | | -| position | object | { x: 0, y: 0, z: 0 } | { x: 100, y: 20, z: -10 } | |
73 | | -| rotation | object | { x: 0, y: 0, z: 0 } | { x: Math.PI / 2, y: 0, z: - Math.PI / 4 } | |
74 | | -| cameraPosition | object | { x: 0, y: 0, z: 0 } | { x: 1, y: 2, z: -3 } | |
75 | | -| cameraRotation | object | { x: 0, y: 0, z: 0 } | { x: 3, y: 2, z: -1 } | |
76 | | -| scale | object | { x: 1, y: 1, z: 1 } | { x: 2, y: 2, z: 3 } | |
77 | | -| lights | array | - | | |
78 | | -| backgroundColor | number/string | 0xffffff | 0xffffff/'#f00'/'rgb(255,255,255)' | |
79 | | -| backgroundAlpha | number | 1 | 0.5 | |
80 | | -| controlsOptions | object | - | see [OrbitControls Properties](https://threejs.org/docs/#examples/en/controls/OrbitControls) | |
81 | | -| crossOrigin | string | anonymous | anonymous/use-credentials | |
82 | | -| requestHeader | object | - | { 'Authorization: Bearer token' } | |
83 | | -| outputEncoding | number | THREE.LinearEncoding | see [WebGLRenderer OutputEncoding](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer.outputEncoding) | |
84 | | -| glOptions | object | { antialias: true, alpha: true } | see [WebGLRenderer Parameters](https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer) | |
85 | | - |
86 | | -### events |
87 | | - |
88 | | -| event | |
89 | | -| ------------- | |
90 | | -| on-mousedown | |
91 | | -| on-mousemove | |
92 | | -| on-mouseup | |
93 | | -| on-click | |
94 | | -| on-load | |
95 | | -| on-progress | |
96 | | -| on-error | |
97 | | - |
98 | | -## Model Format Support |
99 | | -| model format | component tag | |
100 | | -| ------------- |-------------------| |
101 | | -| obj | \<model-obj> | |
102 | | -| json | \<model-three> | |
103 | | -| stl | \<model-stl> | |
104 | | -| dae | \<model-collada> | |
105 | | -| ply | \<model-ply> | |
106 | | -| fbx | \<model-fbx> | |
107 | | -| gltf(2.0) | \<model-gltf> | |
108 | | - |
109 | | -## Browser Support |
110 | | -Modern browsers and IE 11. |
111 | | - |
112 | | -You can click on [this](http://caniuse.com/#search=webgl) for more information. |
| 16 | +For Vue 2.x, please check the [v1 branch](https://github.com/hujiulong/vue-3d-model/tree/v1). |
113 | 17 |
|
114 | | -## TODO List |
115 | | -* Support for more model formats |
116 | | -* Animation |
117 | | -* Post-processing |
| 18 | +## [Document](https://hujiulong.github.io/vue-3d-model/) |
118 | 19 |
|
119 | 20 | ## LICENSE |
120 | 21 | MIT |
0 commit comments