官方通过端到端提示词验证了 Qwen3.7-Max 在单 HTML 架构下完整实现 Three.js 3D 电子魔方渲染、鼠标拖拽分层旋转动画与状态机解算的能力。
适合的任务:单页 Web 3D 交互原型开发、Three.js / WebGL 物理渲染、几何变换与离散状态机编程。
不适合的任务:依赖复杂后端状态同步的重型 MMORPG 游戏,或需要高精度 CAD 工业模型导入的工程软件。
适用的模型版本:qwen3.7-max。
适用的客户端、Agent 或 API:Qwen Studio、Alibaba Cloud Model Studio、Claude Code、Cursor。
推荐的推理档位和参数:开启 Thinking 模式(高档位),保证 3D 空间矩阵变换与射线检测逻辑一次性推导正确。
请使用 HTML5 + Three.js + OrbitControls 实现一个功能完整的 3D 电子魔方(Rubik's Cube)网页原型。
必须满足以下技术与交互要求:
1. 几何构建与渲染:
- 构建标准 3x3x3 魔方,由 27 个独立子立方体(Cubelet)组成;
- 每个子立方体具有标准 6 面配色(白、黄、红、橙、蓝、绿),内部不可见贴面使用暗灰色材质;
- 光照采用环境光配合方向光,材质具备适当的高光与阴影质感。
2. 交互与旋转物理机制:
- 视角控制:支持右键或背景拖拽自由旋转全局视角;
- 射线检测(Raycasting):支持鼠标左键在魔方面上拾取点击点与拖拽方向;
- 分层旋转:根据拾取的面法线和拖拽向量,自动判断应旋转的魔方切片(Slice:X/Y/Z 轴对应的 9 个子立方体);
- 平滑动画:旋转过程必须通过缓动函数(如 requestAnimationFrame + TWEEN 或平滑插值)呈现 90 度旋转动画,动画期间禁止冲突输入;
- 旋转后状态重置:每次分层旋转完成后,必须正确更新 27 个立方体在全局空间中的实际位置和旋转矩阵(保持父子节点层级解耦)。
3. 辅助功能与 UI:
- 提供一个简洁的浮层控制面板,包含:“随机打乱(Scramble)”按钮和“复原重置(Reset)”按钮;
- 打乱功能需执行 20 步随机合法转动,并带快速连贯动画演示。
4. 交付约束:
- 所有代码整合在一个完整的单 HTML 文件中(通过 CDN 引入 Three.js 等依赖),不依赖任何本地构建流程,直接在浏览器中双击即可运行。将上述提示词输入 Qwen3.7-Max 端点,开启思维链推理以推导 3D 空间四元数与层级解耦矩阵。
接收生成的完整 HTML 代码,保存为 rubiks_cube_demo.html。
在真实 Chrome 浏览器中打开文件,进行多项交互验收:
检查 6 面颜色配置与光照质感;
测试鼠标拾取任意面并滑动,验证切片旋转动画是否顺畅且无模型撕裂;
连续执行打乱与分步还原,验证旋转后的矩阵重置是否稳定;
检查控制台(Console)是否存在 NaN 矩阵或 WebGL 渲染报错。
通义实验室与阿里云官方在社媒公开了基于该提示词由 Qwen3.7-Max 一次性生成的电子魔方实机演示视频。
视频展示了模型在处理复杂 3D 空间坐标系变换(Local Coordinate to World Coordinate)、射线拾取法线判定及缓动动画控制等离散几何任务时的代码闭环能力。
单次生成对 CDN 脚本稳定性有依赖,网络受限环境下应替换为本地静态资源。
空间四元数与多轴复合旋转需要消耗大量推理 Token,如果关闭 Thinking 模式,容易出现魔方切片旋转后轴心漂移或立方体穿模缺陷。
官方发布说明总结:“Built with Qwen3.7-Max: Check out this demo and step-by-step tutorial for an Electronic Rubik's Cube... Experience our agentic capabilities”。
Qwen3.7 Max