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

10
src/MockupModel.js
View File

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