mirror of
https://github.com/anatolykopyl/vue-three-d-mockup.git
synced 2026-03-26 12:55:08 +00:00
49 lines
838 B
Markdown
49 lines
838 B
Markdown
# vue-three-d-mockup
|
|
|
|
Check out the [demo](https://anatolykopyl.github.io/vue-three-d-mockup/)
|
|
|
|
## Installation
|
|
|
|
```
|
|
$ npm install github:anatolykopyl/vue-three-d-mockup
|
|
```
|
|
|
|
## Usage
|
|
|
|
```html
|
|
<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):
|
|
```js
|
|
<script>
|
|
import { defineAsyncComponent } from 'vue';
|
|
|
|
export default {
|
|
components: {
|
|
Mockup: defineAsyncComponent(() => import('vue-three-d-mockup')),
|
|
}
|
|
}
|
|
</script>
|
|
```
|
|
|
|
#### Or normally:
|
|
```js
|
|
<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
|