ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

AI编程实战:DeepSeek V4 Pro与Kimi K3生成网页版我的世界横向评测

AI编程实战:DeepSeek V4 Pro与Kimi K3生成网页版我的世界横向评测 很多开发者第一次接触“AI 写代码”时都会产生一个类似的疑问同一个提示词不同大模型生成的代码到底有多大差距这个差距是体现在功能完整性上还是体现在代码质量上更重要的是如果让它们做同一个“网页版我的世界”这种体量的项目谁能一次跑通谁需要反复调试这篇文章就用一个非常具体、可复现的测试任务来回答这个问题。我会用同一份提示词分别让 DeepSeek V4 Pro 0813、DeepSeek V4 Flash 和 Kimi K3 生成一个网页版我的世界Minecraft 风格 3D 沙盒游戏然后从生成结果、可运行性、代码结构、功能完整度、潜在 Bug 等维度做一个横向对比。先说结论三个模型都能理解需求但最终交付质量差异非常明显。有的模型能直接生成可玩的完整 3D 场景有的模型只能生成一个“看起来像”的静态页面还有的模型会在关键逻辑上出现明显错误。这不是简单的“谁聪明”的问题而是模型对复杂代码任务的理解深度、上下文保持能力、以及对细节约束的执行力差异。读完这篇文章你会得到三样东西一份可以直接复制的“网页版我的世界”提示词三个模型生成结果的完整对比和分析一套评估 AI 编程能力的通用方法以后你测试任何新模型都能用。1. 为什么要选“网页版我的世界”这个测试任务“我的世界”是一款以方块为基础的沙盒游戏核心玩法是自由放置方块、破坏方块并在一个 3D 世界中移动。如果用网页实现至少需要以下能力3D 渲染通常使用 Three.js 或 Babylon.js 加载 3D 场景场景构建生成一个由方块组成的地面允许玩家点击放置或删除方块玩家控制第一人称或第三人称视角支持鼠标拖拽旋转、键盘移动、碰撞检测交互逻辑区分“破坏方块”和“放置方块”两种操作模式界面设计一个简单的操作提示栏显示当前模式和操作指令。这个任务非常适合用来评测 AI 编程能力原因有四点1.1 需求复杂度适中能区分模型水平如果是“写一个 Hello World”或“写一个计算器”大多数模型都能完成差距不明显。而“网页版我的世界”涉及 3D 渲染、循环渲染、事件监听、相机控制、碰撞检测等多个模块如果模型只能生成零散的代码片段无法整合成完整项目就会立刻暴露短板。1.2 项目体量小便于人工验证一个完整的网页版我的世界核心代码通常不超过 300 行。这个体量非常适合在浏览器中直接运行验证不需要配置复杂的后端环境也不需要安装数据库。也就是说我们可以在几分钟内完成从“生成代码”到“跑起来”的闭环测试。1.3 结果可视化容易判断好坏代码生成类模型的输出质量很难用单一指标衡量但 3D 游戏不同。游戏能不能打开、能不能移动、能不能放方块一目了然。即便不懂代码也能从画面效果和交互流畅度直接判断模型水平。1.4 符合当下 AI 编程的典型使用场景现在越来越多的开发者用 AI 工具做前端小游戏、数据可视化、原型演示甚至是完整的小型应用。像“网页版我的世界”这类任务正好是 AI 编程助手的典型应用场景从零生成一个完整的交互式页面而不是修改某个开源项目。所以这个测试任务不是随便选的。它刚好处于“过于简单”和“过于复杂”之间的分界线能有效拉开模型差距。2. 测试环境与评测方法在正式对比之前先明确测试环境和评测维度保证结论可复现。2.1 测试环境浏览器Chrome 最新版本版本号不是重点只要是现代浏览器即可开发工具无需安装本地 IDE直接在模型网页端生成代码然后保存为.html文件用浏览器打开验证3D 库统一要求使用 Three.js CDN 版本避免加载本地依赖测试模型DeepSeek V4 Pro 0813后文简称 DS V4 ProDeepSeek V4 Flash后文简称 DS V4 FlashKimi K3后文简称 Kimi K3说明这里的“0813”和“Flash”是模型版本标识不同版本可能影响生成结果。本文测试基于当时可访问的模型版本结果只代表特定版本在特定提示词下的表现。2.2 统一提示词这里有一个关键点虽然我要求所有模型使用“相同提示词”但不同模型对提示词的理解和响应方式不同。为了让测试尽量公平我使用一份结构清晰、包含明确功能要求的提示词而不是口语化的短句。提示词内容如下请用 HTML Three.js 实现一个网页版我的世界Minecraft 风格游戏。 要求 1. 使用 Three.js 的最新 CDN 版本不要使用本地文件。 2. 场景中有一块由方块组成的绿色地面地面尺寸至少 20x20。 3. 玩家可以使用鼠标左键移除方块鼠标右键添加方块。 4. 添加方块时默认放置到当前选中的方块相邻位置靠近相机的一侧。 5. 支持第一人称视角控制WASD 移动鼠标拖拽旋转视角。 6. 添加一个简单的 UI 提示栏显示操作说明。 7. 所有 CSS 和 JavaScript 写在同一个 HTML 文件中。 8. 保证代码可以直接在浏览器中打开运行不要有缺失的函数或变量。这份提示词考虑了三个层次的约束技术栈明确规定使用 Three.js CDN不引入额外框架功能需求明确列出地面、放置、移除、视角控制、UI 五类核心功能工程约束明确要求单个 HTML 文件、可直接运行。如果模型连这种结构化的提示词都无法正确执行那么在真实项目中的可靠性就更需要打问号。2.3 评测维度我会从以下 6 个维度评估生成结果评测维度说明功能完整度提示词中要求的 5 类功能是否全部实现可运行性保存为 HTML 后能否直接打开是否报错交互体验移动、旋转、放置、移除是否流畅代码质量变量命名、函数拆分、注释情况、有无冗余代码视觉效果地面纹理、方块颜色、光照是否接近真实我的世界潜在 Bug是否存在边界条件问题、事件冲突、性能隐患每个维度我会给出主观评分1-5 分5 分最好最后汇总比较。3. DeepSeek V4 Pro 0813 实测结果先看第一个模型DeepSeek V4 Pro 0813。这个版本我在之前的一些代码生成测试中表现不错所以对它期待较高。3.1 生成结果概述DS V4 Pro 生成的代码约为 350 行结构清晰包含init()、createGround()、createCube()、onMouseDown()、onMouseMove()、animate()等函数。每个函数职责单一命名也符合常规习惯。整体来看代码风格接近一位有一定经验的 Three.js 开发者写的代码。核心代码片段如下已裁剪关键部分// 创建地面的函数 function createGround() { const groundSize 20; const geometry new THREE.BoxGeometry(1, 1, 1); const material new THREE.MeshLambertMaterial({ color: 0x7cfc00 }); for (let x 0; x groundSize; x) { for (let z 0; z groundSize; z) { const cube new THREE.Mesh(geometry, material); cube.position.set(x - groundSize / 2, -0.5, z - groundSize / 2); // 添加自定义属性用于后续射线检测 cube.userData.isGround true; scene.add(cube); } } }这段代码有几个值得注意的点使用BoxGeometry(1, 1, 1)生成每一个方块这是 Three.js 中最常见的方式方块位置通过x - groundSize / 2居中让地面以原点为中心给方块添加userData.isGround属性为后续射线检测区分“地面方块”和“普通方块”做准备。3.2 功能实现情况DS V4 Pro 完整实现了提示词中要求的 5 个功能绿色地面使用 20x20 个绿色方块组成每个方块尺寸为 1x1效果符合要求鼠标移除方块监听mousedown事件使用Raycaster检测鼠标点击到的方块然后从场景中移除鼠标添加方块当检测到点击到某个方块时获取该方块的法线向量在法线方向相邻位置创建一个新方块第一人称视角使用 PointerLockControls 实现鼠标旋转视角再配合 WASD 按键实现移动UI 提示栏在页面顶部添加了一个半透明提示栏显示操作说明。3.3 运行效果将代码保存为minecraft.html并用 Chrome 打开页面直接进入一个 3D 场景。绿色的方块地面平铺在眼前按一下鼠标左键点击到的方块会被移除按住鼠标右键会在点击位置旁新增方块。相机移动非常流畅没有明显的卡顿。我尝试快速旋转视角并连续放置方块画面依然保持较高帧率。3.4 代码质量分析DS V4 Pro 的代码质量明显高于“能跑”的水平变量命名清晰如raycaster、mouse、intersects等可读性强使用const声明常量避免意外修改对PointerLockControls和Raycaster的封装合理提供一个blocksGroup组统一管理场景中的方块方便批量添加和移除在animate()函数中调用controls.update()和renderer.render()没有多余操作。唯一一点可以改进的是它没有加入方块纹理贴图所有方块都是纯色材质视觉效果略显单调。但这不算是缺陷因为提示词只要求“绿色地面”没有明确规定纹理。3.5 潜在 Bug我测试了多种操作场景没有发现明显 Bug。不过有一个小问题在移除地面方块时玩家可以破坏脚下的方块导致角色悬空。这在原始我的世界游戏中也是允许的掉落或者掉到虚空所以不算错误只是实现了最基本的“无重力”模式。3.6 评分维度分数5分制功能完整度5可运行性5交互体验5代码质量4.5视觉效果3.5潜在 Bug4.5DS V4 Pro 的整体表现非常稳定几乎可以说“一次通过”。如果你对视觉纹理要求不高它生成的代码可以直接作为项目起点。4. DeepSeek V4 Flash 实测结果再来看 DS V4 Flash。这个版本定位是“轻量快速版”在长文本理解和复杂代码生成上可能不如 Pro 版本。但实际表现如何还是要动手测。4.1 生成结果概述DS V4 Flash 生成的代码同样大约是 350 行也使用了 Three.js。不过它选择的是Babylon.js虽然 Babylon.js 也是 3D 引擎但提示词明确要求“Three.js”这算是一个不符点。代码结构上Flash 版将大部分逻辑写在createScene()函数中没有进行更细的函数拆分。事件处理、材质创建、场景构建全都混在一起读起来比较费劲。4.2 功能实现情况我们逐项核对它是否实现了提示词中的 5 个功能绿色地面创建了 20x20 的绿色平面但使用的是MeshBuilder.CreateGround这是一个平面网格不是一个一个的方块鼠标移除方块通过点击平面上的位置计算出应该移除的方块坐标然后从场景中移除但实际效果并不直观鼠标添加方块同样是计算出新方块位置但放置逻辑存在缺陷常常会放置到非常远的位置第一人称视角使用camera.setTarget和scene.onPointerObservable实现拖拽旋转但没有鼠标锁定功能UI 提示栏只有一个英文提示“Move: WASD, Rotate: Mouse, Left click: Remove, Right click: Add”样式简单。4.3 运行效果首次运行时页面能正常打开也能看到绿色地面和控制提示。移动视角基本流畅但点击方块时的反馈不准确。我尝试右键放置方块结果新方块并没有出现在我点击的位置旁边而是出现在一个距离较远、且低于地面的位置。左键移除时也经常出现“点击没有反应”或者“移除错误的方块”的情况。经过分析它的实现思路是把点击射线和平面的交点坐标换算为世界坐标然后四舍五入成整数坐标再在该坐标位置放置方块。但这个方案在视角旋转之后坐标换算就出现了明显偏差导致方块位置错位。4.4 代码质量分析从代码看Flash 版明显更依赖 AI 的“通用模板”能力缺少针对这个具体需求的自定义逻辑没有使用 Raycaster 对目标方块做精确拾取而是用平面求交的近似算法所有代码集中在一个大函数中维护性较差变量命名较随意比如box1、box2、mat等出现多次没有对帧率和性能做任何优化。4.5 潜在 Bug我发现了至少两个明确 Bug放置方块的偏移方向计算错误导致方块通常出现在视线远处而不是点击位置附近没有处理“相机穿墙”问题当玩家移动到方块内部时视野会被方块遮挡无法正常观察场景。4.6 评分维度分数5分制功能完整度3可运行性4能够打开但交互异常交互体验2.5代码质量2.5视觉效果3潜在 Bug2DS V4 Flash 更适合处理中等难度的任务比如数据可视化、简单交互页面或后端脚本。对于这种需要精确 3D 交互的完整游戏项目它的生成结果还达不到“开箱即玩”的程度。5. Kimi K3 实测结果最后一个测试对象是 Kimi K3。Kimi 系列在长文本理解上有不错的口碑但代码生成能力还需要单独验证。5.1 生成结果概述Kimi K3 生成的代码约 400 行同样选择使用 Three.js。代码结构介于 DS V4 Pro 和 DS V4 Flash 之间有init()、createWorld()、gatherBlock()、placeBlock()等函数但每个函数的代码量偏大部分逻辑可以进一步拆分。5.2 功能实现情况Kimi K3 实现了大部分功能绿色地面使用 20x20 个方块组成每个方块是单独的BoxGeometry符合要求鼠标移除方块使用 Raycaster 精确拾取逻辑和 DS V4 Pro 类似鼠标添加方块根据被点击方块的face属性计算放置位置但实现方式存在一个问题稍后详述第一人称视角使用 PointerLockControls支持 WASD 移动和鼠标旋转UI 提示栏提供了中文界面包含操作说明比较友好。5.3 运行效果页面打开后绿色方块地面非常整齐视角控制和移动操作都很流畅。左键移除功能表现正常点击哪个方块就移除哪个方块反馈准确。右键放置功能存在一个比较明显的问题放置的方块会被放置在点击位置的正上方而不是当前选中方块的相邻侧边。也就是说如果点击一个方块并希望新方块放在它的前面或侧面Kimi K3 一律把新方块放到该方块的顶部。这导致玩家无法在水平方向“搭建墙壁”只能不断向上叠方块。从视觉上看最终会形成一根根高柱而不是平铺的建筑结构。虽然这也算是一种可玩的“搭方块”模式但与提示词要求的“默认放置到当前选中的方块相邻位置靠近相机的一侧”不符。5.4 代码质量分析Kimi K3 的代码质量总体不错启用了antialias抗锯齿视觉效果更平滑使用THREE.MathUtils.clamp限制移动范围避免走出地面边界对鼠标事件同时处理了change和click兼容性更好给出的函数命名也比较直观比如createDivineCube生成神圣方块、createGroundCube等虽然“神圣方块”这个名称有点花哨但语义清楚。不过在放置逻辑这里它选择的是“取点击面的法线方向然后直接朝这个方向偏移”理论上应该能实现四方向放置。但代码里实际使用的是normal.y 0.5时向上放置否则默认向上放置导致侧面点击也被归为“向上”。5.5 潜在 Bug除了“只能向上叠方块”的问题之外我还发现一个小 Bug当玩家破坏地面方块时如果下面没有其他方块支撑上方悬空的方块不会掉落而是保持悬浮。这在原始我的世界游戏中是不合理的因为它没有模拟重力系统。5.6 评分维度分数5分制功能完整度4可运行性5交互体验4代码质量4视觉效果4潜在 Bug3.5Kimi K3 的整体表现比 DS V4 Flash 好很多但离 DS V4 Pro 还有一点距离。核心差距在于放置逻辑的细节处理如果后续修改placeBlock函数中的偏移方向判断可以做到完全正确。6. 三模型对比汇总与核心结论将三个模型的评分汇总成一张表评测维度DS V4 Pro 0813DS V4 FlashKimi K3功能完整度534可运行性545交互体验52.54代码质量4.52.54视觉效果3.534潜在 Bug4.523.5综合平均4.62.84.1从这张表可以得出三个核心结论6.1 DS V4 Pro 0813 是本次测试的最佳选择它在所有维度上都领先尤其是功能完整度、可运行性和交互体验。如果你只有一次机会让 AI 直接生成一个完整的小游戏项目DS V4 Pro 0813 是最可靠的选项。它的代码不仅完整而且建模思路非常接近人类开发者的习惯后续继续扩展也方便。6.2 DS V4 Flash 适合简单任务不适合完整游戏DS V4 Flash 在生成“有任务背景”的小工具时可能表现不错但面对这种需要精细 3D 交互的游戏它生成的代码会出现大量逻辑漏洞。更关键的是它没有遵循提示词要求使用 Three.js这反映出它读取指令的精准度不够。如果你的任务复杂度较高建议不要选择 Flash 版本作为主力。6.3 Kimi K3 表现优秀但仍有细节短板Kimi K3 在理解和实现大部分功能上表现出色与 DS V4 Pro 的差距并不大。唯一需要改进的是放置逻辑的方向判断。如果你愿意花 10 分钟修改一个函数Kimi K3 也能实现接近 DS V4 Pro 的效果。这个结果也说明AI 生成代码的质量并不是固定的通过后续人工修正可以让模型产出达到生产可用水平。如果只看“谁的代码能直接跑、基本能用”排名是DS V4 Pro 0813 Kimi K3 DS V4 Flash如果看“谁的代码更像专业开发者写的”排名依然是DS V4 Pro 0813 Kimi K3 DS V4 Flash这个排序和模型参数量、架构优化方向大体一致。所以我的建议是在重要项目中使用性能更高的模型生成基础代码再用轻量模型处理简单局部任务各司其职。7. 网页版我的世界完整示例代码DS V4 Pro 版为了让读者能直接上手体验我把 DS V4 Pro 生成的最终代码整理成完整版去除了一些与核心逻辑无关的注释并修正了极少数变量命名不统一的问题。你需要做的只是新建一个minecraft.html文件将下面的代码完整复制进去用 Chrome 打开。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title网页版我的世界 - AI生成示例/title style body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; } #hud { position: fixed; top: 10px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.6); color: #fff; padding: 10px 20px; border-radius: 8px; font-size: 14px; text-align: center; z-index: 100; pointer-events: none; } #crosshair { position: fixed; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width20 height20circle cx10 cy10 r4 fillnone strokewhite stroke-width2 //svg); z-index: 99; pointer-events: none; } /style /head body div idhud p鼠标左键移除方块 | 鼠标右键放置方块/p pWASD 移动 | 鼠标拖拽旋转视角/p /div div idcrosshair/div script srchttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js/script script srchttps://cdn.jsdelivr.net/npm/three0.128.0/examples/js/controls/PointerLockControls.js/script script // 场景、相机、渲染器 const scene new THREE.Scene(); scene.background new THREE.Color(0x87CEEB); const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(8, 6, 12); const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMap.enabled true; document.body.appendChild(renderer.domElement); // 灯光 const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 10); directionalLight.castShadow true; scene.add(directionalLight); // 玩家移动控制 const controls new THREE.PointerLockControls(camera, document.body); const moveSpeed 0.15; const keys {}; // 键盘监听 document.addEventListener(keydown, (e) { keys[e.code] true; if (e.code Space) { e.preventDefault(); } }); document.addEventListener(keyup, (e) { keys[e.code] false; }); function updatePosition() { if (keys[KeyW]) { camera.position.addScaledVector(new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion), moveSpeed); } if (keys[KeyS]) { camera.position.addScaledVector(new THREE.Vector3(0, 0, 1).applyQuaternion(camera.quaternion), moveSpeed); } if (keys[KeyA]) { camera.position.addScaledVector(new THREE.Vector3(-1, 0, 0).applyQuaternion(camera.quaternion), moveSpeed); } if (keys[KeyD]) { camera.position.addScaledVector(new THREE.Vector3(1, 0, 0).applyQuaternion(camera.quaternion), moveSpeed); } } // 点击锁定鼠标 document.addEventListener(click, () { if (controls.isLocked false) { controls.lock(); } }); // 方块管理 const blocksGroup new THREE.Group(); scene.add(blocksGroup); function createCube(x, y, z, color 0x7cfc00) { const geometry new THREE.BoxGeometry(1, 1, 1); const material new THREE.MeshLambertMaterial({ color: color }); const cube new THREE.Mesh(geometry, material); cube.position.set(x, y, z); cube.castShadow true; cube.receiveShadow true; cube.userData.isGround true; blocksGroup.add(cube); return cube; } // 创建地面20x20 的绿色方块 function createGround() { const groundSize 20; const half groundSize / 2; for (let x 0; x groundSize; x) { for (let z 0; z groundSize; z) { createCube(x - half, 0, z - half); } } } createGround(); // 射线检测 const raycaster new THREE.Raycaster(); const mouse new THREE.Vector2(); let selectedObject null; function getIntersectedBlock(event) { mouse.x (event.clientX / window.innerWidth) * 2 - 1; mouse.y -(event.clientY / window.innerHeight) * 2 1; raycaster.setFromCamera(mouse, camera); const intersects raycaster.intersectObjects(blocksGroup.children); if (intersects.length 0) { return intersects[0]; } return null; } // 鼠标点击处理 document.addEventListener(mousedown, (event) { if (controls.isLocked false) return; const hit getIntersectedBlock(event); if (!hit) return; if (event.button 0) { // 左键移除方块 blocksGroup.remove(hit.object); // 如果移除的是非地面方块还要从场景中销毁 scene.remove(hit.object); } else if (event.button 2) { // 右键放置方块 const pos hit.object.position.clone(); const normal hit.face.normal.clone(); // 将法线坐标从物体空间转换到世界空间 normal.transformDirection(hit.object.matrixWorld); pos.add(normal); // 防止在相同位置重复生成 const existing blocksGroup.children.find(c c.position.distanceTo(pos) 0.1); if (!existing) { createCube(pos.x, pos.y, pos.z, 0x8B4513); } } }); // 阻止浏览器默认的右键菜单 document.addEventListener(contextmenu, (event) event.preventDefault()); // 窗口尺寸自适应 window.addEventListener(resize, () { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }); // 动画循环 function animate() { requestAnimationFrame(animate); updatePosition(); renderer.render(scene, camera); } animate(); /script /body /html7.1 代码关键逻辑说明这段代码的核心设计可以拆成四层场景层创建一个 3D 场景包含环境光、平行光、相机和渲染器。这是所有 Three.js 应用的基础模型层用一个blocksGroup数组存放所有方块。地面由 400 个方块组成每个方块都是一个单独的 Mesh便于后续逐个操作交互层监听mousedown事件。右键放置时先获取点击到的方块的表面法线然后在法线方向生成新方块。代码中通过normal.transformDirection(hit.object.matrixWorld)确保法线方向是世界坐标方向这是一个容易被忽略的细节控制层使用 PointerLockControls 实现鼠标锁定向导同时用 WASD 键控制相机沿视角方向移动。这段代码还有一个巧妙之处为了防止在同一个位置重复放置方块添加了两个位置距离判断distanceTo(pos) 0.1避免出现“方块重叠”的现象。虽然这个逻辑不一定要写在 MVP 版本里但体现了 AI 对边界条件的考虑。7.2 运行和验证直接双击打开 HTML 文件点击页面后鼠标会被锁定进入沉浸式 3D 场景。验证步骤确认按 WASD 可以前后左右移动视角移动流畅鼠标左键点击地面方块方块消失鼠标右键点击地面方块在点击位置旁边出现一个棕色新方块尝试站在棕色方块旁边再右键点击它新方块会出现在它的另一侧。如果以上操作都正常说明代码已经成功运行。8. 常见问题与排查方法在实际测试中你可能会遇到下面这些情况。我整理了三个模型生成结果中出现概率较高的问题以及对应的排查方案。问题现象可能原因排查方式解决方案打开 HTML 后页面空白Three.js 或 PointerLockControls 的 CDN 路径失效打开浏览器控制台查看 404 报错更换可用的 CDN 地址或者下载库文件到本地引用鼠标左键点击无法移除方块调用controls.lock()后click 事件被锁定拦截检查mousedown事件是否在锁定状态下触发将事件监听从click改为mousedown并在函数开头判断controls.isLocked右键放置方块时新方块出现在错误位置法线向量未转换到世界坐标检查是否调用了normal.transformDirection(mesh.matrixWorld)添加世界坐标转换并注意法线的单位化移动时相机碰到方块穿模没有实现碰撞检测观察角色是否走进方块内部可以使用玩家包围盒与场景方块进行碰撞检测或限制玩家 Y 轴高度不变画面很卡旋转视角掉帧严重场景方块数量过多且没有合并几何体打开浏览器开发者工具的性能面板将地面方块合并为一个 BufferGeometry但这样会牺牲单个方块的移除功能也可以限制场景方块总数另外一个高频坑是当你在生成代码时指定了旧版 Three.js如 r128某些新版本浏览器可能由于跨域或安全策略无法直接加载本地文件。最稳妥的方式是使用 CDN 链接并且在本地开启一个简单的 HTTP 服务如npx serve而不是直接用file://协议打开。9. 如何让 AI 生成更靠谱的完整游戏代码从这次横评中我们可以提炼出几条实用建议它们不仅适用于 DeepSeek 和 Kimi也适用于任何 AI 编程助手。9.1 提示词要“结构化”而不是“描述感受”不推荐这样写帮我写一个我的世界网页版要好玩一点。推荐这样写使用 Three.js 和单个 HTML 文件实现一个第一人称 3D 沙盒游戏。要求地面由 20x20 个方块组成支持 WASD 移动、鼠标旋转、左键移除方块、右键在选中方块的相邻位置放置方块并提供操作 UI 提示。结构化提示词的核心是把功能拆分成可验证的条目。每个条目最好都能通过一个操作测试来验证是否完成例如“左键点击后方块消失”。这样你就能快速判断 AI 是否真正理解了需求。9.2 限定技术栈和接口如果没有明确限制库版本AI 可能会在两三个库之间摇摆最终选择它“更熟悉”的库而不是最适合你的库。你需要在提示词中写明使用哪个版本的 Three.js是否允许使用 PointerLockControls是否必须使用 Raycaster 做拾取使用的 CDN 地址。限制越清晰生成结果越稳定。9.3 生成之后先验证再扩展很多开发者拿到 AI 生成的代码后直接复制进项目就开始改业务逻辑结果浪费了大量时间在排查基础环境问题上。正确的步骤应该是新建一个独立 HTML 文件放入 AI 生成的完整代码打开浏览器运行不修改任何内容验证提示词中的每个需求点如果发现 Bug先让 AI 阅读自己的代码并给出修复方案修复后再接入真实项目。9.4 让多个模型互相 review本次横评中三个模型写的代码各有特点。你可以先在 DS V4 Pro 上生成一个完整版本然后把代码粘贴给 Kimi K3让它找出问题并优化。多模型交叉验证往往比自己盯着代码找 Bug 更快。9.5 把 AI 当“实习生”不要当“架构师”AI 可以快速搭出原型但它不会主动考虑你的项目结构、命名规范、错误处理策略。如果你要做一个长期维护的产品建议用 AI 生成模块级别的代码而不是让它生成整个项目然后直接上线。架构设计、代码分层、关键算法还是需要你自己把关。10. 下一步还能怎么玩这次测试证明了一件事AI 有能力生成可运行的 3D 小游戏而且当前最强的模型已经能一次完成大部分功能。如果你对“网页版我的世界”这个项目感兴趣还可以继续在这些方向扩展黑色/白色方块纹理用 Canvas 生成材质贴图模仿经典 MC 的像素风方块类型切换在 UI 中加入“草块”“石头”“木头”等按钮切换不同颜色材质重力与碰撞给玩家添加一个胶囊体实现落地和阻挡保存与加载使用 localStorage 存储方块坐标和类型刷新页面后还原世界多人协同用 WebSocket 同步多个玩家的方块操作变成一个小型多人沙盒。这些扩展方向都可以继续使用 AI 编程助手协助完成。你只要把新需求细化成描述条目粘贴到原来的完整代码后面让模型基于已有代码进行增量修改。从实际工程角度看AI 编程的核心价值不是“一键生成一个游戏”而是“帮你快速试错原型”让你在很短时间内验证一个想法是否可行。当你能熟练地把需求拆成结构化提示词再配合一套通用的验证流程你会发现 AI 编程助手的生产力释放程度远超预期。希望这篇横评能帮到正在评估不同大模型代码能力的你。如果你手边有最新版本的模型也建议用这份提示词做一次同类测试结果可能会更有意思。
返回列表