<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Isomer.js跳舞的乐高小鸡</title>
<style>
body {
height: 100vh;
background: #69CEEC;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
canvas {
width: 1000px;
height: 700px;
margin-bottom: 50px;
}
</style>
</head>
<body>
<canvas id="Isomer" width="2000" height="1400"></canvas>
<script src="js/isomer.min.js"></script>
<script src="js/tinycolor.min.js"></script>
<script>
(function() {
var Color, Path, Point, Shape, TinyColor, Vector, configurationModel;
({
Point, Path, Shape, Vector, Color
} = Isomer);
TinyColor = tinycolor;
configurationModel = {
el: '#Isomer',
scope: {},
shapes: function() {
return [];
},
loop: null,
beforeInit: null
};
window.Engine = (function() {
class Engine {
constructor(configuration) {
this.config = Object.assign(configurationModel, configuration);
this.$Isomer = new Isomer(document.querySelector(this.config.el));
this.scope = this.config.scope;
this.shapes = this.config.shapes;
this.wasInitiated = false;
this.$Isomer.offsetX = 0;
this.$Isomer.offsetY = 200;
this.updateCanvasSize();
window.addEventListener('resize', () => {
this.updateCanvasSize();
if (this.wasInitiated && !this.config.loop) {
return this.render();
}
});
if (this.config.beforeInit) {
this.config.beforeInit.call(this);
} else {
this.init();
}
}
updateCanvasSize() {
this.$Isomer.canvas.elem.width = window.innerWidth * 2;
this.$Isomer.canvas.elem.height = window.innerHeight * 2;
this.$Isomer.canvas.width = window.innerWidth * 2;
this.$Isomer.canvas.height = window.innerHeight * 2;
this.$Isomer.originX = window.innerWidth - this.$Isomer.offsetX;
return this.$Isomer.originY = window.innerHeight + this.$Isomer.offsetY;
}
render() {
var i, len, length, obj, origin, points, ref, shape, type;
ref = this.shapes.call(this.scope);
for (i = 0, len = ref.length; i < len; i++) {
shape = ref[i];
if (shape.hide) {
continue;
}
type = shape.type || 'prism';
obj = null;
if (type === 'prism' || type === 'pyramid') {
origin = new Point(shape.origin.x, shape.origin.y, shape.origin.z);
length = shape.length;
if (type === 'prism') {
obj = Shape.Prism(origin, length.x, length.y, length.z);
} else if (type === 'pyramid') {
obj = Shape.Pyramid(origin, length.x, length.y, length.z);
}
}
if (type === 'cylinder') {
origin = new Point(shape.origin.x, shape.origin.y, shape.origin.z);
obj = Shape.Cylinder(origin, shape.radius, shape.vertices, shape.length);
}
if (type === 'path') {
points = shape.points.map(function(point) {
return new Point(point.x, point.y, point.z);
});
obj = new Path(points);
if (shape.extrude) {
obj = Shape.extrude(obj, shape.length);
}
}
if (shape.translate) {
obj = obj.translate(shape.translate.x, shape.translate.y, shape.translate.z);
}
if (shape.scale) {
if (!shape.scale.origin) {
shape.scale.origin = this.util.shapeCenter(shape);
}
obj = obj.scale(shape.scale.origin, shape.scale.x, shape.scale.y, shape.scale.z);
}
if (shape.rotateZ) {
if (!shape.rotateZ.origin) {
shape.rotateZ.origin = this.util.shapeCenter(shape);
}
obj = obj.rotateZ(shape.rotateZ.origin, this.util.rotation(shape.rotateZ.rotation));
}
if (shape.rotateY) {
if (!shape.rotateY.origin) {
shape.rotateY.origin = this.util.shapeCenter(shape);
}
obj = obj.rotateY(shape.rotateY.origin, this.util.rotation(shape.rotateY.rotation));
}
if (shape.rotateX) {
if (!shape.rotateX.origin) {
shape.rotateX.origin = this.util.shapeCenter(shape);
}
obj = obj.rotateX(shape.rotateX.origin, this.util.rotation(shape.rotateX.rotation));
}
this.$Isomer.add(obj, this.util.color(shape.color));
}
}
clear() {
return this.$Isomer.canvas.clear();
}
loop() {
this.clear();
this.render();
if (this.config.loop) {
this.config.loop.call(this.scope, this.$Isomer);
}
return requestAnimationFrame(() => {
return this.loop(this.config.loop);
});
}
init() {
this.updateCanvasSize();
if (this.config.loop) {
this.loop();
} else {
this.render();
}
return this.wasInitiated = true;
}
};
Engine.prototype.util = {
color: function(colorCode) {
var converted;
converted = TinyColor(colorCode);
return new Color(converted._r, converted._g, converted._b, converted._a);
},
rotation: function(degrees) {
return degrees * Math.PI / 180;
},
shapeCenter: function(shape) {
return {
x: shape.origin.x + shape.length.x / 2,
y: shape.origin.y + shape.length.y / 2,
z: shape.origin.z + shape.length.z / 2
};
}
};
return Engine;
}).call(this);
}).call(this);
(function() {
// Isomer.JS Engine
// This pen extends a external code.
// https://codepen.io/FelixLuciano/pen/NEBmKN
new Engine({
scope: {
timeline: 0,
timeline2: 0,
timeline2_alternate: 0,
timeline2_alternate2: 0,
animateHUE: 85,
posOffset: 0,
posOffset2: 0
},
shapes: function() {
return [{
type: 'path', // Shadow
color: '#0000001a',
points: [{
没有合适的资源?快使用搜索试试~ 我知道了~
Isomer.js实现乐高积木组成会跳舞的小鸡动画效果源码.zip
共3个文件
js:2个
html:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 37 浏览量
2022-11-04
23:40:34
上传
评论
收藏 11KB ZIP 举报
温馨提示
Isomer.js实现乐高积木组成会跳舞的小鸡动画效果源码.zip
资源推荐
资源详情
资源评论
收起资源包目录
Isomer.js实现乐高积木组成会跳舞的小鸡动画效果源码.zip (3个子文件)
132689959876949877
index.html 24KB
js
tinycolor.min.js 14KB
isomer.min.js 9KB
共 3 条
- 1
资源评论
毕业_设计
- 粉丝: 1934
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功