Louis

特斯拉小镇 · 画个圈生出一辆 Q 版特斯拉 用单个 HTML 文件 + Canvas 2D（不用任何图片素材、不引外部库和字体）做一个治愈系互动小玩具，用来推广车衣设计网站 tesla-wrap.design。 【用户填写】 主角：Q 版特斯拉小车，覆盖全系 9 款。每款都要一眼认得出是哪辆车： Model 3（新款）：最小的轿车，车尾短、车顶低，前脸是细长大灯 Model Y（新款）：比 Model 3 高一截的跨界 SUV，车顶圆，前脸有一条贯穿灯带 Model Y L：Model Y 的加长六座版，车身更长，有三排侧窗 Model S：最长、最低、最修长的掀背车 Model X：高大的 SUV，招牌是向上掀起的鹰翼门 Cybertruck：不锈钢原色，全是直线和折角，三角形车顶，车头一条贯穿灯条，绝不能画成圆的 Cybercab：两座，像一颗小水滴，香槟金色，没有后窗，蝴蝶门 Roadster：最低最扁的敞篷跑车，默认红色 Semi：车头高高的卡车，前脸圆润，后面拖一小截短挂车 主角外形要点：先把车画成「宝宝」，再保留车型特征。眼睛长在前挡风玻璃上（皮克斯《赛车总动员》那种），车轮又短又胖，整辆车像一颗饱满的软糖。 主角的动作：行驶 + 灯光秀（Tesla Light Show：大灯变色闪烁、车身跟着节拍弹跳、头顶飘音符）+ 停下充电（头顶出现电池图标，一格格充满）+ 打招呼（Model X 掀鹰翼门，Cybertruck 亮灯条，其他车开前备箱，同时冒爱心）+ 原地开心转一圈 车衣（推广核心）：每辆车弹出来都随机穿一套车衣，弹出时头顶飘一个小标签，比如「Model Y · Sakura Pink」。车衣池至少 12 套，比如樱花粉、薄荷赛车条纹、日落渐变、赛博棋盘格、哑光午夜蓝、糖果条纹、银河星点、粉彩迷彩、火焰、电光紫、复古双色、奶油白。双击小车会换一套车衣，换的时候有一圈闪光。 场景主题：加州阳光下的特斯拉小镇。草地上有一条环形柏油小路，整体明亮温暖。 场景里的东西（12 样）：超级充电站（一排 4 个红白充电桩，停车位画线）、车衣工坊小车库（门口堆几卷彩色车衣膜，招牌写 WRAP STUDIO）、星舰和发射塔（全场最高，必须连塔尖一起画完整）、风力发电机、太阳能屋顶小屋加 Powerwall、加州棕榈树、圆滚滚的小树、樱花树、小湖（有小木码头）、测试场锥桶、广告牌（上面是几块车衣色板）、木牌 木牌上的文字：tesla-wrap.design 【画面】 奶油色纸面上漂浮着一块微缩地台，3/4 俯视，四周留出大量空白。地台是圆角方形，露出约 50px 厚的切面：最上面一圈草皮包边，下面是分层的土层，有深浅两三层，夹着小石子和细根。地面按场景铺满纹理，放上场景里的东西，再补小石子、小花、小草、路灯、长椅这类点缀，画面要饱满但不拥挤。 风格要可爱、治愈、饱满、有立体感： 所有物体都用左上方打光的径向渐变球体堆出来，配软阴影和接触阴影。树、灌木、云用很多带明暗的小鼓包堆成。 地面用几万根短笔触加大小色块斑驳，不要平涂。柏油路也要有细颗粒、白色虚线和路缘石。 高的东西（星舰、风车、棕榈树）必须画完整，有顶也有尖，不能被画框截断。左右两边的视觉分量要平衡。 最后加移轴模糊，轻微提高对比度和饱和度，再加一层从暖到冷的柔光渐变。 默认用明亮配色。 不画特斯拉官方 T 标，品牌只用车型名的文字出现，避免商标问题。 【主角】 圆滚滚、胖嘟嘟的宝宝体型：车身短、轮子胖、车舱像一颗泡泡。挡风玻璃上一双大眼睛，带两个高光；前保险杠上有一张小小的微笑，两侧翼子板有腮红，表情温和。 眼睛外眼角和眼皮弧线要向外下垂，不要上挑，否则会显得凶。Cybertruck 也一样，靠车身的直线体现硬朗，眼睛照样圆。 车身是光滑的烤漆质感：有大块柔和高光和环境反光，不加毛边。 每个动作都要一眼看得出来：行驶时车身保持水平，轮毂辐条在转，车尾冒小尘团；灯光秀时大灯明显变色；充电时电量格在涨。 会眨眼。 拎起来时四个轮子的悬挂往下垂一点，显得很萌。 【交互】 在地面上用鼠标画一个圈，圈里就弹出一辆车：easeOutBack 弹出，加星星粒子，再飘出车型 + 车衣名标签。圈越大车越大。默认按顺序轮流出 9 款车，保证前 9 个圈能把全系都看到一遍。圈画在湖里、建筑上、树丛这类停不下的地方，就提示「换块空地画圈吧」。最多 30 辆。 每辆车在自己的圈附近闲逛，随机做各种动作。不下水，不穿过障碍物，彼此会让路；小车会跟着大车走，像车队一样。 可以拖动车（拎起时离地）。松手如果落在不能停的地方，就自动挪到最近的空地，不要弹回原位。点选后按 Delete 删除。 双击车换车衣。 拖动地台外的空白处，或者用右键拖动，来转动视角：左右拖是旋转，上下拖是调俯仰。右上角放 ±45° 和复位按钮，键盘 ← → 也能转。 场景里加几样会动的小东西：风车叶片在转，Optimus 小机器人沿小路散步、偶尔挥手，云在飘，湖面有涟漪，蝴蝶，充电桩偶尔冒出电火花。 屏幕底部放一条双语提示条（中文一行 + 英文小字），提示当前可以做什么。 【技术要求】 地面用 u,v∈[0,1] 的坐标加透视相机（偏航 + 俯仰）。视角变化时地块自动缩放，始终完整装在画框里，计算边界时要把最高的物体（星舰塔尖）也算进去。 分两层： 地面层：每换一次视角重画一次。平的东西（草色斑驳、马路、湖、停车位）先画进一张 uv 贴图，再分三角网格做透视贴图；草叶笔触在屏幕空间里按投影位置重画，保证草叶始终朝上。 竖着的东西：先按固定视角各画成一张小图（自动裁掉透明边），再按相机位置摆放、按远近缩放，和小车一起按屏幕 y 从后往前排序，这样车能开到物体后面。成片的树林要拆成一棵一棵的单独小图。 小车不能用固定小图，因为车头朝向会随视角和行驶方向变化。用「切片堆叠」画：把车按高度切成几十层俯视轮廓，按朝向旋转、按俯仰压扁，从下往上叠。眼睛、轮毂、灯这类贴花按 3D 位置投影，背对相机时隐藏。 障碍物用地面上的圆形占地来判定。车的位置也存在 u,v 坐标里，这样和视角无关。 不要在每一帧里用 ctx.filter blur（非常慢）： 动态阴影改用径向渐变。 转动过程中用不带模糊的草稿画质，松手后再换全画质并淡入。 blur 的半径不跟随缩放变换，要手动乘以渲染倍率。 每帧的移轴模糊用「缩小再放大」加渐变遮罩来做。 对比度和饱和度用 CSS filter 加在 canvas 元素上。 10 辆左右同时在场也要保持 60fps，适配窗口缩放和手机屏幕（触摸也能画圈、拖动）。 加一个录屏模式（URL 带 ?rec）：关掉 requestAnimationFrame，改由 window.__tick(dt) 逐帧推进，随机数用固定种子；显示一个假鼠标指针；底部提示条可以由脚本设置文字。这样能用 Playwright 逐帧截图，导出不掉帧的 1920×1080 视频。 【流程】 先只做静态场景，出 3 张样图给我确认：一张全景、一张 9 款车的特写（同一套车衣，排成一排）、一张同一辆车换 6 套车衣的对比。样图阶段重点检查车够不够可爱、车型认不认得出。 我确认后再做互动版。做完自己在浏览器里测一遍画圈、拖动、双击换车衣、删除和旋转，确认控制台没有报错。 最后用录屏模式录一条约 30 秒、1920×1080 的视频，分镜如下： 全景开场 连画 9 个圈，生出全系车型 圈画进湖里，弹出提示 拖一辆车丢进湖里，看它自动挪回岸边 双击换车衣 转视角，点 45° 按钮，换个角度再画一辆 复位 结尾卡：「Design your own Tesla wrap → tesla-wrap.design」