anatolykopyl/vue-three-d-mockup
1
0
Fork 0
mirror of https://github.com/anatolykopyl/vue-three-d-mockup.git synced 2026-03-26 12:55:08 +00:00
Code Issues Projects Releases Wiki Activity

Made floating gentler

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-01-29 17:13:27 +03:00
parent 903bb60f20
commit 31a1a3c3f4
2 changed files with 13 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Mockup.vue
View File

@@ -79,8 +79,10 @@ export default {
const loader = new THREE.TextureLoader();
const texture = loader.load(props.screenImg);
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
const material = new THREE.MeshLambertMaterial({ map: texture });
// material.map.minFilter = THREE.LinearFilter;
const screen = new THREE.Mesh(geometry, material);
const recomputeUVs = () => {
@@ -120,18 +122,19 @@ export default {
};
phone = new MockupModel();
phone.acceleration.y = -0.02;
phone.acceleration.y = -0.01;
phone.rotation.x = -0.1;
phone.rotation.y = 0.5;
screenInit();
bodyInit();
};
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.value.clientWidth, container.value.clientHeight);
environmentInit();
phoneInit();
renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
renderer.setSize(container.value.clientWidth, container.value.clientHeight);
container.value.appendChild(renderer.domElement);
}
@@ -145,7 +148,7 @@ export default {
break;
case 'lookAt':
phone.lookAtAnim(mouseX, mouseY, camera);
phone.lookAtAnim(mouseX / 3, mouseY / 3, camera.position.z);
break;
default:
@@ -161,7 +164,7 @@ export default {
}
function handleMouseLeave() {
phone.acceleration.y = -0.02;
phone.acceleration.y = -0.01;
animation.value = 'float';
}

10
src/MockupModel.js
View File

@@ -18,14 +18,14 @@ export default class MockupModel extends Group {
}
floatAnim() {
const maxSpeed = 0.5;
const maxSpeed = 0.1;
if (this.position.y < -2) {
this.acceleration.y = 0.02;
this.acceleration.y = 0.01;
}
if (this.position.y > 2) {
this.acceleration.y = -0.02;
this.acceleration.y = -0.01;
}
this.speed.y = Math.min(this.speed.y + this.acceleration.y, maxSpeed);
@@ -36,11 +36,11 @@ export default class MockupModel extends Group {
this.rotation.y += 0.02;
}
lookAtAnim(x, y, camera) {
lookAtAnim(x, y, cameraZ) {
const target = new Vector3();
target.x = x;
target.y = y;
target.z = camera.position.z;
target.z = cameraZ;
this.lookAt(target);
}
}