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 ```html
<Mockup <Mockup
screenImg="screen.png" screen="screen.png"
/> />
``` ```
@@ -42,19 +42,19 @@ export default {
</script> </script>
``` ```
### props: | Prop | Type | Required | Default | Description |
|------------|--------------------|----------|--------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
- `screenImg`: path to image that will be displayed on the phones screen | `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. |
- `video`: the video element displayed on the phones screen. When using this option there are caveats, watch below | `lightClr` | String | `false` | `"white"` | Color of the light as a CSS-style string. |
- `lightClr`: color of the light | `phoneClr` | String | `false` | `"white"` | Color of the phone as a CSS-style string. |
- `phoneClr`: color of the phone | `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. |
- `rotation`: object with x, y and z rotation values
### Caveats: ### Caveats:
- The `video` prop is unreactive, so when using it it's important to - The `screen` prop is unreactive, so when using it as a video
only render the `Mockup` element when the video is loaded. Check out it's important to only render the `Mockup` element when the video
[Demo.vue](src/Demo.vue) to see an example of how to do this. 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>` - The video on the model will not be shown if the original `<video>`
element is hidden with `display: none`, so use `visibility: hidden` element is hidden with `display: none`, so use `visibility: hidden`
instead. instead.

11
bundle/vue-three-d-mockup.esm.js
View File

@@ -128,10 +128,7 @@ var phoneObj = "data:model/obj;base64,IyAzZHMgTWF4IFdhdmVmcm9udCBPQkogRXhwb3J0ZX
var script = { var script = {
name: 'Mockup', name: 'Mockup',
props: { props: {
screenImg: { screen: {
type: String,
},
video: {
type: null, type: null,
}, },
lightClr: { lightClr: {
@@ -185,11 +182,11 @@ var script = {
let texture; let texture;
if (props.screenImg) { if (typeof props.screen === 'string') {
const loader = new THREE.TextureLoader(); const loader = new THREE.TextureLoader();
texture = loader.load(props.screenImg); texture = loader.load(props.screen);
} else { } else {
texture = new THREE.VideoTexture(props.video); texture = new THREE.VideoTexture(props.screen);
} }
texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); texture.anisotropy = renderer.capabilities.getMaxAnisotropy();

4
src/Demo.vue
View File

@@ -7,11 +7,11 @@
<Mockup <Mockup
v-if="vidReady" v-if="vidReady"
class="mockup" class="mockup"
:video="$refs.video" :screen="$refs.video"
/> />
<Mockup <Mockup
class="mockup" class="mockup"
screenImg="screen.png" screen="screen.png"
:rotation="{ :rotation="{
x: -0.2, x: -0.2,
y: -0.3, y: -0.3,

11
src/Mockup.vue
View File

@@ -19,10 +19,7 @@ import phoneObj from './assets/iphone.obj';
export default { export default {
name: 'Mockup', name: 'Mockup',
props: { props: {
screenImg: { screen: {
type: String,
},
video: {
type: null, type: null,
}, },
lightClr: { lightClr: {
@@ -76,11 +73,11 @@ export default {
let texture; let texture;
if (props.screenImg) { if (typeof props.screen === 'string') {
const loader = new THREE.TextureLoader(); const loader = new THREE.TextureLoader();
texture = loader.load(props.screenImg); texture = loader.load(props.screen);
} else { } else {
texture = new THREE.VideoTexture(props.video); texture = new THREE.VideoTexture(props.screen);
} }
texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); texture.anisotropy = renderer.capabilities.getMaxAnisotropy();