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

Multiple mockups

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-02-01 18:40:34 +03:00
parent da73dd522a
commit a199fe86ff
3 changed files with 134 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -152,7 +152,7 @@ var script = {
const container = ref(null);
let camera;
let scene;
let phone;
const phones = [];
let renderer;
let mouseX = 0;
let mouseY = 0;
@@ -172,6 +172,21 @@ var script = {
};
const phoneInit = (screenSrc, home) => {
const phone = new MockupModel({
position: {
x: 0,
y: 0,
z: 0,
...home.position,
},
rotation: {
x: -0.2,
y: 0.3,
z: 0.06,
...home.rotation,
},
});
const screenInit = () => {
const scale = 6;
const width = scale * 9; const height = scale * 19.3;
@@ -236,31 +251,42 @@ var script = {
);
};
phone = new MockupModel({
position: {
x: 0,
y: 0,
z: 0,
...home.position,
},
rotation: {
x: -0.2,
y: 0.3,
z: 0.06,
...home.rotation,
},
});
phone.startFloat();
scene.add(phone);
screenInit();
bodyInit();
return phone;
};
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.value.clientWidth, container.value.clientHeight);
environmentInit();
phoneInit(props.screen, { position: props.position, rotation: props.rotation });
if (Array.isArray(props.screen)) {
for (let i = 0; i <= props.screen.length - 1; i += 1) {
phones.push(
phoneInit(
props.screen[i],
{
position: props.position[i],
rotation: props.rotation[i],
},
),
);
}
} else {
phones.push(
phoneInit(
props.screen,
{
position: props.position,
rotation: props.rotation,
},
),
);
}
container.value.appendChild(renderer.domElement);
}
@@ -273,23 +299,31 @@ var script = {
requestAnimationFrame(animate);
if (phone) {
phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
if (phones.length) {
phones.forEach((phone) => {
phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
});
}
renderer.render(scene, camera);
}
function handleMouseEnter() {
if (phone) {
phone.animation = phone.lookAtAnim;
phone.goingHome = false;
clearTimeout(phone.homeTimeout);
if (phones.length) {
phones.forEach((phone) => {
phone.animation = phone.lookAtAnim;
phone.goingHome = false;
clearTimeout(phone.homeTimeout);
});
}
}
function handleMouseLeave() {
if (phone) { phone.animation = phone.homeAnim; }
if (phones.length) {
phones.forEach((phone) => {
phone.animation = phone.homeAnim;
});
}
}
function handleMouseMove(event) {

43
src/Demo.vue
View File

@@ -3,22 +3,25 @@
<h1>
vue-three-d-mockup
</h1>
<div class="showcase">
<Mockup
v-if="vidReady"
class="mockup"
:screen="$refs.video"
/>
<Mockup
class="mockup"
:screen="require('./assets/screen.png')"
:rotation="{
y: -0.3,
z: -0.06,
}"
phoneClr="black"
/>
</div>
<Mockup
v-if="vidReady"
class="mockup"
:screen="[$refs.video, require('./assets/screen.png')]"
:position="[
{
x: -50
},
{
x: 50
},
]"
:rotation="[{}, {
y: -0.3,
z: -0.06,
}]"
phoneClr="black"
/>
<video
src="@/assets/screen.mp4"
@@ -67,14 +70,8 @@ video {
visibility: hidden;
}
.showcase {
display: flex;
justify-content: space-evenly;
}
.mockup {
width: 500px;
width: 800px;
height: 500px;
margin: auto;
}
</style>

80
src/Mockup.vue
View File

@@ -43,7 +43,7 @@ export default {
const container = ref(null);
let camera;
let scene;
let phone;
const phones = [];
let renderer;
let mouseX = 0;
let mouseY = 0;
@@ -63,6 +63,21 @@ export default {
};
const phoneInit = (screenSrc, home) => {
const phone = new MockupModel({
position: {
x: 0,
y: 0,
z: 0,
...home.position,
},
rotation: {
x: -0.2,
y: 0.3,
z: 0.06,
...home.rotation,
},
});
const screenInit = () => {
const scale = 6;
const width = scale * 9; const height = scale * 19.3;
@@ -127,31 +142,42 @@ export default {
);
};
phone = new MockupModel({
position: {
x: 0,
y: 0,
z: 0,
...home.position,
},
rotation: {
x: -0.2,
y: 0.3,
z: 0.06,
...home.rotation,
},
});
phone.startFloat();
scene.add(phone);
screenInit();
bodyInit();
return phone;
};
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.value.clientWidth, container.value.clientHeight);
environmentInit();
phoneInit(props.screen, { position: props.position, rotation: props.rotation });
if (Array.isArray(props.screen)) {
for (let i = 0; i <= props.screen.length - 1; i += 1) {
phones.push(
phoneInit(
props.screen[i],
{
position: props.position[i],
rotation: props.rotation[i],
},
),
);
}
} else {
phones.push(
phoneInit(
props.screen,
{
position: props.position,
rotation: props.rotation,
},
),
);
}
container.value.appendChild(renderer.domElement);
}
@@ -164,23 +190,31 @@ export default {
requestAnimationFrame(animate);
if (phone) {
phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
if (phones.length) {
phones.forEach((phone) => {
phone.animation(deltaTime, { x: mouseX, y: mouseY, z: camera.position.z });
});
}
renderer.render(scene, camera);
}
function handleMouseEnter() {
if (phone) {
phone.animation = phone.lookAtAnim;
phone.goingHome = false;
clearTimeout(phone.homeTimeout);
if (phones.length) {
phones.forEach((phone) => {
phone.animation = phone.lookAtAnim;
phone.goingHome = false;
clearTimeout(phone.homeTimeout);
});
}
}
function handleMouseLeave() {
if (phone) { phone.animation = phone.homeAnim; }
if (phones.length) {
phones.forEach((phone) => {
phone.animation = phone.homeAnim;
});
}
}
function handleMouseMove(event) {