vue-three-d-mockup

Check out the docs

Installation

$ npm install vue-three-d-mockup

Usage

<Mockup screen="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>

| Prop | Type | Required | Default | Description | | ---------- | -------------------------- | -------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | screen | String | Element | Array | true | none | Path to an image that will be displayed on the phones screen or the <video> element displayed on the phones screen. When using the latter there are caveats, see below. Can also be an array of any of the options above. | | lightClr | String | false | "white" | Color of the light as a CSS-style string. | | phoneClr | String | false | "white" | Color of the phone as a CSS-style string. | | position | Object | Array | false | { x: 0, y: 0, z: 0 } | The position of the phone. Can also be an array if multiple screens specified. | | | rotation | Object | Array | false | { x: -0.2, y: 0.3, z: 0.06 } | The orientation of the phone described in rotation values arround the 3 axes. Can also be an array if multiple screens specified. |

Caveats:

• The screen prop is unreactive, so when using it as a video 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.