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	<model-obj>
json	<model-three>
stl	<model-stl>
dae	<model-collada>
ply	<model-ply>
fbx	<model-fbx>
gltf(2.0)	<model-gltf>

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

Name		Name	Last commit message	Last commit date
Latest commit History 239 Commits
.github		.github
examples		examples
public		public
scripts		scripts
src		src
tests/unit		tests/unit
.browserslistrc		.browserslistrc
.editorconfig		.editorconfig
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
jest.config.js		jest.config.js
package.json		package.json
postcss.config.js		postcss.config.js
preview.gif		preview.gif
vue.config.js		vue.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

vue-3d-model

Example

Install

Usage

Documents

props

events

Model Format Support

Browser Support

TODO List

LICENSE

About

Uh oh!

Releases 15

Packages

Uh oh!

Uh oh!

Contributors 12

Uh oh!

Languages

License

hujiulong/vue-3d-model

Folders and files

Latest commit

History

Repository files navigation

vue-3d-model

Example

Install

Usage

Documents

props

events

Model Format Support

Browser Support

TODO List

LICENSE

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 15

Packages 0

Uh oh!

Uh oh!

Contributors 12

Uh oh!

Languages

Packages