tinyjs-plugin-mesh
Version:
The Tiny.js plugin of mesh
78 lines (68 loc) • 2.03 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>Plane Demo</title>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="yes" name="apple-touch-fullscreen"/>
<meta content="telephone=no,email=no" name="format-detection"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<style>
html, body, p, div {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script src="https://gw.alipayobjects.com/os/lib/tinyjs/tiny/1.3.1/tiny.js"></script>
<script src="../index.debug.js"></script>
<script type="text/javascript">
// 新建 App
var app = new Tiny.Application({
width: 400,
height: 400,
dpi: 3,
renderType: Tiny.RENDERER_TYPE.CANVAS,
fixSize: true,
});
var container = new Tiny.Container();
var count = 0;
var mesh = new Tiny.mesh.Plane(Tiny.Texture.fromImage('https://gw.alipayobjects.com/zos/rmsportal/ZQlicRWdoMXqrxotrpet.png'), 4, 5);
mesh.canvasDrawTimes = 3; // Canvas 渲染模式下，通过 canvasDrawTimes 多绘制3次，减少三角纹理拼接时因为边缘羽化导致的空隙
mesh.setPositionY(40);
container.addChild(mesh);
var g = new Tiny.Graphics();
g.x = mesh.x;
g.y = mesh.y;
container.addChild(g);
app.run(container);
app.onUpdate(function () {
count += 0.01;
mesh.vertices[3] = Math.cos(count * 10) * 30;
mesh.vertices[5] = Math.cos(count * 10) * 20;
mesh.vertices[7] = Math.cos(count * 10) * 10;
renderPoints();
});
function renderPoints() {
var points = [];
mesh.vertices.forEach(function (item, i) {
if (i % 2 === 0) {
points.push({
x: mesh.vertices[i],
y: mesh.vertices[i + 1]
});
}
});
g.clear();
g.lineStyle(2, 0xffc2c2);
g.moveTo(points[0], points[1]);
for (var i = 0; i < points.length; i++) {
g.beginFill(0xff0022);
g.drawCircle(points[i].x, points[i].y, 10);
g.endFill();
}
}
</script>
</body>
</html>