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

Extracted rounded plane creation function into own file

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-01-30 00:08:04 +03:00
parent 3dccc62f9c
commit 36c46f9064
2 changed files with 21 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Mockup.vue
View File

@@ -13,6 +13,7 @@ import { ref, onMounted } from 'vue';
import * as THREE from 'three'; import * as THREE from 'three';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader'; import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import MockupModel from './MockupModel'; import MockupModel from './MockupModel';
import roundedPlane from './utils/roundedPlane';
import phoneObj from './assets/iphone.obj'; import phoneObj from './assets/iphone.obj';
export default { export default {
@@ -58,27 +59,10 @@ export default {
const screenInit = () => { const screenInit = () => {
const scale = 6; const scale = 6;
const width = scale * 9; const height = scale * 19.3; const width = scale * 9; const height = scale * 19.3;
const radius = 8;
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 geometry = new THREE.PlaneGeometry(width, height); // const geometry = new THREE.PlaneGeometry(width, height);
const geometry = roundedPlane(); const geometry = roundedPlane(width, height, radius);
const loader = new THREE.TextureLoader(); const loader = new THREE.TextureLoader();
const texture = loader.load(props.screenImg); const texture = loader.load(props.screenImg);

18
src/utils/roundedPlane.js Normal file
View File

@@ -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);
}