mediaquad-three-component

3D models viewer component for Vue

This component is built on the Three.js library.

Features

• Support for files formats glb, stl, obj, dae, fbx, ply, 3dm, 3mf, gcode, kmz, lwo, drc
• Make images by request
• Shadows

Installation

npm  i  mediaquad-three-component

Usage

Import component

import { ThreePlayer } from  'mediaquad-three-component'

Usage component

<ThreePlayer ref="threePlayer" :background-color="bgcolor" :model-url="modelUrl" :auto-rotate="autoRotate" :show-grid="showGrid" :show-shadow="showShadows">

Props Reference

interface Props {
    modelUrl: string;
    backgroundColor: string;
    autoRotate: boolean;
    showGrid: boolean;
    showShadow: boolean;
}

Example of App.vue

<template>  
    <div style="padding: 0.5rem; column-gap: 0.5rem; display: flex; align-items: center;">
      Background <input type="color" v-model="bgcolor" />
      Autorotate <input type="checkbox" v-model="autoRotate" />
      Grid <input type="checkbox" v-model="showGrid" />
      Shadows <input type="checkbox" v-model="showShadows" />
      <button @click="doScreenshot">Make screenshot</button>
    </div>
  <div style="width: 500px; height: 500px; position: relative;">        
    <ThreePlayer ref="threePlayer" :background-color="bgcolor" :model-url="modelUrl" :auto-rotate="autoRotate" :show-grid="showGrid" :show-shadow="showShadows" />
  </div>
</template>


<script lang="ts">
import { defineComponent } from 'vue'
import ThreePlayer from './components/ThreePlayer.vue'

export default defineComponent({
  components: {
    ThreePlayer
  },
  setup() {
    return {
    }
  },
  data(){
    return {
      bgcolor: '#DDDDDD',
      autoRotate: false,
      showGrid:true,
      showShadows: true,
      modelUrl: "https://threejs.org/examples/models/gltf/SheenChair.glb"

    }
  },
  methods: {
    doScreenshot() {
      const dataURL = (this.$refs as any).threePlayer.getScreenshot(1024,1024)
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'scene-highres.png';
      link.click();
    }
  }
})
</script>