摘要本文介绍了一个基于 Three.js 构建的魔法主题沙盒游戏《魔法沙盒巫师创造 - 增强版》。游戏采用第一人称视角玩家扮演巫师在霍格沃茨结界中探索、建造与战斗。核心功能包括12种咒语系统大地、火焰、流水、荧光、漂浮、昏迷咒、冰冻、粉碎、生长、瞬移、预言、黑洞、魔力管理、昼夜交替、生物生成摄魂怪、食死徒、凤凰、猫头鹰、魔药系统、玩家模型、后期处理特效等。游戏实现了物理碰撞、方块破坏/放置、粒子特效、UI交互等完整机制并包含帧率显示和性能优化。i!DOCTYPE html html langzh-CN head meta charsetUTF-8 title魔法沙盒巫师创造 - 增强版/title style /* 保持原有CSS样式不变 */ body { margin: 0; overflow: hidden; background: #000; font-family: Georgia, serif; color: #ffd700; } canvas { display: block; } #blocker { position: fixed; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; cursor: pointer; top: 0; left: 0; user-select: none; } #blocker h1 { font-size: 48px; text-shadow: 0 0 20px #ffd700; margin-bottom: 10px; } #blocker p { font-size: 18px; max-width: 600px; text-align: center; line-height: 1.6; color: #ddd; } #blocker .keys { margin-top: 20px; color: #aaa; font-size: 14px; } #hud { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: none; } #mp-container { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); width: 300px; height: 20px; border: 2px solid #ffd700; border-radius: 10px; background: rgba(0,0,0,0.5); box-shadow: 0 0 10px #ffd700; } #mp-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #4169E1, #00BFFF); border-radius: 8px; transition: width 0.2s; } #mp-text { position: absolute; width: 100%; text-align: center; top: 0; line-height: 20px; font-size: 14px; font-weight: bold; text-shadow: 1px 1px 2px #000; } #hotbar { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; width: 600px; justify-content: center; } .slot { width: 45px; height: 45px; border: 2px solid #888; background: rgba(0,0,0,0.6); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 10px; border-radius: 5px; position: relative; pointer-events: auto; } .slot.active { border-color: #ffd700; box-shadow: 0 0 15px #ffd700; background: rgba(50,50,0,0.8); } .slot .key { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #aaa; } .slot .icon { font-size: 24px; } #crosshair { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); pointer-events: none; } #crosshair::before, #crosshair::after { content: ; position: absolute; background: rgba(255,255,250,0.8); } #crosshair::before { width: 2px; height: 20px; left: 9px; top: 0; } #crosshair::after { width: 20px; height: 2px; top: 9px; left: 0; } #msg { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); font-size: 24px; text-shadow: 0 0 10px #000; opacity: 0; transition: opacity 0.5s; pointer-events: none; text-align: center; } #score { position: absolute; top: 20px; right: 20px; font-size: 18px; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; border: 1px solid #ffd700; } #warning { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle, transparent 50%, rgba(0,0,50,0.8) 100%); opacity: 0; transition: opacity 0.5s; pointer-events: none; } #blackhole-glow { position: absolute; width: 100%; height: 100%; background: radial-gradient(circle, rgba(0,0,50,0.3) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.3s; } #potions { position: absolute; top: 20px; left: 20px; display: flex; gap: 10px; pointer-events: none; } .potion { width: 40px; height: 40px; border: 2px solid #888; background: rgba(0,0,0,0.6); display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 10px; border-radius: 5px; position: relative; pointer-events: auto; cursor: pointer; } .potion .icon { font-size: 24px; } .potion .count { position: absolute; bottom: 2px; right: 2px; font-size: 12px; color: #fff; } #player-model { position: absolute; bottom: 100px; right: 20px; width: 80px; height: 120px; pointer-events: none; z-index: 20; } .player-part { position: absolute; background: #8B4513; /* 棕色皮肤 */ } .head { width: 25px; height: 25px; border-radius: 50%; background: #D2B48C; /* 肤色 */ top: 0; left: 27px; z-index: 3; } .body { width: 30px; height: 40px; top: 25px; left: 25px; background: #000080; /* 霍格沃茨袍子深蓝 */ z-index: 2; } .arm { width: 8px; height: 30px; background: #000080; z-index: 1; } .left-arm { top: 30px; left: 15px; transform-origin: top center; } .right-arm { top: 30px; left: 57px; transform-origin: top center; } .leg { width: 10px; height: 30px; background: #000080; z-index: 1; } .left-leg { top: 65px; left: 28px; transform-origin: top center; } .right-leg { top: 65px; left: 42px; transform-origin: top center; } .wand { width: 2px; height: 25px; background: #8B4513; /* 棕色魔杖 */ top: 50px; left: 58px; transform-origin: bottom center; z-index: 4; } /* 帧率显示样式 */ #fps-counter { position: absolute; top: 20px; left: 200px; /* 距离左边200px */ font-size: 18px; background: rgba(0,0,0,0.5); padding: 10px; border-radius: 5px; border: 1px solid #ffd700; color: #00ff00; font-family: monospace; z-index: 100; } /style /head body !-- 修改后的HTML结构 -- div idblocker h1 魔法沙盒巫师创造/h1 p欢迎来到霍格沃茨的沙盒结界。在这里方块由魔法元素构成你的魔力即是创造力。br小心摄魂怪和食死徒他们会吸干你的魔力/p div classkeys bWASD/b 移动 | b空格/b 跳跃 | b鼠标/b 视角br b左键/b 破坏/分解 | b右键/b 施法/放置br b1-0/b 切换咒语 | bF/b 切换飞行(消耗魔力)br b点击魔药/b 补充魔力 /div p stylemargin-top: 30px; color: #ffd700; font-size: 24px;▶ 点击屏幕进入结界/p /div div idhud div idcrosshair/div div idmp-container div idmp-bar/div div idmp-text100 / 100 MP/div /div div idhotbar !-- 原有6个槽位 -- div classslot active># Python 3 python -m http.server 8000 Python 2 python -m SimpleHTTPServer 8000然后在浏览器访问http://localhost:8000/magic-sandbox.html。方法 B使用 Node.js 的 http-server# 安装 http-server如果未安装 npm install -g http-server 在 HTML 文件所在目录运行 http-server -p 8080访问http://localhost:8080/magic-sandbox.html。方法 C使用 VS Code 的 Live Server 扩展在 VS Code 中安装 Live Server 扩展。右键点击 HTML 文件选择 Open with Live Server。浏览器会自动打开http://localhost:5500/magic-sandbox.html。4. 解决跨域问题如果遇到跨域错误CORS通常是因为CDN 资源被阻止代码中使用了 unpkg.com 的 Three.js 库某些网络环境可能限制访问。本地文件协议限制file://协议下浏览器严格限制跨域请求。解决方案使用本地 HTTP 服务器如上所述这是最可靠的方案。下载 Three.js 到本地访问 https://unpkg.com/three0.160.0/build/three.module.js 下载文件。在相同目录创建js/three/文件夹放入下载的文件。修改 HTML 中的script typeimportmap部分将 CDN 路径改为本地路径script typeimportmap { imports: { three: ./js/three/three.module.js, three/addons/: ./js/three/examples/jsm/, tween: ./js/tween.esm.js, postprocessing: ./js/three/examples/jsm/postprocessing/EffectComposer.js, shaders: ./js/three/examples/jsm/shaders/CopyShader.js } } /script同样下载其他依赖文件到本地。使用浏览器扩展允许 CORS开发调试用Chrome安装 Allow CORS: Access-Control-Allow-Origin 扩展启用后刷新页面。Firefox安装 CORS Everywhere 扩展。5. 开启控制台调试如果游戏运行异常可按以下步骤开启浏览器开发者工具进行调试Chrome/Edge按F12或右键 → 检查。切换到Console标签查看错误信息。常见错误及解决Failed to load module script跨域问题使用本地 HTTP 服务器。WebGL not supported更新显卡驱动或更换浏览器。Pointer Lock API error确保页面通过 HTTP 协议访问而非file://。切换到Network标签刷新页面检查资源是否全部加载成功状态码应为 200。Firefox按F12打开开发者工具。在控制台中查看错误。如果看到 CORS 错误可临时禁用安全限制地址栏输入about:config搜索security.fileuri.strict_origin_policy设为false。警告仅限本地开发完成后请恢复默认值。Safari首先启用开发者菜单Safari → 偏好设置 → 高级 → 勾选在菜单栏中显示开发菜单。按Option Command C打开控制台。Safari 对本地文件限制较严建议始终使用 HTTP 服务器。6. 性能优化建议帧率过低按F1可显示/隐藏左上角 FPS 计数器。若 FPS 低于 30关闭其他占用 GPU 的应用。在浏览器设置中启用硬件加速。降低浏览器图形设置Chrome设置 → 系统 → 关闭使用硬件加速模式。内存占用高长时间运行后可刷新页面释放内存。加载缓慢首次加载需下载 Three.js约 1MB请确保网络通畅。7. 常见问题排查问题可能原因解决方案点击屏幕无法进入游戏Pointer Lock API 被阻止使用 HTTP 服务器而非file://检查浏览器权限画面黑屏/白屏WebGL 不支持或初始化失败更新显卡驱动尝试 Chrome/Firefox访问 https://get.webgl.org/ 测试控制台报错 import map浏览器不支持 import maps使用 Chrome 89、Edge 89、Safari 16.4无法加载 Three.js 模块网络问题或 CDN 被墙下载 Three.js 到本地使用本地 HTTP 服务器鼠标无法移动视角未成功锁定指针点击游戏区域中心检查浏览器是否弹出权限请求按键无响应焦点不在游戏窗口点击游戏区域关闭中文输入法8. 扩展与修改如需自定义游戏修改咒语在SpellSystem.cast()函数中添加新的case。调整游戏参数修改文件开头的常量如CHUNK_SIZE、BLOCK_SIZE、player.speed等。添加新方块类型在materialDict中添加材质在World.initMeshes()中注册。调试模式在控制台输入player.mp 1000可无限魔力player.points 9999可修改分数。