1.4.1 • Published 2 years ago
vue-3d-model v1.4.1
vue-3d-model
vue.js 3D model viewer component, based on threejs, inspired by model-tag
一个展示三维模型的Vue组件,支持模型操作和模型点击事件,能自动缩放模型到合适大小并校正偏移,支持多种格式的模型。
Example
Install
using npm
npm install vue-3d-model --save
Or using script tag for global use
<script src="https://unpkg.com/vue-3d-model/dist/vue-3d-model.umd.js"></script>
Or Download vue-3d-model.js and include it in your html
Usage
<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
<!DOCTYPE html>
<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 |
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 |
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 | \ |
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-processing
LICENSE
MIT
1.4.1
2 years ago
2.0.0-alpha.3
2 years ago
2.0.0-alpha.4
2 years ago
2.0.0-alpha.1
2 years ago
2.0.0-alpha.2
2 years ago
1.4.0
3 years ago
1.3.1
4 years ago
1.3.0
4 years ago
1.2.2
5 years ago
1.2.1
5 years ago
1.2.0
5 years ago
1.1.1
5 years ago
1.1.0-aplha.0
5 years ago
1.1.0
5 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago
0.0.2
7 years ago
0.0.1
7 years ago