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'

Features

• Built for Ethereum using Web3.
• Implements Graph Protocol to read blockchain.

Changelog

2022.02.25

v1.0.0 * init model-viewer Vue Component