New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

vue-3d-model

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-3d-model

3D models viewer with vue.js

1.4.1
latest
npm

Version published: 3 years ago

Weekly downloads: 550; increased by13.17%

Maintainers: 1

Weekly downloads

Created: 8 years ago

Source

vue-3d-model

vue.js 3D model viewer component, based on threejs, inspired by model-tag

一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。

Example

DEMO

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>

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

Keywords

FAQs

What is vue-3d-model?

Is vue-3d-model popular?

Is vue-3d-model well maintained?

Package last updated on 15 Aug 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install