小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
介绍
我们心心念念的国庆就要开始啦，假期人挤人，不如宅家里，自然少不了废宅快乐水和薯条啦。
本期我们就会利用Zdog.js这款轻量级的3d引擎绘制薯条。因为我也是刚开始玩这款引擎，所以如果做的不好还请多包含。。
因为本期存在这大量重复的绘制代码，所以我们只讲关键的部分。大致会从基本结构，薯条盒子，绘制薯条来讲解。
正文
1.基础结构
我们本次由vite做的搭建，不说别的，先来安装一下vite和zdog吧。
yarn add -D vite
yarn add zdog
接下来，我们要在创建index.html，里面用module模式引入app.js作为主逻辑脚本。
<canvas id="canvas"></canvas>
<script type="module" src="./app.js"></script>
当然我们吃薯条前要有个仪式感，当然要先铺个桌布啦。
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
}
#canvas {
background-image: repeating-linear-gradient(
0deg,
hsla(340, 87%, 75%, 0.2) 0px,
hsla(340, 87%, 75%, 0.2) 30px,
transparent 30px,
transparent 60px
),
repeating-linear-gradient(
90deg,
hsla(340, 87%, 75%, 0.2) 0px,
hsla(340, 87%, 75%, 0.2) 30px,
transparent 30px,
transparent 60px
),
linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
}
很轻松的，我们就利用repeating-linear-gradient循环出一个铺满全屏的粉色桌面。
然后，我们就开始写主逻辑了，先引入然后初始化一下。
/*app.js*/
import * as Zdog from "zdog";
const illo = new Zdog.Illustration({
element: "#canvas",
resize: "fullscreen",
dragRotate: true,
zoom: 1.2
});
function animate() {
illo.updateRenderGraph();
requestAnimationFrame(animate);
}
animate();
这里不像three.js那样要假设摄像机，各种灯光等操作。我们只要使用Illustration产生实例，element是要使用的画布元素，resize为fullscreen，我们期望画布会铺满屏幕，dragRotate开启后就可以用鼠标来拖动，zoom是缩放大小。
然后只要调用实例下的updateRenderGraph方法来更新，配合 requestAnimationFrame来实现重绘。
2.薯条盒子
我们这里主要讲述几种形状的绘制。
new Zdog.Rect({
addTo: illo,
width: 150,
height: 100,
stroke: 5,
color: "rgb(249,78,65)",
fill: true,
translate: {
x: 0,
y: 120,
},
rotate: {
x: Zdog.TAU / 4,
},
});
我们利用Rect类先创建一个矩形，这些参数顾名思义，需要注意的是Zdog.TAU是zdog里面的常量，可以理解为2*PI。
然后我们继续再学Shape类，他是zdog中最强的图形类，因为他可以根据你传入的路径变成任何图形。
let cartonSide1 = new Zdog.Shape({
addTo: illo,
path: [
{
x: 75,
y: 120,
z: 0,
},
{
x: -75,
y: 120,
z: 0,
},
{
x: -100,
y: -30,
z: 30,
},
{
x: 100,
y: -30,
z: 30,
},
],
stroke: 5,
fill: true,
color: "rgb(255,111,86)",
translate: {
x: 0,
y: 0,
z: 50,
},
rotate: {
x: 0,
},
});
我们是要形成盒子，这样写还是太麻烦了，我们就可以利用实例中的copyGraph方法，克隆出一个相同的面来，改变一下角度就可以满足需求了~
cartonSide1.copyGraph({
translate: {
x: 0,
y: 0,
z: -50,
},
rotate: {
y: Zdog.TAU / 2,
},
});
至于后面的操作，也是蛮繁琐的，就是利用这些简单的方法去绘制，这里就不多占用篇幅了。
最后，是这样的：
3.绘制薯条
我们绘制薯条还会学一个Box类，顾名思义，他是专门绘制盒子的，具有长宽高等属性设置起来十分的方便。
let ff = new Zdog.Box({
addTo: illo,
width: 20,
height: 20,
depth: 240,
stroke: false,
color: "rgb(255,222,93)",
leftFace: 'rgb(255,222,73)',
rightFace: 'rgb(255,222,64)',
translate: {
x: 0,
y: -10,
},
rotate: {
x: Zdog.TAU / 4,
},
});
另外还要值得说的就是zdog也可以设置面的颜色，我们这里就设置了左右面不同的颜色。
就一根太像香炉了，咱们多方几根吧，国庆七天咱们就放气根，还是利用copyGraph做拷贝来实现。
ff.copyGraph({
depth: 220,
translate: {
x: -50,
y: 0,
},
rotate: {
x: Zdog.TAU / 4,
y: Zdog.TAU / 36,
z: Zdog.TAU / 2,
},
})
这里就先写一个，后面太多重复的就不占用篇幅了。
大功告成，在线演示：
Zdog.js还可以创造出好多好有趣的效果，不来尝试一下么~
