vue-three-d-mockup

Check out the demo

Installation

$ npm install github:anatolykopyl/vue-three-d-mockup

Usage

<Mockup 
  screenImg="screen.png"
/>

Use as an async component (the 3d model is quite large so this provides a significant performance boost):

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    Mockup: defineAsyncComponent(() => import('vue-three-d-mockup')),
  }
}
</script>

Or normally:

<script>
import Mockup from 'vue-three-d-mockup';

export default {
  components: {
    Mockup
  }
}
</script>

props:

  • screenImg: path to image that will be displayed on the phones screen
  • video: the video element displayed on the phones screen. When using this option there are caveats, watch below
  • lightClr: color of the light
  • phoneClr: color of the phone
  • rotation: object with x, y and z rotation values

Caveats:

  • The video prop is unreactive, so when using it it’s important to
    only render the Mockup element when the video is loaded. Check out
    Demo.vue to see an example of how to do this.
  • The video on the model will not be shown if the original <video>
    element is hidden with display: none, so use visibility: hidden
    instead.
  • The video may not be autoplaying if the original <video> element
    is scrolled off screen.

GitHub

View Github