@elzone/vue-3d-model-extend NPM

vue-3d-model-extend

a fork from vue-3d-model

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

Install

using npm

npm install @elzone/vue-3d-model-extend --save

Or using script tag for global use

<script src="https://unpkg.com/@elzone/vue-3d-model-extend/dist/vue-3d-model-extend.umd.js"></script>

Or Download @elzone/vue-3d-model-extend.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-extend';
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-extend.umd.js"></script>
<script>
  new Vue({ el: '#app' });
</script>
</body>

in some cases (if project has been created without vue-cli) please try to include link to lib into webpack babel-loader section, like:

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test'), resolve('node_modules/@elzone/vue-3d-model-extend/dist')]
}

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 }
cameraQuaternion	object	{ x: 0, y: 0, z: 0, w: 0 }	{ x: 2, y: 3, z: 0, w: -0.4 }
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