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

Clean up Mockup Class and update README

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-02-02 00:22:48 +03:00
parent e019b038ff
commit 397d6505de
3 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
README.md
View File

@@ -11,12 +11,11 @@ $ npm install vue-three-d-mockup
## Usage
```html
<Mockup
screen="screen.png"
/>
<Mockup screen="screen.png" />
```
#### Use as an async component (the 3d model is quite large so this provides a significant performance boost):
```js
<script>
import { defineAsyncComponent } from 'vue';
@@ -30,6 +29,7 @@ export default {
```
#### Or normally:
```js
<script>
import Mockup from 'vue-three-d-mockup';
@@ -42,21 +42,22 @@ export default {
</script>
```
| 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. |
| 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 `<video>` 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 `<video>`
element is hidden with `display: none`, so use `visibility: hidden`
instead.
- 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.
- The video may not be autoplaying if the original `<video>` element
is scrolled off screen.
is scrolled off screen.

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

@@ -3,6 +3,12 @@ import * as THREE from 'three';
import { Group, Vector3, Shape, ShapeBufferGeometry } from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
function xyz(target, source) {
target.x = source.x;
target.y = source.y;
target.z = source.z;
}
class MockupModel extends Group {
constructor(home) {
super();
@@ -16,13 +22,8 @@ class MockupModel extends Group {
}
reset() {
this.position.x = this.home.position.x;
this.position.y = this.home.position.y;
this.position.z = this.home.position.z;
this.rotation.x = this.home.rotation.x;
this.rotation.y = this.home.rotation.y;
this.rotation.z = this.home.rotation.z;
xyz(this.position, this.home.position);
xyz(this.rotation, this.home.rotation);
this.speed = {
x: 0,

15
src/MockupModel.js
View File

@@ -1,5 +1,11 @@
import { Group, Vector3 } from 'three';
function xyz(target, source) {
target.x = source.x;
target.y = source.y;
target.z = source.z;
}
export default class MockupModel extends Group {
constructor(home) {
super();
@@ -13,13 +19,8 @@ export default class MockupModel extends Group {
}
reset() {
this.position.x = this.home.position.x;
this.position.y = this.home.position.y;
this.position.z = this.home.position.z;
this.rotation.x = this.home.rotation.x;
this.rotation.y = this.home.rotation.y;
this.rotation.z = this.home.rotation.z;
xyz(this.position, this.home.position);
xyz(this.rotation, this.home.rotation);
this.speed = {
x: 0,