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.