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.