@eva/plugin-renderer-mesh 2.0.1-beta.9 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,7 +3,6 @@ globalThis.EVA.plugin = globalThis.EVA.plugin || {};
|
|
|
3
3
|
globalThis.EVA.plugin.renderer = globalThis.EVA.plugin.renderer || {};
|
|
4
4
|
var _EVA_IIFE_mesh = function (exports, eva_js, pluginRenderer, pixi_js) {
|
|
5
5
|
'use strict';
|
|
6
|
-
|
|
7
6
|
class PerspectiveMesh extends eva_js.Component {
|
|
8
7
|
constructor() {
|
|
9
8
|
super(...arguments);
|
|
@@ -6,13 +6,69 @@ var eva_js = require('@eva/eva.js');
|
|
|
6
6
|
var pluginRenderer = require('@eva/plugin-renderer');
|
|
7
7
|
var pixi_js = require('pixi.js');
|
|
8
8
|
|
|
9
|
+
/**
|
|
10
|
+
* 透视网格组件
|
|
11
|
+
*
|
|
12
|
+
* PerspectiveMesh 组件用于创建具有透视变形效果的图片。
|
|
13
|
+
* 通过将图片分割成网格并调整四个角的位置，可以实现 3D 透视、梯形变换等效果，
|
|
14
|
+
* 适用于翻书效果、卡片翻转、3D 地面贴图等场景。
|
|
15
|
+
*
|
|
16
|
+
* 工作原理：
|
|
17
|
+
* - 将图片分割成 M×N 的网格
|
|
18
|
+
* - 通过调整四个角的位置实现透视变换
|
|
19
|
+
* - 网格越密集，变形效果越平滑
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* ```typescript
|
|
23
|
+
* // 创建透视变形的图片
|
|
24
|
+
* const card = new GameObject('card');
|
|
25
|
+
* const mesh = new PerspectiveMesh({
|
|
26
|
+
* resource: 'cardImage',
|
|
27
|
+
* verticesX: 10, // 横向网格数
|
|
28
|
+
* verticesY: 10 // 纵向网格数
|
|
29
|
+
* });
|
|
30
|
+
* card.addComponent(mesh);
|
|
31
|
+
*
|
|
32
|
+
* // 设置四个角的位置实现透视效果
|
|
33
|
+
* // 参数：左上(x0,y0), 右上(x1,y1), 右下(x2,y2), 左下(x3,y3)
|
|
34
|
+
* mesh.setCorners(
|
|
35
|
+
* 50, 0, // 左上角
|
|
36
|
+
* 350, 0, // 右上角
|
|
37
|
+
* 400, 300, // 右下角
|
|
38
|
+
* 0, 300 // 左下角
|
|
39
|
+
* );
|
|
40
|
+
*
|
|
41
|
+
* // 创建翻书效果
|
|
42
|
+
* let angle = 0;
|
|
43
|
+
* setInterval(() => {
|
|
44
|
+
* angle += 0.1;
|
|
45
|
+
* const offset = Math.sin(angle) * 50;
|
|
46
|
+
* mesh.setCorners(
|
|
47
|
+
* offset, 0,
|
|
48
|
+
* 400 - offset, 0,
|
|
49
|
+
* 400, 300,
|
|
50
|
+
* 0, 300
|
|
51
|
+
* );
|
|
52
|
+
* }, 16);
|
|
53
|
+
* ```
|
|
54
|
+
*/
|
|
9
55
|
class PerspectiveMesh extends eva_js.Component {
|
|
10
56
|
constructor() {
|
|
11
57
|
super(...arguments);
|
|
58
|
+
/** 横向顶点数量（网格密度） */
|
|
12
59
|
this.verticesX = 10;
|
|
60
|
+
/** 纵向顶点数量（网格密度） */
|
|
13
61
|
this.verticesY = 10;
|
|
62
|
+
/** 强制更新标志 */
|
|
14
63
|
this._forceUpdate = 0;
|
|
15
64
|
}
|
|
65
|
+
/**
|
|
66
|
+
* 初始化组件
|
|
67
|
+
* @param obj - 初始化参数
|
|
68
|
+
* @param obj.resource - 纹理资源名称
|
|
69
|
+
* @param obj.verticesX - 横向网格密度
|
|
70
|
+
* @param obj.verticesY - 纵向网格密度
|
|
71
|
+
*/
|
|
16
72
|
init(obj) {
|
|
17
73
|
if (obj && obj.resource) {
|
|
18
74
|
this.resource = obj.resource;
|
|
@@ -24,6 +80,20 @@ class PerspectiveMesh extends eva_js.Component {
|
|
|
24
80
|
this.verticesY = obj.verticesY;
|
|
25
81
|
}
|
|
26
82
|
}
|
|
83
|
+
/**
|
|
84
|
+
* 设置四个角的位置
|
|
85
|
+
*
|
|
86
|
+
* 通过改变四个角的坐标来实现透视变换效果。
|
|
87
|
+
*
|
|
88
|
+
* @param x0 - 左上角 X 坐标
|
|
89
|
+
* @param y0 - 左上角 Y 坐标
|
|
90
|
+
* @param x1 - 右上角 X 坐标
|
|
91
|
+
* @param y1 - 右上角 Y 坐标
|
|
92
|
+
* @param x2 - 右下角 X 坐标
|
|
93
|
+
* @param y2 - 右下角 Y 坐标
|
|
94
|
+
* @param x3 - 左下角 X 坐标
|
|
95
|
+
* @param y3 - 左下角 Y 坐标
|
|
96
|
+
*/
|
|
27
97
|
setCorners(x0, y0, x1, y1, x2, y2, x3, y3) {
|
|
28
98
|
const corners = this.corners || {};
|
|
29
99
|
corners.x0 = x0;
|
|
@@ -38,6 +108,7 @@ class PerspectiveMesh extends eva_js.Component {
|
|
|
38
108
|
this._forceUpdate += 1;
|
|
39
109
|
}
|
|
40
110
|
}
|
|
111
|
+
/** 组件名称 */
|
|
41
112
|
PerspectiveMesh.componentName = 'PerspectiveMesh';
|
|
42
113
|
|
|
43
114
|
/*! *****************************************************************************
|
|
@@ -24,14 +24,87 @@ export declare class MeshSystem extends Renderer {
|
|
|
24
24
|
destroy(): void;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
+
/**
|
|
28
|
+
* 透视网格组件
|
|
29
|
+
*
|
|
30
|
+
* PerspectiveMesh 组件用于创建具有透视变形效果的图片。
|
|
31
|
+
* 通过将图片分割成网格并调整四个角的位置，可以实现 3D 透视、梯形变换等效果，
|
|
32
|
+
* 适用于翻书效果、卡片翻转、3D 地面贴图等场景。
|
|
33
|
+
*
|
|
34
|
+
* 工作原理：
|
|
35
|
+
* - 将图片分割成 M×N 的网格
|
|
36
|
+
* - 通过调整四个角的位置实现透视变换
|
|
37
|
+
* - 网格越密集，变形效果越平滑
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* ```typescript
|
|
41
|
+
* // 创建透视变形的图片
|
|
42
|
+
* const card = new GameObject('card');
|
|
43
|
+
* const mesh = new PerspectiveMesh({
|
|
44
|
+
* resource: 'cardImage',
|
|
45
|
+
* verticesX: 10, // 横向网格数
|
|
46
|
+
* verticesY: 10 // 纵向网格数
|
|
47
|
+
* });
|
|
48
|
+
* card.addComponent(mesh);
|
|
49
|
+
*
|
|
50
|
+
* // 设置四个角的位置实现透视效果
|
|
51
|
+
* // 参数：左上(x0,y0), 右上(x1,y1), 右下(x2,y2), 左下(x3,y3)
|
|
52
|
+
* mesh.setCorners(
|
|
53
|
+
* 50, 0, // 左上角
|
|
54
|
+
* 350, 0, // 右上角
|
|
55
|
+
* 400, 300, // 右下角
|
|
56
|
+
* 0, 300 // 左下角
|
|
57
|
+
* );
|
|
58
|
+
*
|
|
59
|
+
* // 创建翻书效果
|
|
60
|
+
* let angle = 0;
|
|
61
|
+
* setInterval(() => {
|
|
62
|
+
* angle += 0.1;
|
|
63
|
+
* const offset = Math.sin(angle) * 50;
|
|
64
|
+
* mesh.setCorners(
|
|
65
|
+
* offset, 0,
|
|
66
|
+
* 400 - offset, 0,
|
|
67
|
+
* 400, 300,
|
|
68
|
+
* 0, 300
|
|
69
|
+
* );
|
|
70
|
+
* }, 16);
|
|
71
|
+
* ```
|
|
72
|
+
*/
|
|
27
73
|
export declare class PerspectiveMesh extends Component<PerspectiveMeshParams> {
|
|
74
|
+
/** 组件名称 */
|
|
28
75
|
static componentName: string;
|
|
76
|
+
/** 纹理资源名称 */
|
|
29
77
|
resource: string;
|
|
78
|
+
/** 横向顶点数量（网格密度） */
|
|
30
79
|
verticesX: number;
|
|
80
|
+
/** 纵向顶点数量（网格密度） */
|
|
31
81
|
verticesY: number;
|
|
82
|
+
/** 四个角的坐标位置 */
|
|
32
83
|
corners: Corners;
|
|
84
|
+
/** 强制更新标志 */
|
|
33
85
|
_forceUpdate: number;
|
|
86
|
+
/**
|
|
87
|
+
* 初始化组件
|
|
88
|
+
* @param obj - 初始化参数
|
|
89
|
+
* @param obj.resource - 纹理资源名称
|
|
90
|
+
* @param obj.verticesX - 横向网格密度
|
|
91
|
+
* @param obj.verticesY - 纵向网格密度
|
|
92
|
+
*/
|
|
34
93
|
init(obj?: PerspectiveMeshParams): void;
|
|
94
|
+
/**
|
|
95
|
+
* 设置四个角的位置
|
|
96
|
+
*
|
|
97
|
+
* 通过改变四个角的坐标来实现透视变换效果。
|
|
98
|
+
*
|
|
99
|
+
* @param x0 - 左上角 X 坐标
|
|
100
|
+
* @param y0 - 左上角 Y 坐标
|
|
101
|
+
* @param x1 - 右上角 X 坐标
|
|
102
|
+
* @param y1 - 右上角 Y 坐标
|
|
103
|
+
* @param x2 - 右下角 X 坐标
|
|
104
|
+
* @param y2 - 右下角 Y 坐标
|
|
105
|
+
* @param x3 - 左下角 X 坐标
|
|
106
|
+
* @param y3 - 左下角 Y 坐标
|
|
107
|
+
*/
|
|
35
108
|
setCorners(x0: number, y0: number, x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): void;
|
|
36
109
|
}
|
|
37
110
|
|
|
@@ -2,13 +2,69 @@ import { Component, decorators, OBSERVER_TYPE, resource } from '@eva/eva.js';
|
|
|
2
2
|
import { Renderer, RendererSystem } from '@eva/plugin-renderer';
|
|
3
3
|
import { PerspectiveMesh as PerspectiveMesh$1, Texture } from 'pixi.js';
|
|
4
4
|
|
|
5
|
+
/**
|
|
6
|
+
* 透视网格组件
|
|
7
|
+
*
|
|
8
|
+
* PerspectiveMesh 组件用于创建具有透视变形效果的图片。
|
|
9
|
+
* 通过将图片分割成网格并调整四个角的位置，可以实现 3D 透视、梯形变换等效果，
|
|
10
|
+
* 适用于翻书效果、卡片翻转、3D 地面贴图等场景。
|
|
11
|
+
*
|
|
12
|
+
* 工作原理：
|
|
13
|
+
* - 将图片分割成 M×N 的网格
|
|
14
|
+
* - 通过调整四个角的位置实现透视变换
|
|
15
|
+
* - 网格越密集，变形效果越平滑
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```typescript
|
|
19
|
+
* // 创建透视变形的图片
|
|
20
|
+
* const card = new GameObject('card');
|
|
21
|
+
* const mesh = new PerspectiveMesh({
|
|
22
|
+
* resource: 'cardImage',
|
|
23
|
+
* verticesX: 10, // 横向网格数
|
|
24
|
+
* verticesY: 10 // 纵向网格数
|
|
25
|
+
* });
|
|
26
|
+
* card.addComponent(mesh);
|
|
27
|
+
*
|
|
28
|
+
* // 设置四个角的位置实现透视效果
|
|
29
|
+
* // 参数：左上(x0,y0), 右上(x1,y1), 右下(x2,y2), 左下(x3,y3)
|
|
30
|
+
* mesh.setCorners(
|
|
31
|
+
* 50, 0, // 左上角
|
|
32
|
+
* 350, 0, // 右上角
|
|
33
|
+
* 400, 300, // 右下角
|
|
34
|
+
* 0, 300 // 左下角
|
|
35
|
+
* );
|
|
36
|
+
*
|
|
37
|
+
* // 创建翻书效果
|
|
38
|
+
* let angle = 0;
|
|
39
|
+
* setInterval(() => {
|
|
40
|
+
* angle += 0.1;
|
|
41
|
+
* const offset = Math.sin(angle) * 50;
|
|
42
|
+
* mesh.setCorners(
|
|
43
|
+
* offset, 0,
|
|
44
|
+
* 400 - offset, 0,
|
|
45
|
+
* 400, 300,
|
|
46
|
+
* 0, 300
|
|
47
|
+
* );
|
|
48
|
+
* }, 16);
|
|
49
|
+
* ```
|
|
50
|
+
*/
|
|
5
51
|
class PerspectiveMesh extends Component {
|
|
6
52
|
constructor() {
|
|
7
53
|
super(...arguments);
|
|
54
|
+
/** 横向顶点数量（网格密度） */
|
|
8
55
|
this.verticesX = 10;
|
|
56
|
+
/** 纵向顶点数量（网格密度） */
|
|
9
57
|
this.verticesY = 10;
|
|
58
|
+
/** 强制更新标志 */
|
|
10
59
|
this._forceUpdate = 0;
|
|
11
60
|
}
|
|
61
|
+
/**
|
|
62
|
+
* 初始化组件
|
|
63
|
+
* @param obj - 初始化参数
|
|
64
|
+
* @param obj.resource - 纹理资源名称
|
|
65
|
+
* @param obj.verticesX - 横向网格密度
|
|
66
|
+
* @param obj.verticesY - 纵向网格密度
|
|
67
|
+
*/
|
|
12
68
|
init(obj) {
|
|
13
69
|
if (obj && obj.resource) {
|
|
14
70
|
this.resource = obj.resource;
|
|
@@ -20,6 +76,20 @@ class PerspectiveMesh extends Component {
|
|
|
20
76
|
this.verticesY = obj.verticesY;
|
|
21
77
|
}
|
|
22
78
|
}
|
|
79
|
+
/**
|
|
80
|
+
* 设置四个角的位置
|
|
81
|
+
*
|
|
82
|
+
* 通过改变四个角的坐标来实现透视变换效果。
|
|
83
|
+
*
|
|
84
|
+
* @param x0 - 左上角 X 坐标
|
|
85
|
+
* @param y0 - 左上角 Y 坐标
|
|
86
|
+
* @param x1 - 右上角 X 坐标
|
|
87
|
+
* @param y1 - 右上角 Y 坐标
|
|
88
|
+
* @param x2 - 右下角 X 坐标
|
|
89
|
+
* @param y2 - 右下角 Y 坐标
|
|
90
|
+
* @param x3 - 左下角 X 坐标
|
|
91
|
+
* @param y3 - 左下角 Y 坐标
|
|
92
|
+
*/
|
|
23
93
|
setCorners(x0, y0, x1, y1, x2, y2, x3, y3) {
|
|
24
94
|
const corners = this.corners || {};
|
|
25
95
|
corners.x0 = x0;
|
|
@@ -34,6 +104,7 @@ class PerspectiveMesh extends Component {
|
|
|
34
104
|
this._forceUpdate += 1;
|
|
35
105
|
}
|
|
36
106
|
}
|
|
107
|
+
/** 组件名称 */
|
|
37
108
|
PerspectiveMesh.componentName = 'PerspectiveMesh';
|
|
38
109
|
|
|
39
110
|
/*! *****************************************************************************
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eva/plugin-renderer-mesh",
|
|
3
|
-
"version": "2.0.1
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "@eva/plugin-renderer-mesh",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"module": "dist/plugin-renderer-mesh.esm.js",
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"homepage": "https://eva.js.org",
|
|
20
20
|
"dependencies": {
|
|
21
21
|
"@eva/inspector-decorator": "^0.0.5",
|
|
22
|
-
"@eva/plugin-renderer": "2.0.1
|
|
23
|
-
"@eva/eva.js": "2.0.1
|
|
24
|
-
"pixi.js": "^8.
|
|
22
|
+
"@eva/plugin-renderer": "2.0.1",
|
|
23
|
+
"@eva/eva.js": "2.0.1",
|
|
24
|
+
"pixi.js": "^8.17.0"
|
|
25
25
|
}
|
|
26
26
|
}
|