https://github.com/anatolykopyl/vue-three-d-mockup

📱 A 3D phone mockup component to showcase your apps
https://github.com/anatolykopyl/vue-three-d-mockup

design mockup mockup-generator threejs vue

Last synced: about 2 months ago
JSON representation

📱 A 3D phone mockup component to showcase your apps

• Host: GitHub
• URL: https://github.com/anatolykopyl/vue-three-d-mockup
• Owner: anatolykopyl
• License: gpl-3.0
• Created: 2022-01-29T10:19:24.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-02-17T20:52:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-17T03:45:17.154Z (4 months ago)
• Topics: design, mockup, mockup-generator, threejs, vue
• Language: JavaScript
• Homepage: https://anatolykopyl.github.io/vue-three-d-mockup/
• Size: 27.2 MB
• Stars: 36
• Watchers: 3
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-three-d-mockup

Check out the [docs](https://anatolykopyl.github.io/vue-three-d-mockup/)

## Installation

```

$ npm install vue-three-d-mockup

```

## Usage

```html

```

#### Use as an async component (the 3d model is quite large so this provides a significant performance boost):

```js

import { defineAsyncComponent } from 'vue';

export default {

  components: {

    Mockup: defineAsyncComponent(() => import('vue-three-d-mockup')),

  }

}

```

#### Or normally:

```js

import Mockup from 'vue-three-d-mockup';

export default {

  components: {

    Mockup

  }

}

```

| 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 `` 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](src/Demo.vue) to see an example of how

  to do this.

- The video on the model will not be shown if the original ``

  element is hidden with `display: none`, so use `visibility: hidden`

  instead.

- The video may not be autoplaying if the original `` element

  is scrolled off screen.