先看一段 61.5 秒的实际录屏。这是换用 Ming 前录下的 Qwen 版，拆机、出货和取货的过程都在里面：
视频传不了，直接点开看吧：
视频里的机械演示是 2 倍速，旁白保持正常 1 倍速，播放器不用再加速。
点一下“开始自动讲解”，售货机就会自己拆给你看，用中文讲清楚里面的机构怎么配合。外壳透视、货架分离，讲到电机时给个内部特写，饮料掉下来，镜头还会跟着它走。
代码和工程迭代用的是 GPT-6.1-sol，三维场景用 Three.js。中文旁白几经调整，现在用 Ming-3.0-tts，默认是灵小柔女声，也能切到灵楷男声。最后还做了个单文件离线版，断网也能拆着玩。
做下来最费心的，一件是让罐子老老实实落进取货仓，另一件是让讲解员从头到尾听起来像同一个人。
这个项目是分阶段迭代出来的。第一版连货都不会卖，后面的购买、拆解和语音，都是一轮轮补上去的，提示词也跟着问题往下改。
第一版很老实，先当个不会卖货的售货机
起步时，目标就是在浏览器里放一台能转着看的红白售货机。
透明玻璃门，多排饮料，深色展台。鼠标能旋转、缩放、平移，光照和阴影像回事，别一打开像几个塑料盒子叠在一起。
技术栈用了 TypeScript、Vite 和 Three.js。前期研究过开源项目 Teardown 的参数化建模和展示组织方法，售货机的模型、机构与交互则在独立工程里实现。
机身是几何体，罐子也是几何体。饮料包装、屏幕、标签在本地用代码生成，没有去找一套现成售货机模型塞进来，也没有拿别人的饮料品牌贴上去。
罐身标签和屏幕用的是程序生成的贴图。准确说，这个场景没有外部模型和图片素材依赖；要是写成“零贴图”，就把自己代码里的 CanvasTexture 开除了。
第一版放了 48 罐饮料。摆着看挺好，等到要往里加出货机构，问题来了：原来的货道尺寸，没给弹簧和驱动留够位置。
这就跟装修差不多。效果图里沙发冰箱都放得下，真买回来，发现门打不开。
弹簧加进来以后，机身开始接受现实教育
第二阶段要做机械结构和拆解，之前那套“摆得好看就行”的布局得改。
最终调整成四层货架，每层五条货道，每道三罐，一共 20 条独立货道、60 罐饮料。每条货道后面有减速电机，再接短轴、联轴器和螺旋。
这些东西得对上位置。罐子要站在托盘上，螺旋绕着前后方向延伸，罐体处在相邻螺距之间。电机在后面，轴要接得上，前面还得留出一条能让饮料掉下去的通道。
不能为了展示内部，把商品出口顺手用一块漂亮的板封死。那样外观是挺完整，饮料也就完整地待在里面了。
尺寸参考了售货机的常见构型和公开服务资料，但整台机器采用原创概念尺寸，没有真实厂商 CAD。它适合拿来观察原理，别照着下单加工。
最后整理出了 159 个可检查零件。可以选中、高亮、隐藏，也可以把某个电机单独拎出来看。
实际录屏第 21 秒：门、面板、货架和机构分阶段让位，左侧仍在进行中文语音讲解。
拆解还不能只管散开，不管回来。
我的做法是用一个从 0 到 1 的进度值，计算所有零件相对装配原位的偏移。门先往前脱离，再向两侧让位；外壳移开，货架抽出分层，商品抬起，最后分离螺旋、电机和轴。
往回装，就沿同一条路径反向求值。滑块拖到一半再反悔，也从当前进度接着走。
所有位置都从装配原位计算，不用让每个零件各自记一本位移账。否则来回拆几次，很容易出现“每次只偏一点，最后谁也回不去”的家庭装修现场。
让它卖一罐饮料，比让它看起来像售货机麻烦多了
做出货之前，先检查了旋转轴心。
原来螺旋所在的组，原点并不在实际轴线上。直接旋转整个组，弹簧就会绕着错误的位置走，看着像在表演。
修正后，电机外壳固定，输出端、轴、联轴器和螺旋围绕真实轴线一起转动。商品推进距离也跟着螺距和转数算：
推进距离 = 螺距 × 转数
模型里螺距是 0.18 米，转一圈，货道里剩下的罐子同步往前推进一个螺距。前罐完全越过支承边缘，才释放给重力阶段。
实际录屏第 31 秒：驱动机构已经复位，进入电机工作阶段；机身屏幕和侧栏读取同一份交易状态。
后面的下落，采用 1/240 秒固定步长的简化 2.5D 物理：货道横向位置固定，主要计算前后、上下运动，再处理斜板、底板和挡界的碰撞。
它有重力、摩擦和低反弹，但没有做通用三维刚体引擎，也没模拟罐内液体晃动。取货时抬起再向外拿，是明确设计的人为取货路径。
开发中还真抓到过取货仓上饰板干涉路径的问题。另一条需要防的情况是：罐子卡在斜板上不动了，系统以为“速度很低，送达成功”。
所以判定里要检查它确实接触取货底板并稳定。总不能钱收了，饮料在半路躺平，机器宣布自己完成任务。
实际录屏第 40 秒的局部裁图：绿色饮料罐已进入取货仓，翻板打开，方便观察。
出货动作跑通后，还得管住余额、库存和购买状态。金额用整数分，先校验余额与当前货道库存，再一次性扣款并预留商品。正在出货、仓里还有饮料、正在取货或关板，都不能接下一单。
拆解和购买也互锁。电机轴都拆飞了，就别让它继续隔空推罐子。
还有个很小、但不补就很离谱的规则：已经取走的饮料，不能因为点了“显示全部”又回到货架。机械科普可以，赛博永动售货不行。
这些全是本地模拟余额和库存，没有真实支付，也没接硬件。你可以放心投虚拟币，不会研究着研究着，钱包先少五块。
后来，它有点像一个能上手的展品了
到这一步，功能已经不少，但还需要让别人知道该看哪里。
我又补了一层展示和导览：红白机体放进石墨色展厅，金属、烤漆、塑料和玻璃分别调材质，配柔光和环境反射。内部观察时切换更清晰的透明表现，让机构露出来。
中文知识点沿着真实零件位置拉出引线。电机工作时，高亮当前货道的传动路径；前罐释放后，镜头跟随实际罐体的位置。手动拖动相机，可以接管镜头。
自动导览也沿用同一套购买流程。它会先把拆开的驱动装回去，再投虚拟币、出货和取货，确实消耗一件库存。
我不想维护一台负责互动的售货机，再维护另一台专门负责拍视频、什么都不用管的售货机。那样演示时越流畅，自己心里越没底。
后来又补上中文旁白，让导览能边演示边讲。
中文讲解用 Ming，女声和男声都能选
旁白用 Ming-3.0-tts，本地运行的是 0.5B 的 MLX 8bit 版。默认灵小柔女声，可以切换灵楷男声。
音频提前在本地合成，按导览章节播放。网页不运行模型，也不请求在线 TTS，断网照样能听。
播放由用户点击触发，支持试听、调音量和暂停。机械演示开 2 倍速，旁白仍保持 1 倍速；播放失败时保留文字说明。
最后，把售货机和讲解员一起装进 HTML
做本地语音，原本就有一个考虑：这个小展品最好能离线玩。
因此离线版把 JS、CSS 和 26 段 Ming MP3 都内嵌在一个 HTML 文件里。当前约 4.58 MB，在支持 WebGL 2 的 Chrome 里可以直接打开，购买、拆解、相机和语音都保留。
语音模型和推理环境都不打进 HTML。模型只在制作阶段生成音频，网页播放已经做好的文件，反复播放也不需要再调用 TTS 合成服务。
运行库许可和 AI 音频来源说明也随制品保留。把内容收进一个文件，不能顺便把这些说明弄丢。
Vercel 上的网页版也已经更新为 Ming，可以直接体验当前的灵小柔和灵楷配音：
这次用 AI，我实际在做什么
从第一版静态陈列，到可逆拆解、真实状态驱动的出货，再到中文语音导览，需求是逐步长出来的。
GPT-6.1-sol 帮我把这些模块写了出来，但该查的几何关系、暂停边界、库存守恒和听感，还是得一项项过。一个放错位置的旋转轴心，或者一个换了年龄感的女声，都能把“看起来已经做好了”打回去。
现在项目有 109 项单元测试，也做了浏览器交互检查。Ming 版检查过音频文件、控件和播放清理逻辑，保留的完整录屏则来自 Qwen 版，不能拿来当作 Ming 自然播放全程的验证。跨浏览器、真机和长期前台运行，还留着继续验证。
如果也想用 AI 做这类小项目，我会建议先把一个动作做明白。观察和拆解做稳了，再接出货流程。语音也先做一条覆盖几个章节的样例，听听换话题时的衔接，别等整套生成完，才发现讲解员在轮流上班。
我原本想做个能转着看的售货机，后来一路加到连它自己都能讲解自己了。
现在里面有 60 罐饮料。研究了这么久，还是一口没喝上。
本文由 AI图鉴自动抓取并翻译，版权归原作者所有；如需查看原文请点下方链接。
First look at a 61.5-second actual screen. This is the Qwen version of Ming's pre-record, where the process of dismantling the machine, delivering the goods and getting the goods is in:
We can't pass the video. Just show it:
The mechanical presentation in the video is two times the speed, the narration remains normal one times the speed, and the player does not need to accelerate any more.
A word of “starting the auto-discussion” will be shown to you by the vending machines themselves, and in Chinese, you will see how the institutions are working together. The shell saw, the shelf was separated, an internal close-up was given when talking about the power, the drink fell off and shot would follow it.
The code and project trajectories are GPT-61-1-sol and the three-dimensional scene is Three.js. Chinese by-words have been adjusted to now use Ming-3.0-tts, which by default is the voice of a young woman and can reach the voice of an example. Finally, a single document, offline, was made, and the network could be broken.
One of the hardest things to do was to get the cans down to the warehouse, and the other to make the presenters sound like the same person from beginning to end.
The project was phased in. The first edition will not even sell, the latter purchases, decompositions and voice, which will be replaced by a round, and the prompt changes the issue downward.
The first edition is very honest.
At the beginning, the goal was to place a red and white machine in the browser that could be seen.
Transparent glass doors, multiple drinks, dark stands. The mouse rotates, zooms, smooths, lights and shadows are like things, so don't fold them like plastic boxes.
The technology vaults used TypeScript, Vite and Three.js. A previous study of the Parametric Modelling and Organization of the Teardown project was carried out, and the models, institutions and interactions of the vending machines were achieved in independent engineering.
The fuselage is geometry and the canister is geometry. The beverage packaging, screens, labels were generated locally in code, and no off-the-shelf vending machine model was found to fit in, and no other beverage brand was posted.
The canned labels and screens are based on a program-generated poster. To be precise, this scene is not dependent on external models and asset; if it is written as a “collateral map”, the CanvasTexture is fired from his code.
48 cans of drinks in the first edition. It's good to look at it, but when we're about to add it to the pipeline, the problem is: the original routing size did not leave enough room for springs and drivers.
It's like the renovation. It's all right. It's not open.
When the spring came in, the fuselage began to receive real education.
The second phase is to be mechanically structured and dismantled, and the previous “good-looking” layout needs to be changed.
It was eventually restructured into four-storey shelves, five lanes each, three cans each, for a total of 20 stand-alone lanes, 60 cans of beverages. There are speed-reducing machines behind each course, which are followed by short axes, joint axes and spirals.
These things need to be in position. The cans are to be on the tray, spiraled in the direction ahead and forward, and the tanks are in the vicinity of the snail. The electrics are in the back, the axes are connected, and there is a passage that will allow the drinks to fall.
The export of goods should not be blocked with a nice board in order to show the inside. That's how it looks, and the drink is in it.
The size refers to common configurations and open service information for vending machines, but the whole machine uses original conceptual dimensions and does not have a real manufacturer CAD. It's a good way to observe principles. Don't do the bottom line.
Finally, 159 parts can be checked. It can be picked, highlighted, hidden, or it can be carried out alone.
The actual screen is 21 seconds: the doors, panels, shelves and institutions are gradually relinquished, while the Chinese speech is still on the left.
Dismantling can't just spread out and come back.
My approach is to calculate the deviation of all parts relative to their assembly location using a progress value from 0 to 1. The door moves forward and then moves towards both sides; the shell is removed, the shelf is pumped out, the commodity is lifted and the spiral, the electric engine and the axis are separated.
Reload with the same path inverted value. The slider is towed to half, then reversed, and then moved on from the current pace.
All positions are calculated from the assembly location, without the need for each component to record a separate migration. Otherwise, it would easily appear that “no one will ever come back” to the home where the site is renovated.
It's a lot more trouble for him to sell a bottle than make it look like a vending machine.
Before making the goods, check the rotation axis.
The group where the spiral was originally located, the origin was not on the actual axis. If you rotate the whole group, the spring will go around the wrong place and look like a performance.
After correction, the electrical shell is fixed and the output end, axis, coaxe and spiral rotate around the real axis line. The distance from which goods advance is calculated follows the snails and spins:
Propulsion distance = screw length x spin
The snail length in the model is 0.18 metres, with a turn and the rest of the cans in the freight lane synchronizing forward with a screw. The front can completely overwhelms the support edge before being released to the gravity phase.
The actual screen is 31 seconds: the driver has been reset to the electrical working stage; the body screen and sidebar read the same trading status.
The latter destination is a simplified 2.5D physics using 1/240 seconds of fixed pace: the horizontal position of the cargo lane is fixed, primarily calculating pre-, pre-, upper- and down motion, and then dealing with the collisions of the slopes, floors and barriers.
It is gravitational, friction and low rebound, but it is not used as a generic 3-D conjunction engine and does not simulate liquid shaking in the tank. When the goods are taken, they are carried up and taken out of the country.
The issue of access to warehouse boards and access routes was actually caught in development. Another situation that needs to be protected is the fact that the tank is stuck on the tiltboard and the system considers it “low-speed and successful”.
So the decision is to check that it did contact the bottom plate and stabilize. I can't afford it. The drink is half way flat and the machine announces it's done.
Local map of 40 seconds of the actual screen: Green beverage cans have entered the pick-up warehouse, flipped the plate and opened for observation.
After moving, the balance, inventory and purchasing status are also maintained. The amount is measured in whole numbers, the balance is verified first and the current cargo track inventory is again withheld and the goods are set aside. Goods are being shipped, beverages are still in the warehouse, goods are being picked up or boards are not available to take the next order.
Dismantling and purchasing are also interlocking. The axle has been removed, so don't let it keep pushing the can.
There is also a very small but unfilled rule: a drink that has been taken cannot be returned to the shelf because it has been ordered “to show all”. Mechanical science can do it. Saber can't sell it forever.
These are all local simulated balances and inventories that are not actually paid and are not connected to hardware. You don't have to vote for it, you don't study it, you lose five dollars in your wallet.
Later, it was kind of like an exhibit that could be used.
At this point, there are many functions, but others need to know where to look.
I have added a layer of displays and guides: the red and white machine is placed in the graphite gallery, and metal, paint, plastic and glass are modified separately, with soft light and environmental reflection. In-house observations are made in exchange for clearer, transparent performance, and institutions are exposed.
The Chinese point of knowledge pulls a lead along the real parts position. When the electric power works, the current conveyor path is highlighted; shot follows the actual tank after the former tank is released. Manual towed camera to take over shot.
The automated guide also follows the same purchase process. It will first reload the undiscovered drive, then drop the virtual currency, deliver and collect, and indeed consume an inventory.
I do not want to maintain an interactive vending machine and another dedicated to video production and nothing. That's the smoother the show, the less self-defeating.
Later, Chinese was added to the guide so that the presentation could be accompanied by presentations.
It's in Chinese, Ming, women and men.
Narrative in Ming-3.0-ttts. Locally run MLX 8bit version of 0.5B. By default, the little voice of the spirit can be switched to the voice of the role model.
Audio is previously synthesized locally and is shown by the guide chapter. The web page does not run a model and does not request an online TTS, which can be listened to via the Internet.
Plays are triggered by a user click to support auditions, volume adjustments and pauses. Mechanical demonstration opens 2 times the speed, and citation remains 1 times the speed; text description is maintained when playing failure.
Finally, load the vending machine with the lecturer.
There's already one consideration for local voice: this little exhibit better play offline.
So offline embeds JS, CSS and 26 paragraphs Ming MP3 in an HTML file. Currently about 4.58 MB can be opened directly in Chrome, which supports WebGL 2, and both purchase, dismantle, camera and voice.
Neither the voice model nor the reasoning environment entered HTML. Models generate audio only at the production stage, web pages broadcast documents that have been completed and repeated broadcasts do not need to call TTS synthesis services.
The operating library licence and AI audio source description are also kept with the product. The contents could not be lost in a document.
The website page on Vercel has also been updated to be Ming, which is a direct experience of the current elixir and elixir voiceover:
This time with AI, what am I actually doing?
From the first static display to reversible, real-state driven deliveries, to the Chinese voice guide, the demand is growing.
GPT-6.1-sol helped me write these modules, but the geometry of the checks, the suspension of borders, the maintenance of stocks and the soundness of the records were one item that was passed. A wrong-placed rotation axis, or a woman with a different sense of age, can hit back with “looks done”.
Projects now have 109 unit tests and browser interactive checks. The Ming version has checked audio files, controls and play-cleaning logic, while the full video is kept from the Qwen version and cannot be used as validation for the entire Ming natural play. Cross-browsers, real machines and long-term front desk are operated and continue to be validated.
If you want to do this little project with AI, I'd suggest you make it clear. Observation and dismantling are stabilized and the process of delivery is then carried out. Voice is also given an example covering several chapters, listening to the interface when the subject is changed, and not waiting for the whole set to be produced before the presenter turns to work.
I wanted to be a vending machine, and then I put it all the way to explain myself.
Now there's 60 cans of drinks in there. After all this research, I haven't had a drink.
Auto-fetched and translated by AI Atlas. All rights belong to the original author.