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

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 ## Usage
```html ```html
<Mockup <Mockup screen="screen.png" />
screen="screen.png"
/>
``` ```
#### Use as an async component (the 3d model is quite large so this provides a significant performance boost): #### Use as an async component (the 3d model is quite large so this provides a significant performance boost):
```js ```js
<script> <script>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
@@ -30,6 +29,7 @@ export default {
``` ```
#### Or normally: #### Or normally:
```js ```js
<script> <script>
import Mockup from 'vue-three-d-mockup'; import Mockup from 'vue-three-d-mockup';
@@ -42,21 +42,22 @@ export default {
</script> </script>
``` ```
| Prop | Type | Required | Default | Description | | 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. | | `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. | | `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. | | `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. | | `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: ### Caveats:
- The `screen` prop is unreactive, so when using it as a video - The `screen` prop is unreactive, so when using it as a video
it's important to only render the `Mockup` element when the 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 is loaded. Check out [Demo.vue](src/Demo.vue) to see an example of how
to do this. 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.
- The video may not be autoplaying if the original `<video>` element - 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 { Group, Vector3, Shape, ShapeBufferGeometry } from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; 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 { class MockupModel extends Group {
constructor(home) { constructor(home) {
super(); super();
@@ -16,13 +22,8 @@ class MockupModel extends Group {
} }
reset() { reset() {
this.position.x = this.home.position.x; xyz(this.position, this.home.position);
this.position.y = this.home.position.y; xyz(this.rotation, this.home.rotation);
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;
this.speed = { this.speed = {
x: 0, x: 0,

15
src/MockupModel.js
View File

@@ -1,5 +1,11 @@
import { Group, Vector3 } from 'three'; 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 { export default class MockupModel extends Group {
constructor(home) { constructor(home) {
super(); super();
@@ -13,13 +19,8 @@ export default class MockupModel extends Group {
} }
reset() { reset() {
this.position.x = this.home.position.x; xyz(this.position, this.home.position);
this.position.y = this.home.position.y; xyz(this.rotation, this.home.rotation);
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;
this.speed = { this.speed = {
x: 0, x: 0,