vue-three-d-mockup

Check out the demo

Installation

$ npm install github:anatolykopyl/vue-three-d-mockup

Usage

<Mockup 
  screenImg="screen.png"
  lightClr="hsl(0, 100%, 100%)"
/>

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
• lightClr: color of the light in the environment
• phoneClr: color of the phone