Skip to content

anatolykopyl/vue-three-d-mockup

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

57 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.