diff --git a/src/Mockup.vue b/src/Mockup.vue index 4cd40cb..4b2bcb9 100644 --- a/src/Mockup.vue +++ b/src/Mockup.vue @@ -28,7 +28,7 @@ export default { }, }, setup(props) { - const animation = ref('float'); + const animation = ref('home'); const container = ref(null); let camera; let scene; @@ -126,10 +126,19 @@ export default { ); }; - phone = new MockupModel(); + phone = new MockupModel({ + position: { + x: 0, + y: 0, + z: 0, + }, + rotation: { + x: -0.2, + y: 0.3, + z: 0.06, + }, + }); phone.acceleration.y = -0.01; - phone.rotation.x = -0.1; - phone.rotation.y = 0.5; scene.add(phone); screenInit(); bodyInit(); @@ -157,6 +166,13 @@ export default { phone.lookAtAnim(mouseX / 3, mouseY / 3, camera.position.z); break; + case 'home': + if (phone.homeAnim()) { + phone.acceleration.y = -0.01; + animation.value = 'float'; + } + break; + default: phone.floatAnim(); } @@ -170,8 +186,8 @@ export default { } function handleMouseLeave() { - phone.acceleration.y = -0.01; - animation.value = 'float'; + // phone.acceleration.y = -0.01; + animation.value = 'home'; } function handleMouseMove(event) { diff --git a/src/MockupModel.js b/src/MockupModel.js index c9f9fda..8450adf 100644 --- a/src/MockupModel.js +++ b/src/MockupModel.js @@ -1,21 +1,12 @@ import { Group, Vector3 } from 'three'; export default class MockupModel extends Group { - constructor() { + constructor(home) { super(); - this.home = { - position: { - x: 0, - y: 0, - z: 0, - }, - rotation: { - x: 0, - y: 0, - z: 0, - }, - }; + this.goingHome = false; + + this.home = home; this.speed = { x: 0, @@ -23,6 +14,12 @@ export default class MockupModel extends Group { z: 0, }; + this.rotSpeed = { + x: 0, + y: 0, + z: 0, + }; + this.acceleration = { x: 0, y: 0, @@ -30,6 +27,35 @@ export default class MockupModel extends Group { }; } + homeAnim() { + if (!this.goingHome) { + this.goingHome = true; + + const rT = 10; + this.speed.x = (this.home.position.x - this.position.x) / rT; + this.speed.y = (this.home.position.y - this.position.y) / rT; + this.speed.z = (this.home.position.z - this.position.z) / rT; + + this.rotSpeed.x = (this.home.rotation.x - this.rotation.x) / rT; + this.rotSpeed.y = (this.home.rotation.y - this.rotation.y) / rT; + this.rotSpeed.z = (this.home.rotation.z - this.rotation.z) / rT; + + setTimeout(() => { + this.goingHome = false; + }, rT); + } + + this.position.x += this.speed.x; + this.position.y += this.speed.y; + this.position.z += this.speed.z; + + this.rotation.x += this.rotSpeed.x; + this.rotation.y += this.rotSpeed.y; + this.rotation.z += this.rotSpeed.z; + + return !this.goingHome; + } + floatAnim() { const maxSpeed = 0.1; const acceleration = 0.01;