旋转拉姆达标志的诞生
什么，你在用手机看这个页面？不，不，别这样，听我的，用电脑打开吧。
这是一个Zdog的伪3D效果，我花了几天时间去实现它。对于我这种没技术还想建站的小白来说，这可真是一件难事。
由于是伪3D，所以当你慢慢旋转它的时候，会发现这玩意的遮挡关系有问题，并且将其旋转至底部时白环会闪烁。
代码
部分代码参考了Zdog Test。
Markdown
对于我的站点，可以在Markdown中插入以下HTML片段：
<div>
<canvas class="zdog-canvas" width="600" height="600"></canvas>
</div>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="{{ site.url }}{{ site.baseurl }}/assets/js/obsfm/largelambdalogo.js"></script>
如果你想使用，请换成你的JS。
或者你直接用我的也行：
<div>
<canvas class="zdog-canvas" width="600" height="600"></canvas>
</div>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="https://obscurefreeman.github.io/blog/assets/js/obsfm/largelambdalogo.js"></script>
HTML
如果你想在HTML里嵌入这玩意：
<html>
<body>
<div>
<canvas class="zdog-canvas" width="600" height="600"></canvas>
</div>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="assets/js/obsfm/largelambdalogo.js"></script>
</body>
</html>
JS
JS文件决定了你的伪3D模型是什么样子的。
编辑器
如果你不想边敲代码边凭空想象模型，可以使用以下非官方工具进行建模，建议先去官网上看看原理再动手。
此动画的JS
再次感谢Zdog Test的优秀代码。
let colors = [
"#ffffff",
"#ececec",
"#404040",
"#cfa926",
"#fccd0c",
"#1c1c1c"
];
let height = 40;
let width = 20;
let depth = 10;
let duration = 3.0;
let speed = 0.03;
let isSpinning = true;
let illo = new Zdog.Illustration({
// set canvas with selector
element: '.zdog-canvas',
zoom: 2,
dragRotate: true,
onDragStart: () => isSpinning = false,
onDragEnd: () => isSpinning = true
});
let group = new Zdog.Group({
addTo: illo
});
let outline_1 = new Zdog.Ellipse({
addTo: illo,
diameter: 200,
rotate:{z:10},
stroke: 20,
color: colors[2]
});
let outline_2 = new Zdog.Ellipse({
addTo: illo,
diameter: 250,
stroke: 5,
color: colors[0]
});
let box1 = new Zdog.Box({
addTo: group,
width: 100,
height: 10,
depth: 2,
stroke: 20,
color: colors[0],
closed: true,
leftFace: true,
rotate: { x: 0, y: 0, z: 0.9599310885968813 },
translate: { x: 5 }
});
let box2 = new Zdog.Box({
addTo: group,
width: 50,
height: 10,
depth: 2,
stroke: 20,
color: colors[0],
closed: true,
leftFace: true,
rotate: { x: 0, y: 3.141592653589793, z: 0.9599310885968813 },
origin: { x: 0 },
translate: { x: -25, y: 20 }
});
let box3 = new Zdog.Box({
addTo: group,
width: 10,
height: 10,
depth: 2,
stroke: 20,
color: colors[0],
closed: true,
leftFace: true,
rotate: { x: 0, y: 0, z: 0 },
translate: { x: -25, y: -39 },
origin: { x: 0 }
});
let box4 = new Zdog.Box({
addTo: group,
width: 5,
height: 10,
depth: 2,
stroke: 20,
color: colors[0],
closed: true,
leftFace: true,
rotate: { x: 0, y: 0, z: -0.6108652381980153 },
translate: { x: 40, y: 31, z: 0 },
origin: { x: 0 }
});
illo.updateRenderGraph();
let elapsedSeconds = () => performance.now()/1000;
let fract = (x) => x - Math.floor(x);
let easeInOutQuad = (t) => t<.5 ? 2*t*t : -1+(4-2*t)*t ;
let animate = () =>
{
let time = fract(elapsedSeconds()/duration);
let interval = Math.floor(time*2.0);
//Zdog.TAU
let target = Math.PI*easeInOutQuad(fract(time*2.0)) + Math.PI*interval;
// console.log(interval);
if(isSpinning)
{
outline_1.rotate.y = target;
outline_2.rotate.y = target*2.0;
group.rotate.y = target;
// i.rotate.y = target*2.0;
// h.rotate.y = target*2.0;
}
illo.updateRenderGraph();
requestAnimationFrame( animate );
};
animate();
另一个小拉姆达标志
是的，这是一个小拉姆达，我本来打算把它用在首页，但是它太丑了。
这里有一些被注释掉的代码，这是调试用的。
<!DOCTYPE html>
<html>
<head>
<style>
/* *{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background: #fccd0c;
} */
.container {
display: flex;
align-items: center;
}
.zdog-canvas {
margin-right: 20px; /* 调整文字和动画之间的间距 */
}
.text {
font-size: 25px;
color: #ffffff;
font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
font-weight: bold;
}
</style>
</head>
<body>
<!-- <div>
<canvas class="zdog-canvas" width="600" height="600"></canvas>
</div>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="assets/js/obsfm/largelambdalogo.js"></script> -->
<div class="container">
<canvas class="zdog-canvas" width="60" height="60"></canvas>
<div class="text">不喜欢新事物，但同样不循规蹈矩。</div>
</div>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="assets/js/obsfm/lambdalogo.js"></script>
</body>
</html>
留下评论