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

Passing necessarry stuff to phone init

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-02-01 18:00:22 +03:00
parent 062d143a33
commit da73dd522a
2 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,13 +139,13 @@ var script = {
type: String,
default: 'white',
},
position: {
type: Object,
default: () => ({}),
},
rotation: {
type: Object,
default: () => ({
x: -0.2,
y: 0.3,
z: 0.06,
}),
default: () => ({}),
},
},
setup(props) {
@@ -171,7 +171,7 @@ var script = {
camera.position.set(0, 0, 200);
};
const phoneInit = () => {
const phoneInit = (screenSrc, home) => {
const screenInit = () => {
const scale = 6;
const width = scale * 9; const height = scale * 19.3;
@@ -182,11 +182,11 @@ var script = {
let texture;
if (typeof props.screen === 'string') {
if (typeof screenSrc === 'string') {
const loader = new THREE.TextureLoader();
texture = loader.load(props.screen);
texture = loader.load(screenSrc);
} else {
texture = new THREE.VideoTexture(props.screen);
texture = new THREE.VideoTexture(screenSrc);
}
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
@@ -241,8 +241,14 @@ var script = {
x: 0,
y: 0,
z: 0,
...home.position,
},
rotation: {
x: -0.2,
y: 0.3,
z: 0.06,
...home.rotation,
},
rotation: props.rotation,
});
phone.startFloat();
scene.add(phone);
@@ -254,7 +260,7 @@ var script = {
renderer.setSize(container.value.clientWidth, container.value.clientHeight);
environmentInit();
phoneInit();
phoneInit(props.screen, { position: props.position, rotation: props.rotation });
container.value.appendChild(renderer.domElement);
}

17
src/Mockup.vue
View File

@@ -30,6 +30,10 @@ export default {
type: String,
default: 'white',
},
position: {
type: Object,
default: () => ({}),
},
rotation: {
type: Object,
default: () => ({}),
@@ -58,7 +62,7 @@ export default {
camera.position.set(0, 0, 200);
};
const phoneInit = () => {
const phoneInit = (screenSrc, home) => {
const screenInit = () => {
const scale = 6;
const width = scale * 9; const height = scale * 19.3;
@@ -69,11 +73,11 @@ export default {
let texture;
if (typeof props.screen === 'string') {
if (typeof screenSrc === 'string') {
const loader = new THREE.TextureLoader();
texture = loader.load(props.screen);
texture = loader.load(screenSrc);
} else {
texture = new THREE.VideoTexture(props.screen);
texture = new THREE.VideoTexture(screenSrc);
}
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
@@ -128,12 +132,13 @@ export default {
x: 0,
y: 0,
z: 0,
...home.position,
},
rotation: {
x: -0.2,
y: 0.3,
z: 0.06,
...props.rotation,
...home.rotation,
},
});
phone.startFloat();
@@ -146,7 +151,7 @@ export default {
renderer.setSize(container.value.clientWidth, container.value.clientHeight);
environmentInit();
phoneInit();
phoneInit(props.screen, { position: props.position, rotation: props.rotation });
container.value.appendChild(renderer.domElement);
}