当前位置：首页 > news >正文

Three.js与AI辅助开发：构建3D交互式Mastermind游戏

news 2026/7/17 3:09:38

在实际 Web 前端开发中，将经典游戏与现代技术栈结合，既能巩固编程基础，又能探索 3D 交互和 AI 辅助编程的边界。Mastermind（猜颜色游戏）就是一个很好的练手项目：规则简单，但实现时涉及状态管理、3D 渲染、用户交互和逻辑判断。结合 Three.js 构建 3D 界面，并借助 AI Coding 工具加速开发，可以显著提升原型构建效率。

本文将带您从零开始，使用 Three.js 和 AI 辅助编程，复刻一个可交互的 3D 版 Mastermind 游戏。重点不止于代码实现，更会解释 Three.js 的 3D 场景搭建、游戏状态机设计、AI 提示词工程以及如何将 AI 生成的代码段集成到真实项目中。最终您将获得一个可在浏览器中运行、支持鼠标交互的完整游戏，并掌握类似 3D 小游戏的开发模式。

1. 理解 Mastermind 游戏规则与 Three.js 基础

Mastermind 是一款两人玩的密码破解游戏，一方担任“密码制定者”，另一方担任“密码破解者”。在单人电子版中，计算机会随机生成一组颜色密码，玩家需在有限次数内猜出正确顺序。

1.1 游戏核心规则

密码由 4 个颜色槽组成，每个槽从 6 种颜色中选取（可重复）。
玩家每轮提交一个颜色序列作为猜测。
系统反馈两个指标：
- 黑钉：颜色和位置都正确的个数。
- 白钉：颜色正确但位置错误的个数。
玩家根据反馈调整下一轮猜测，直到猜中或用完尝试次数。

1.2 Three.js 的 3D 渲染基础

Three.js 是一个基于 WebGL 的 3D 图形库，通过封装底层 API，让开发者能用更声明式的方式创建 3D 场景。核心概念包括：

场景（Scene）：所有 3D 对象的容器。
相机（Camera）：决定视角和投影方式，常用透视相机（PerspectiveCamera）。
渲染器（Renderer）：将场景和相机结合，输出到 Canvas 元素。
网格（Mesh）：由几何体（Geometry）和材质（Material）组成，代表一个具体物体。
光源（Light）：影响物体明暗和阴影，如环境光（AmbientLight）和点光源（PointLight）。

在 Mastermind 游戏中，每个颜色槽可以用一个圆柱体或球体表示，排列成 4×N 的网格（N 为最大尝试次数），通过材质颜色区分不同状态。

2. 项目环境准备与依赖配置

2.1 初始化项目结构

使用 npm 初始化一个前端项目，并安装 Three.js 库：

mkdir mastermind-3d cd mastermind-3d npm init -y npm install three

项目目录结构如下：

mastermind-3d/ ├── index.html # 主页面 ├── src/ │ ├── main.js # 入口文件 │ ├── game.js # 游戏逻辑 │ └── renderer.js # Three.js 渲染封装 ├── package.json └── style.css # 基础样式

2.2 基础 HTML 和 CSS

index.html中创建一个全屏 Canvas 容器：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>3D Mastermind 游戏</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="gameContainer"> <canvas id="gameCanvas"></canvas> </div> <script type="module" src="src/main.js"></script> </body> </html>

style.css确保 Canvas 占满视口：

body { margin: 0; overflow: hidden; font-family: sans-serif; } #gameContainer { width: 100vw; height: 100vh; } #gameCanvas { display: block; width: 100%; height: 100%; }

3. 搭建 Three.js 3D 场景与游戏元素

3.1 初始化 Three.js 场景

在src/renderer.js中封装场景初始化逻辑：

import * as THREE from 'three'; export class GameRenderer { constructor(containerId) { this.container = document.getElementById(containerId); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') }); this.setupRenderer(); this.setupCamera(); this.setupLights(); this.setupEventListeners(); } setupRenderer() { this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.setClearColor(0xf0f0f0); // 浅灰色背景 this.renderer.shadowMap.enabled = true; // 启用阴影 } setupCamera() { this.camera.position.set(0, 5, 10); // 相机位于场景上方略靠后 this.camera.lookAt(0, 0, 0); // 看向场景中心 } setupLights() { const ambientLight = new THREE.AmbientLight(0xffffff, 0.6); this.scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(5, 10, 7); directionalLight.castShadow = true; this.scene.add(directionalLight); } setupEventListeners() { window.addEventListener('resize', () => this.onWindowResize()); } onWindowResize() { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); } render() { this.renderer.render(this.scene, this.camera); } }

3.2 创建颜色槽和反馈钉的 3D 模型

每个颜色槽用一个圆柱体表示，反馈钉用小球体表示。在src/game.js中定义颜色常量并创建网格：

import * as THREE from 'three'; export const COLORS = { RED: 0xff0000, GREEN: 0x00ff00, BLUE: 0x0000ff, YELLOW: 0xffff00, PURPLE: 0xff00ff, CYAN: 0x00ffff }; export class GameElements { constructor(scene) { this.scene = scene; this.slotGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.2, 16); this.pegGeometry = new THREE.SphereGeometry(0.15, 8, 8); } createSlot(color, x, y) { const material = new THREE.MeshPhongMaterial({ color }); const slot = new THREE.Mesh(this.slotGeometry, material); slot.position.set(x, y, 0); slot.userData = { originalColor: color, currentColor: color }; // 保存原始颜色用于重置 this.scene.add(slot); return slot; } createPeg(color, x, y) { const material = new THREE.MeshPhongMaterial({ color }); const peg = new THREE.Mesh(this.pegGeometry, material); peg.position.set(x, y, 0.2); // 略微浮在槽上方 this.scene.add(peg); return peg; } createBoard(rows, cols, slotSpacing = 1.2) { const board = []; for (let row = 0; row < rows; row++) { const rowSlots = []; for (let col = 0; col < cols; col++) { const x = (col - (cols - 1) / 2) * slotSpacing; const y = (rows - 1 - row) * slotSpacing; // 从上到下排列 const slot = this.createSlot(0xaaaaaa, x, y); // 初始灰色 rowSlots.push(slot); } board.push(rowSlots); } return board; } }

4. 实现 Mastermind 游戏逻辑与状态管理

4.1 游戏状态机设计

游戏状态包括：等待输入、验证猜测、显示反馈、游戏结束。在src/game.js中定义主游戏类：

export class MastermindGame { constructor(rows = 10, cols = 4) { this.rows = rows; this.cols = cols; this.maxAttempts = rows; this.currentAttempt = 0; this.secretCode = this.generateSecretCode(); this.board = Array(rows).fill().map(() => Array(cols).fill(null)); this.feedback = Array(rows).fill().map(() => Array(cols).fill(null)); this.gameState = 'waiting'; // waiting, checking, win, lose console.log('Secret code (for debug):', this.secretCode.map(c => Object.keys(COLORS).find(k => COLORS[k] === c))); } generateSecretCode() { const colorValues = Object.values(COLORS); return Array(this.cols).fill().map(() => colorValues[Math.floor(Math.random() * colorValues.length)]); } submitGuess(guessColors) { if (this.gameState !== 'waiting' || this.currentAttempt >= this.maxAttempts) return; this.board[this.currentAttempt] = guessColors; const feedback = this.checkGuess(guessColors); this.feedback[this.currentAttempt] = feedback; if (feedback.blackPegs === this.cols) { this.gameState = 'win'; } else if (this.currentAttempt === this.maxAttempts - 1) { this.gameState = 'lose'; } else { this.currentAttempt++; } return feedback; } checkGuess(guess) { let blackPegs = 0; let whitePegs = 0; const secret = [...this.secretCode]; const guessCopy = [...guess]; // 先检查位置和颜色都正确的（黑钉） for (let i = 0; i < secret.length; i++) { if (guessCopy[i] === secret[i]) { blackPegs++; secret[i] = null; // 标记已匹配 guessCopy[i] = undefined; } } // 再检查颜色正确但位置错误的（白钉） for (let i = 0; i < guessCopy.length; i++) { if (guessCopy[i] === undefined) continue; const foundIndex = secret.indexOf(guessCopy[i]); if (foundIndex !== -1) { whitePegs++; secret[foundIndex] = null; } } return { blackPegs, whitePegs }; } }

4.2 集成 3D 渲染与游戏逻辑

在src/main.js中连接渲染器、游戏元素和游戏逻辑：

import { GameRenderer } from './renderer.js'; import { GameElements, COLORS } from './game.js'; import { MastermindGame } from './game.js'; class GameApp { constructor() { this.renderer = new GameRenderer('gameCanvas'); this.elements = new GameElements(this.renderer.scene); this.game = new MastermindGame(10, 4); this.setupBoard(); this.setupInteraction(); this.animate(); } setupBoard() { this.slots = this.elements.createBoard(this.game.rows, this.game.cols); this.feedbackPegs = Array(this.game.rows).fill().map(() => []); } setupInteraction() { this.selectedColor = COLORS.RED; // 默认选中红色 this.setupColorPicker(); this.setupSlotClick(); } setupColorPicker() { // 在场景底部创建颜色选择器 const colorValues = Object.values(COLORS); colorValues.forEach((color, index) => { const x = (index - (colorValues.length - 1) / 2) * 1.2; const y = -this.game.rows * 1.2; // 放在棋盘下方 const pickerSlot = this.elements.createSlot(color, x, y); pickerSlot.userData.isPicker = true; }); } setupSlotClick() { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); this.renderer.renderer.domElement.addEventListener('click', (event) => { // 将鼠标位置归一化为 Three.js 坐标 const rect = this.renderer.renderer.domElement.getBoundingClientRect(); mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; raycaster.setFromCamera(mouse, this.renderer.camera); const intersects = raycaster.intersectObjects(this.renderer.scene.children); if (intersects.length > 0) { const object = intersects[0].object; this.handleObjectClick(object); } }); } handleObjectClick(object) { if (object.userData.isPicker) { this.selectedColor = object.userData.originalColor; return; } // 找到被点击的槽所在的行和列 for (let row = 0; row < this.slots.length; row++) { for (let col = 0; col < this.slots[row].length; col++) { if (this.slots[row][col] === object) { this.onSlotClick(row, col); return; } } } } onSlotClick(row, col) { // 只能修改当前尝试行的槽 if (row !== this.game.currentAttempt || this.game.gameState !== 'waiting') return; const slot = this.slots[row][col]; slot.material.color.setHex(this.selectedColor); slot.userData.currentColor = this.selectedColor; // 检查是否整行都已填色，是则自动提交 const currentRow = this.slots[row]; if (currentRow.every(slot => slot.userData.currentColor !== 0xaaaaaa)) { this.submitCurrentGuess(); } } submitCurrentGuess() { const currentRow = this.slots[this.game.currentAttempt]; const guess = currentRow.map(slot => slot.userData.currentColor); const feedback = this.game.submitGuess(guess); this.showFeedback(feedback); this.checkGameEnd(); } showFeedback(feedback) { const row = this.game.currentAttempt; const baseX = (this.game.cols - 1) / 2 * 1.2 + 1; // 主棋盘右侧 let pegIndex = 0; // 先放置黑钉（正确位置） for (let i = 0; i < feedback.blackPegs; i++) { const x = baseX + (pegIndex % 2) * 0.6; const y = (this.game.rows - 1 - row) * 1.2 - Math.floor(pegIndex / 2) * 0.6; this.elements.createPeg(0x000000, x, y); pegIndex++; } // 再放置白钉（正确颜色错误位置） for (let i = 0; i < feedback.whitePegs; i++) { const x = baseX + (pegIndex % 2) * 0.6; const y = (this.game.rows - 1 - row) * 1.2 - Math.floor(pegIndex / 2) * 0.6; this.elements.createPeg(0xffffff, x, y); pegIndex++; } } checkGameEnd() { if (this.game.gameState === 'win') { setTimeout(() => alert('恭喜！你猜对了密码！'), 300); } else if (this.game.gameState === 'lose') { setTimeout(() => alert(`游戏结束！正确答案是：${this.game.secretCode.map(c => Object.keys(COLORS).find(k => COLORS[k] === c)).join(', ')}`), 300); } } animate() { requestAnimationFrame(() => this.animate()); this.renderer.render(); } } new GameApp();

5. 使用 AI Coding 辅助开发与调试

5.1 AI 提示词工程实践

在开发过程中，AI 工具可以帮助生成重复性代码、提供算法实现建议或调试错误。针对 Three.js 和游戏逻辑，有效的提示词应包含：

明确的技术栈："用 Three.js 实现一个可点击的 3D 圆柱体，要求..."
具体的输入输出："写一个函数，输入颜色数组，输出 Mastermind 规则的黑白钉数量"
错误信息上下文："在 Three.js 中遇到 'TypeError: Cannot read properties of undefined' 错误，可能的原因是什么"

示例：让 AI 生成颜色选择器交互逻辑：

提示词： "我在用 Three.js 开发 Mastermind 游戏，需要实现颜色选择功能。现有颜色常量 COLORS 包含六种颜色值，场景中已有6个圆柱体作为颜色选择器。请写一个函数，当用户点击选择器时，将选中的颜色保存到 this.selectedColor 变量中，并在控制台输出选中的颜色名称。"

AI 可能返回的代码片段：

setupColorPickerInteraction() { const colorNames = Object.keys(COLORS); const colorValues = Object.values(COLORS); this.renderer.renderer.domElement.addEventListener('click', (event) => { // 射线检测代码... const intersects = raycaster.intersectObjects(this.pickerSlots); if (intersects.length > 0) { const clickedColor = intersects[0].object.userData.originalColor; this.selectedColor = clickedColor; const colorName = colorNames[colorValues.indexOf(clickedColor)]; console.log(`选中颜色: ${colorName}`); } }); }

5.2 AI 生成代码的集成与验证

将 AI 生成的代码集成到项目时，需要注意：

变量名一致性：AI 可能使用不同的命名约定，需要调整为项目现有风格。
依赖检查：确保 AI 代码中引用的变量和函数在项目中确实存在。
错误处理：AI 代码可能缺乏边界情况处理，需要手动补充。
性能考量：特别是 Three.js 相关代码，要避免每帧创建新对象或重复计算。

集成后务必验证功能：

颜色选择器点击后是否正确更新选中颜色。
选色后点击游戏槽是否应用正确颜色。
提交猜测后反馈钉是否正确显示。
游戏结束条件是否正常触发。

6. 常见问题排查与性能优化

6.1 Three.js 常见问题排查

问题现象	可能原因	检查方式	解决方案
场景全黑看不到物体	相机位置不当或光源问题	检查 camera.position 和 light.intensity	调整相机位置，增加光源强度
物体点击无反应	射线检测坐标计算错误	打印 mouse.x、mouse.y 值	确认坐标归一化计算正确
物体渲染异常破碎	几何体顶点数据问题	检查 Geometry 参数	简化几何体分段数或使用标准几何体
页面滚动时场景抖动	未防抖 resize 事件	检查 resize 事件处理	添加 requestAnimationFrame 节流

6.2 游戏逻辑调试技巧

秘密代码泄露：开发阶段可在控制台输出this.game.secretCode便于测试。
颜色值验证：确保提交猜测时颜色值是数字而非字符串。

反馈算法验证：用已知输入输出测试checkGuess函数，如：

// 测试用例：秘密代码 [RED, RED, BLUE, GREEN] console.log(checkGuess([RED, BLUE, GREEN, YELLOW])); // 应返回 { blackPegs: 0, whitePegs: 3 }

6.3 性能优化建议

对象复用：颜色槽和反馈钉的几何体、材质应复用，避免重复创建。
渲染优化：只在场景变化时调用 renderer.render()，而非每帧强制渲染。
事件防抖：resize 和鼠标移动事件应适当节流。
内存管理：游戏结束后清理不再需要的 3D 对象。

// 优化后的渲染循环 animate() { if (this.needsRender) { this.renderer.render(); this.needsRender = false; } requestAnimationFrame(() => this.animate()); } // 在修改场景后标记需要渲染 onSceneChange() { this.needsRender = true; }