anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 12:55:08 +00:00
Code Issues Projects Releases Wiki Activity

Single screen prop

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-01-30 13:21:12 +03:00
parent 7e7335ef7c
commit e180ca28b5
4 changed files with 21 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@@ -12,7 +12,7 @@ $ npm install github:anatolykopyl/vue-three-d-mockup
```html
<Mockup
screenImg="screen.png"
screen="screen.png"
/>
```
@@ -42,19 +42,19 @@ export default {
</script>
```
### props:
- `screenImg`: path to image that will be displayed on the phones screen
- `video`: the video element displayed on the phones screen. When using this option there are caveats, watch below
- `lightClr`: color of the light
- `phoneClr`: color of the phone
- `rotation`: object with x, y and z rotation values
| Prop | Type | Required | Default | Description |
|------------|--------------------|----------|--------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `screen` | String \| Element | `true` | none | Path 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. |
| `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. |
| `rotation` | Object | `false` | `{ x: -0.2, y: 0.3, z: 0.06 }` | The orientation of the phone described in rotation values arround the 3 axes. |
### Caveats:
- The `video` prop is unreactive, so when using it 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 `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 `<video>`
element is hidden with `display: none`, so use `visibility: hidden`
instead.