daudxu / vue-model-viewer Goto Github PK

View Code? Open in Web Editor NEW

🌱 🌱 🌱 Easily display interactive 3D models on the web & in AR

JavaScript 92.52% HTML 0.04% Vue 7.44%

vue-model-viewer's Introduction

model-viewer Vue Component

Preview

example

https://daudxu.github.io/vue-model-viewer/

Installation


npm install vue-model-viewer

Usage

1. /src/main.js

// Only supports vue3
import VueModelViewer from 'vue-model-viewer'
app.use(VueModelViewer);

2. page use

      <vue-model-viewer ref="modelViewerRef"
                        :viewWidth="viewWidth"
                        :viewHeight="viewHeight">
      </vue-model-viewer>

demo

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      Easily display interactive 3D models on the web & in AR
    </p>
    <button @click="handleClick">Click switch </button>
    <div style="display: flex;justify-content: center; margin-top: 20px;">

      <vue-model-viewer :modelAddress="modelAddress"
                        :poster="poster"
                        :viewWidth="viewWidth"
                        :viewHeight="viewHeight">
      </vue-model-viewer>
    </div>

  </div>
</template>

<script>
import poster from "../assets/logo.png";

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data () {
    return {
      modelAddress: '',
      viewWidth: '500px',
      viewHeight: '500px',
      poster: poster,
      listglb: [
        { 'url': './1.glb' },
        { 'url': './2.glb' },
        { 'url': './3.glb' }
      ]
    }
  },
  mounted () {
    this.handleClick()
  },
  methods: {
    handleClick () {
      let n = 3;
      let random_number = Math.floor(Math.random() * Math.floor(n));
      var urlads = this.listglb[random_number].url
      this.modelAddress = urlads
    },
  }
}
</script>

<style scoped>
button {
  height: 30px;
  background: #42b983;
  cursor: pointer;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Click to view example。

Options

configuration item	value type	description
modelAddress	String	model url Address
poster	String	model poster loading image
viewWidth	String	model width （unit： px,em,rem,vw ...）
viewHeight	String	model high （unit： px,em,rem,vh ...）
isAutoPlay	Boolean	isAutoPlay true or flase
isDisableZoom	Boolean	isDisableZoom true or flase
modelId	String	default 'viewer-display'
modelClass	String	default 'viewer-display'