Vue-three-d-mockup NPM

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.