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

17
src/Mockup.vue
View File

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