anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 04:45:09 +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.

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

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

4
src/Demo.vue
View File

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

11
src/Mockup.vue
View File

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