From 36c46f9064acea9bd0feb0fbc1582e2bc6bbe1ca Mon Sep 17 00:00:00 2001
From: Anatoly <akopyl@radner.ru>
Date: Sun, 30 Jan 2022 00:08:04 +0300
Subject: [PATCH] Extracted rounded plane creation function into own file

---
 src/Mockup.vue            | 22 +++-------------------
 src/utils/roundedPlane.js | 18 ++++++++++++++++++
 2 files changed, 21 insertions(+), 19 deletions(-)
 create mode 100644 src/utils/roundedPlane.js

diff --git a/src/Mockup.vue b/src/Mockup.vue
index 9c2cbd1..c60550b 100644
--- a/src/Mockup.vue
+++ b/src/Mockup.vue
@@ -13,6 +13,7 @@ import { ref, onMounted } from 'vue';
 import * as THREE from 'three';
 import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
 import MockupModel from './MockupModel';
+import roundedPlane from './utils/roundedPlane';
 import phoneObj from './assets/iphone.obj';
 
 export default {
@@ -58,27 +59,10 @@ export default {
         const screenInit = () => {
           const scale = 6;
           const width = scale * 9; const height = scale * 19.3;
-
-          function roundedPlane() {
-            const x = 1; const y = 1;
-            const radius = 8;
-            const shape = new THREE.Shape();
-
-            shape.moveTo(x, y + radius);
-            shape.lineTo(x, y + height - radius);
-            shape.quadraticCurveTo(x, y + height, x + radius, y + height);
-            shape.lineTo(x + width - radius, y + height);
-            shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
-            shape.lineTo(x + width, y + radius);
-            shape.quadraticCurveTo(x + width, y, x + width - radius, y);
-            shape.lineTo(x + radius, y);
-            shape.quadraticCurveTo(x, y, x, y + radius);
-
-            return new THREE.ShapeBufferGeometry(shape);
-          }
+          const radius = 8;
 
           // const geometry = new THREE.PlaneGeometry(width, height);
-          const geometry = roundedPlane();
+          const geometry = roundedPlane(width, height, radius);
 
           const loader = new THREE.TextureLoader();
           const texture = loader.load(props.screenImg);
diff --git a/src/utils/roundedPlane.js b/src/utils/roundedPlane.js
new file mode 100644
index 0000000..ada5a0b
--- /dev/null
+++ b/src/utils/roundedPlane.js
@@ -0,0 +1,18 @@
+import { Shape, ShapeBufferGeometry } from 'three';
+
+export default function roundedPlane(width, height, radius) {
+  const x = 1; const y = 1;
+  const shape = new Shape();
+
+  shape.moveTo(x, y + radius);
+  shape.lineTo(x, y + height - radius);
+  shape.quadraticCurveTo(x, y + height, x + radius, y + height);
+  shape.lineTo(x + width - radius, y + height);
+  shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
+  shape.lineTo(x + width, y + radius);
+  shape.quadraticCurveTo(x + width, y, x + width - radius, y);
+  shape.lineTo(x + radius, y);
+  shape.quadraticCurveTo(x, y, x, y + radius);
+
+  return new ShapeBufferGeometry(shape);
+}