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

Notches

Browse Source
This commit is contained in:
Anatoly Kopyl
2022-02-02 03:12:04 +03:00
parent cb1cebd879
commit 8590f61ba1
3 changed files with 44 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
bundle/vue-three-d-mockup.esm.js
View File

@@ -81,11 +81,25 @@ class MockupModel extends Group {
function roundedPlane(width, height, radius) { function roundedPlane(width, height, radius) {
const x = 0; const y = 0; const x = 0; const y = 0;
const nW = 25;
const nH = radius / 2.2;
const shape = new Shape(); const shape = new Shape();
shape.moveTo(x, y + radius); shape.moveTo(x, y + radius);
shape.lineTo(x, y + height - radius); shape.lineTo(x, y + height - radius);
shape.quadraticCurveTo(x, y + height, x + radius, y + height); shape.quadraticCurveTo(x, y + height, x + radius, y + height);
shape.lineTo(width / 2 - nW / 2 - nH, y + height);
shape.quadraticCurveTo(width / 2 - nW / 2, y + height, width / 2 - nW / 2, y + height - nH / 2);
shape.quadraticCurveTo(
width / 2 - nW / 2, y + height - nH, width / 2 - nW / 2 + nH, y + height - nH,
);
shape.lineTo(width / 2 + nW / 2 - nH, y + height - nH);
shape.quadraticCurveTo(
width / 2 + nW / 2, y + height - nH, width / 2 + nW / 2, y + height - nH / 2,
);
shape.quadraticCurveTo(width / 2 + nW / 2, y + height, width / 2 + nW / 2 + nH, y + height);
shape.lineTo(x + width - radius, y + height); shape.lineTo(x + width - radius, y + height);
shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
shape.lineTo(x + width, y + radius); shape.lineTo(x + width, y + radius);
@@ -120,6 +134,9 @@ var script = {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
linearFilter: {
type: Boolean,
},
}, },
setup(props) { setup(props) {
const container = ref(null); const container = ref(null);
@@ -180,7 +197,11 @@ var script = {
texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
const material = new THREE.MeshLambertMaterial({ map: texture }); const material = new THREE.MeshLambertMaterial({ map: texture });
// material.map.minFilter = THREE.LinearFilter;
if (props.linearFilter) {
material.map.minFilter = THREE.LinearFilter;
}
const screen = new THREE.Mesh(geometry, material); const screen = new THREE.Mesh(geometry, material);
const recomputeUVs = () => { const recomputeUVs = () => {

9
src/Mockup.vue
View File

@@ -38,6 +38,9 @@ export default {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
linearFilter: {
type: Boolean,
},
}, },
setup(props) { setup(props) {
const container = ref(null); const container = ref(null);
@@ -98,7 +101,11 @@ export default {
texture.anisotropy = renderer.capabilities.getMaxAnisotropy(); texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
const material = new THREE.MeshLambertMaterial({ map: texture }); const material = new THREE.MeshLambertMaterial({ map: texture });
// material.map.minFilter = THREE.LinearFilter;
if (props.linearFilter) {
material.map.minFilter = THREE.LinearFilter;
}
const screen = new THREE.Mesh(geometry, material); const screen = new THREE.Mesh(geometry, material);
const recomputeUVs = () => { const recomputeUVs = () => {

14
src/utils/roundedPlane.js
View File

@@ -2,11 +2,25 @@ import { Shape, ShapeBufferGeometry } from 'three';
export default function roundedPlane(width, height, radius) { export default function roundedPlane(width, height, radius) {
const x = 0; const y = 0; const x = 0; const y = 0;
const nW = 25;
const nH = radius / 2.2;
const shape = new Shape(); const shape = new Shape();
shape.moveTo(x, y + radius); shape.moveTo(x, y + radius);
shape.lineTo(x, y + height - radius); shape.lineTo(x, y + height - radius);
shape.quadraticCurveTo(x, y + height, x + radius, y + height); shape.quadraticCurveTo(x, y + height, x + radius, y + height);
shape.lineTo(width / 2 - nW / 2 - nH, y + height);
shape.quadraticCurveTo(width / 2 - nW / 2, y + height, width / 2 - nW / 2, y + height - nH / 2);
shape.quadraticCurveTo(
width / 2 - nW / 2, y + height - nH, width / 2 - nW / 2 + nH, y + height - nH,
);
shape.lineTo(width / 2 + nW / 2 - nH, y + height - nH);
shape.quadraticCurveTo(
width / 2 + nW / 2, y + height - nH, width / 2 + nW / 2, y + height - nH / 2,
);
shape.quadraticCurveTo(width / 2 + nW / 2, y + height, width / 2 + nW / 2 + nH, y + height);
shape.lineTo(x + width - radius, y + height); shape.lineTo(x + width - radius, y + height);
shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); shape.quadraticCurveTo(x + width, y + height, x + width, y + height - radius);
shape.lineTo(x + width, y + radius); shape.lineTo(x + width, y + radius);