jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perspective

This commit is contained in:
Orion Reed 2024-12-19 03:50:14 -05:00
parent e7bf3522be
commit c2eacb93a6
1 changed files with 18 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
labs/folk-space.ts
View File

@ -16,7 +16,7 @@ export class FolkSpace extends FolkElement {
static styles = css` static styles = css`
:host { :host {
display: block; display: block;
// perspective: 1000px; perspective: 1000px;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -30,10 +30,6 @@ export class FolkSpace extends FolkElement {
transform-origin: center; transform-origin: center;
} }
.space.rotate {
transform: rotateX(-90deg);
}
.face { .face {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -42,10 +38,6 @@ export class FolkSpace extends FolkElement {
transition: transform 0.6s linear; transition: transform 0.6s linear;
} }
.front {
transform: rotateX(0deg);
}
.back { .back {
transform: rotateX(90deg); transform: rotateX(90deg);
} }
@ -70,32 +62,40 @@ export class FolkSpace extends FolkElement {
</div> </div>
`); `);
this.transition();
return root; return root;
} }
localToScreen(point: Point, face: 'front' | 'back'): Point { localToScreen(point: Point, face: 'front' | 'back'): Point {
const spaceRect = this.getBoundingClientRect(); const spaceRect = this.getBoundingClientRect();
const centerX = spaceRect.width / 2;
const centerY = spaceRect.height / 2; const centerY = spaceRect.height / 2;
const perspective = 1000;
// Calculate transition rotation
let rotation = 0; let rotation = 0;
if (face === 'front') { if (face === 'front') {
// When rotating to back, go from 0 to -90
// When rotating to front, go from -90 to 0
rotation = this.#isRotated ? -90 * this.#transitionProgress : -90 * (1 - this.#transitionProgress); rotation = this.#isRotated ? -90 * this.#transitionProgress : -90 * (1 - this.#transitionProgress);
} else { } else {
// When rotating to back, go from 90 to 0
// When rotating to front, go from 0 to 90
rotation = this.#isRotated ? 90 * (1 - this.#transitionProgress) : 90 * this.#transitionProgress; rotation = this.#isRotated ? 90 * (1 - this.#transitionProgress) : 90 * this.#transitionProgress;
} }
const matrix = new DOMMatrix().translate(0, centerY).rotate(rotation, 0, 0).translate(0, -centerY); // Create perspective matrix
const matrix = new DOMMatrix()
.translate(centerX, centerY)
.multiply(new DOMMatrix([1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -1 / perspective, 0, 0, 0, 1]))
.translate(-centerX, -centerY)
.translate(centerX, centerY)
.rotate(rotation, 0, 0)
.translate(-centerX, -centerY);
const transformedPoint = matrix.transformPoint(new DOMPoint(point.x, point.y)); const transformedPoint = matrix.transformPoint(new DOMPoint(point.x, point.y, 0, 1));
// Perform perspective division
const w = transformedPoint.w || 1;
return { return {
x: transformedPoint.x, x: transformedPoint.x / w,
y: transformedPoint.y, y: transformedPoint.y / w,
}; };
} }