最近在探索大模型与3D可视化的结合应用时我萌生了一个想法能否利用大模型的代码生成能力快速构建一个复杂的3D场景于是我选择了《西游记》中宏伟的天宫作为目标尝试用 Kimi K3 大模型来生成 Three.js 代码最终实现了一个“开机即达”的网页版天宫场景。整个过程不仅验证了大模型在程序化内容生成上的潜力也让我对 Three.js 的实战应用有了更深的理解。本文将完整复盘这次从创意到实现的探索之旅手把手带你搭建一个属于自己的3D天宫无论你是前端新手还是对AI辅助开发感兴趣的开发者都能从中获得启发和可直接复用的代码。1. 背景与核心概念为什么选择这个技术栈在开始动手之前有必要厘清我们使用的几个核心工具及其在这个项目中的角色。Kimi K3这是本次项目的“大脑”和“创意引擎”。它是一个大型语言模型擅长理解和生成代码。我们的核心思路是将我们对天宫场景的文字描述如“南天门”、“凌霄宝殿”、“云雾缭绕”转化为 Kimi K3 能够理解的提示词Prompt再由它生成对应的 Three.js 代码。这极大地加速了场景构建过程避免了从零开始编写大量几何体、材质和灯光代码的繁琐工作。Three.js这是一个基于 WebGL 的 JavaScript 3D 库。它封装了底层复杂的图形学接口让开发者能够用相对简单的 JavaScript 代码在浏览器中创建和展示精美的3D图形。它是我们项目的“画布”和“渲染引擎”负责将 Kimi K3 生成的代码转化为用户浏览器中可见的、可交互的3D天宫。程序化生成这是本项目的核心方法论。我们并非手动建模每一个宫殿、每一片云彩而是通过编写规则或利用大模型理解规则来批量、自动地创建场景元素。例如告诉大模型“生成10座悬浮的仙山随机分布大小不一”它就能写出相应的循环和随机数生成代码。这种方式对于构建《西游记》天宫这种规模宏大、元素重复但又有变化的场景非常高效。Vite Vue3 TypeScript这是我们选择的现代前端开发栈。Vite 提供极速的开发服务器和构建体验Vue3 的响应式特性便于管理3D场景中的状态如相机视角、动画播放TypeScript 则能提供更好的代码提示和类型安全在与大模型生成的代码协作时尤为重要能帮助我们发现潜在的类型错误。将它们组合起来就形成了“描述需求 → 大模型生成代码骨架 → 开发者整合、调试与优化 → 浏览器渲染”的高效工作流。接下来我们就从环境搭建开始一步步实现这个场景。2. 环境准备与版本说明为了保证教程的复现性这里列出项目开发时的主要环境与版本。你的环境可以略有不同但核心思路和代码是通用的。操作系统Windows 11 / macOS Sonoma / Ubuntu 22.04 LTS (均可)Node.js18.x或20.xLTS 版本。这是运行前端工具链的基础。包管理工具npm(随 Node.js 安装) 或yarn/pnpm。本文示例使用npm。IDE/编辑器Visual Studio Code (推荐)并安装Volar(Vue支持) 和Three.js代码片段等插件。浏览器Chrome 115 或 Edge 115用于开发和调试确保支持 WebGL2。项目依赖版本 (package.json 核心部分) 这是本项目package.json文件中关键依赖的版本。创建一个新项目时你可以直接安装这些版本以确保兼容性。{ name: heavenly-palace, private: true, version: 0.0.0, type: module, scripts: { dev: vite, build: vue-tsc vite build, preview: vite preview }, dependencies: { vue: ^3.4.21, three: ^0.164.1 }, devDependencies: { vitejs/plugin-vue: ^5.0.4, typescript: ^5.2.2, vite: ^5.1.4, vue-tsc: ^1.8.27 } }关键版本说明three^0.164.1Three.js 的 API 在r版本后有一定变化使用此版本可以保证示例代码正常运行。vue^3.4.x使用 Vue 3 的组合式 API。vite^5.x构建工具提供优异的开发体验。如果你的网络环境需要配置请使用合法合规的国内镜像源来加速 npm 包的安装例如设置淘宝镜像npm config set registry https://registry.npmmirror.com。3. 项目初始化与基础场景搭建首先我们创建一个基础的 Vue3 TypeScript Three.js 项目并搭建一个最简单的3D场景容器。3.1 创建Vite项目打开终端执行以下命令# 使用 npm 创建 Vite 项目选择 Vue 和 TypeScript 模板 npm create vitelatest heavenly-palace -- --template vue-ts # 进入项目目录 cd heavenly-palace # 安装 Three.js npm install three # 安装类型定义文件 (Three.js 类型已包含在库中但为了TS提示更完整可安装) npm install --save-dev types/three # 启动开发服务器 npm run dev执行npm run dev后Vite 会启动一个本地开发服务器通常访问http://localhost:5173就能看到 Vue 的默认欢迎页面。3.2 创建基础3D场景组件我们将创建一个独立的 Vue 组件来管理整个 Three.js 场景。在src/components目录下新建文件HeavenlyPalace.vue。!-- src/components/HeavenlyPalace.vue -- template div refcontainerRef classscene-container/div /template script setup langts import { ref, onMounted, onUnmounted } from vue; import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; // 获取DOM容器引用 const containerRef refHTMLElement | null(null); // Three.js 核心对象 let scene: THREE.Scene; let camera: THREE.PerspectiveCamera; let renderer: THREE.WebGLRenderer; let controls: OrbitControls; let animationFrameId: number; const initScene () { if (!containerRef.value) return; // 1. 创建场景 scene new THREE.Scene(); // 给场景一个淡蓝色的背景模拟天空 scene.background new THREE.Color(0xaaccff); // 2. 创建相机 (透视相机) const width containerRef.value.clientWidth; const height containerRef.value.clientHeight; camera new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.set(10, 15, 20); // 设置相机初始位置 // 3. 创建渲染器 renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setPixelRatio(window.devicePixelRatio); containerRef.value.appendChild(renderer.domElement); // 4. 添加轨道控制器 (允许鼠标拖拽缩放场景) controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 启用阻尼产生更平滑的控制感 controls.dampingFactor 0.05; // 5. 添加基础光源 (环境光 平行光) const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 5); scene.add(directionalLight); // 6. 添加一个参考坐标系和地面网格 // const axesHelper new THREE.AxesHelper(5); // scene.add(axesHelper); const gridHelper new THREE.GridHelper(50, 50, 0x444444, 0x888888); scene.add(gridHelper); // 7. 开始动画循环 animate(); }; const animate () { animationFrameId requestAnimationFrame(animate); controls.update(); // 更新控制器 renderer.render(scene, camera); }; const handleResize () { if (!containerRef.value || !camera || !renderer) return; const width containerRef.value.clientWidth; const height containerRef.value.clientHeight; camera.aspect width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }; onMounted(() { initScene(); window.addEventListener(resize, handleResize); }); onUnmounted(() { window.removeEventListener(resize, handleResize); cancelAnimationFrame(animationFrameId); controls?.dispose(); renderer?.dispose(); }); /script style scoped .scene-container { width: 100vw; height: 100vh; overflow: hidden; } /style3.3 在主页面中使用组件修改src/App.vue文件清空原有内容引入我们的3D场景组件。!-- src/App.vue -- template div idapp HeavenlyPalace / /div /template script setup langts import HeavenlyPalace from ./components/HeavenlyPalace.vue; /script style * { margin: 0; padding: 0; box-sizing: border-box; } html, body, #app { width: 100%; height: 100%; overflow: hidden; } /style现在访问http://localhost:5173你应该能看到一个灰色的网格地面并且可以用鼠标拖拽、滚轮缩放视角。基础3D场景已经搭建完毕。4. 利用 Kimi K3 生成天宫核心元素代码这是本项目最具特色的部分。我们不会手动编写所有宫殿、云雾的代码而是将设计需求描述给 Kimi K3让它生成代码片段我们再将其整合到项目中。与大模型协作的心得分步描述不要一次性要求生成整个天宫。先描述整体布局再分模块生成代码如“南天门”、“凌霄宝殿”、“悬浮仙山”、“云雾系统”。明确技术栈在 Prompt 开头明确指出“使用 Three.js r164在 Vue3script setup lang‘ts’环境中”。要求输出纯代码提示词末尾加上“只输出代码不要解释”。迭代优化第一版生成的代码可能不完美如位置不对、材质太暗可以继续对话描述问题如“让宫殿的瓦片颜色更鲜艳增加金色光泽感”。下面我将展示几个与 Kimi K3 交互的示例 Prompt 及其生成的代码片段。4.1 生成“南天门”建筑模型Prompt 示例 “请用 Three.js 创建一个简化的‘南天门’3D模型。它由两根高大的红色门柱和一个金色的匾额组成。门柱是圆柱体匾额是薄盒子。请使用THREE.Mesh和基础几何体并设置合理的位置、材质和大小。只输出代码。”Kimi K3 生成的代码片段// 生成南天门模型的函数 function createSouthHeavenGate(): THREE.Group { const gateGroup new THREE.Group(); gateGroup.name SouthHeavenGate; // 1. 左侧门柱 const leftPillarGeometry new THREE.CylinderGeometry(0.8, 1.0, 20, 16); const leftPillarMaterial new THREE.MeshPhongMaterial({ color: 0x8b0000, // 深红色 shininess: 30, }); const leftPillar new THREE.Mesh(leftPillarGeometry, leftPillarMaterial); leftPillar.position.set(-6, 10, 0); gateGroup.add(leftPillar); // 2. 右侧门柱 const rightPillar leftPillar.clone(); rightPillar.position.set(6, 10, 0); gateGroup.add(rightPillar); // 3. 顶部横梁/匾额 const beamGeometry new THREE.BoxGeometry(15, 1, 3); const beamMaterial new THREE.MeshPhongMaterial({ color: 0xffd700, // 金色 shininess: 100, }); const beam new THREE.Mesh(beamGeometry, beamMaterial); beam.position.set(0, 20, 0); gateGroup.add(beam); // 4. 匾额文字使用TextGeometry需要加载字体 // 此处简化用一个金色小方块代替文字 const signGeometry new THREE.BoxGeometry(8, 2, 0.5); const signMaterial new THREE.MeshPhongMaterial({ color: 0xffcc00 }); const sign new THREE.Mesh(signGeometry, signMaterial); sign.position.set(0, 20, 1.8); gateGroup.add(sign); return gateGroup; }我们将此函数放入HeavenlyPalace.vue的initScene函数中并在创建光源后调用// 在 initScene 函数内添加基础光源之后... const southGate createSouthHeavenGate(); scene.add(southGate);刷新页面你应该能看到两根红色柱子和一个金色的横梁矗立在场景中央。4.2 生成“凌霄宝殿”建筑群Prompt 示例 “请用 Three.js 创建一个‘凌霄宝殿’建筑群。主殿是一个较大的金色屋顶、红色墙体的建筑使用BoxGeometry和ConeGeometry组合。主殿前方有数级台阶。主殿左右两侧各有一个较小的偏殿。请生成一个返回THREE.Group的函数并合理设置位置。只输出代码。”Kimi K3 生成的代码片段function createJadeEmperorPalace(): THREE.Group { const palaceGroup new THREE.Group(); palaceGroup.name JadeEmperorPalace; // 主殿基座 const baseGeometry new THREE.BoxGeometry(25, 2, 18); const baseMaterial new THREE.MeshPhongMaterial({ color: 0xcccccc }); const base new THREE.Mesh(baseGeometry, baseMaterial); base.position.y 1; palaceGroup.add(base); // 主殿墙体 const wallGeometry new THREE.BoxGeometry(22, 15, 15); const wallMaterial new THREE.MeshPhongMaterial({ color: 0x8b0000 }); const walls new THREE.Mesh(wallGeometry, wallMaterial); walls.position.y 9; palaceGroup.add(walls); // 主殿屋顶 (四棱锥) const roofGeometry new THREE.ConeGeometry(14, 8, 4); const roofMaterial new THREE.MeshPhongMaterial({ color: 0xffd700 }); const roof new THREE.Mesh(roofGeometry, roofMaterial); roof.rotation.y Math.PI / 4; // 旋转45度让棱角对齐 roof.position.y 20; palaceGroup.add(roof); // 台阶 const stepHeight 0.5; const stepDepth 1.5; for (let i 0; i 5; i) { const stepGeometry new THREE.BoxGeometry(10 i * 2, stepHeight, stepDepth * (5 - i)); const stepMaterial new THREE.MeshPhongMaterial({ color: 0xaaaaaa }); const step new THREE.Mesh(stepGeometry, stepMaterial); step.position.set(0, stepHeight / 2 i * stepHeight, -7 - i * stepDepth / 2); palaceGroup.add(step); } // 左侧偏殿 const leftWing createWingBuilding(); leftWing.position.set(-18, 0, 0); palaceGroup.add(leftWing); // 右侧偏殿 const rightWing createWingBuilding(); rightWing.position.set(18, 0, 0); palaceGroup.add(rightWing); return palaceGroup; } // 创建偏殿的辅助函数 function createWingBuilding(): THREE.Group { const wingGroup new THREE.Group(); const base new THREE.Mesh( new THREE.BoxGeometry(10, 2, 8), new THREE.MeshPhongMaterial({ color: 0xcccccc }) ); base.position.y 1; wingGroup.add(base); const walls new THREE.Mesh( new THREE.BoxGeometry(8, 8, 6), new THREE.MeshPhongMaterial({ color: 0x8b0000 }) ); walls.position.y 6; wingGroup.add(walls); const roof new THREE.Mesh( new THREE.ConeGeometry(6, 5, 4), new THREE.MeshPhongMaterial({ color: 0xffaa00 }) ); roof.rotation.y Math.PI / 4; roof.position.y 13; wingGroup.add(roof); return wingGroup; }同样在initScene中调用此函数并设置位置const jadeEmperorPalace createJadeEmperorPalace(); jadeEmperorPalace.position.set(0, 0, -40); // 放在南天门后方远处 scene.add(jadeEmperorPalace);4.3 生成悬浮仙山与云雾为了营造天宫仙境飘渺的氛围我们需要悬浮的仙山和动态云雾。Prompt 示例 (仙山) “请用 Three.js 创建5座随机分布的悬浮仙山。每座仙山由一个作为山体的ConeGeometry或SphereGeometry和表面的一些绿色植被用小BoxGeometry或SphereGeometry表示组成。仙山应悬浮在空中y坐标大于20位置随机大小随机。只输出代码。”Prompt 示例 (云雾) “请用 Three.js 创建一片云雾效果。可以使用多个半透明的白色SphereGeometry或BoxGeometry随机分布在一个区域并让它们缓慢地上下浮动或旋转以模拟云雾飘动。请编写一个createCloud函数生成单个云朵一个createCloudField函数生成云海并实现动画更新逻辑。只输出代码。”由于篇幅限制这里展示整合并优化后的关键代码。我们在HeavenlyPalace.vue的script setup部分新增以下函数和响应式数据import { ref, onMounted, onUnmounted } from vue; import * as THREE from three; // ... 其他导入 // 用于存储动画对象的数组 const floatingObjects: THREE.Object3D[] []; function createFloatingMountain(): THREE.Group { const mountainGroup new THREE.Group(); // 山体 const height 5 Math.random() * 10; const radius 3 Math.random() * 7; const bodyGeometry new THREE.ConeGeometry(radius, height, 8); const bodyMaterial new THREE.MeshPhongMaterial({ color: 0x7a5230 }); const body new THREE.Mesh(bodyGeometry, bodyMaterial); mountainGroup.add(body); // 随机添加一些绿色“植被”小方块 const vegCount Math.floor(Math.random() * 15) 5; for (let i 0; i vegCount; i) { const vegGeometry new THREE.SphereGeometry(0.2 Math.random() * 0.5, 4, 4); const vegMaterial new THREE.MeshPhongMaterial({ color: 0x33aa33 }); const veg new THREE.Mesh(vegGeometry, vegMaterial); veg.position.set( (Math.random() - 0.5) * radius * 1.5, (Math.random() - 0.5) * height height / 2, (Math.random() - 0.5) * radius * 1.5 ); mountainGroup.add(veg); } return mountainGroup; } function createCloud(): THREE.Group { const cloudGroup new THREE.Group(); const cloudPieces Math.floor(Math.random() * 4) 3; for (let i 0; i cloudPieces; i) { const size 1 Math.random() * 2; const pieceGeometry new THREE.SphereGeometry(size, 8, 8); const pieceMaterial new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: true, opacity: 0.6, }); const piece new THREE.Mesh(pieceGeometry, pieceMaterial); piece.position.set( (Math.random() - 0.5) * 4, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 4 ); cloudGroup.add(piece); } // 为云朵添加自定义属性用于动画 (cloudGroup as any).floatSpeed 0.1 Math.random() * 0.2; (cloudGroup as any).rotationSpeed (Math.random() - 0.5) * 0.01; (cloudGroup as any).initialY cloudGroup.position.y; return cloudGroup; } // 在 initScene 函数中调用创建仙山和云雾 function populateScene() { // 创建5座悬浮仙山 for (let i 0; i 5; i) { const mountain createFloatingMountain(); mountain.position.set( (Math.random() - 0.5) * 80, // x: -40 ~ 40 25 Math.random() * 30, // y: 25 ~ 55 (Math.random() - 0.5) * 80 - 50 // z: -90 ~ -10 ); mountain.scale.setScalar(0.8 Math.random() * 0.7); scene.add(mountain); floatingObjects.push(mountain); } // 创建一片云海 (例如15朵云) for (let i 0; i 15; i) { const cloud createCloud(); cloud.position.set( (Math.random() - 0.5) * 100, 10 Math.random() * 40, // 云在不同高度 (Math.random() - 0.5) * 100 - 50 ); scene.add(cloud); floatingObjects.push(cloud); } } // 修改 animate 函数更新浮动物体的动画 const animate () { animationFrameId requestAnimationFrame(animate); // 更新控制器 controls.update(); // 更新浮动物体仙山和云雾的动画 const time Date.now() * 0.001; // 获取时间单位秒 floatingObjects.forEach(obj { if ((obj as any).floatSpeed) { // 云朵上下浮动 obj.position.y (obj as any).initialY Math.sin(time * (obj as any).floatSpeed) * 2; obj.rotation.y (obj as any).rotationSpeed; } // 仙山可以添加缓慢旋转 if (obj.name.includes(mountain)) { obj.rotation.y 0.002; } }); renderer.render(scene, camera); };在initScene函数末尾调用populateScene()。至此一个包含南天门、凌霄宝殿、悬浮仙山和动态云雾的《西游记》天宫场景核心就构建完成了。通过与大模型的协作我们快速生成了多个复杂组件的代码框架大大提升了开发效率。5. 场景优化与交互增强基础场景搭建好后我们还需要进行一些优化提升视觉效果和用户体验。5.1 添加天空盒 (Skybox)天空盒能极大增强场景的沉浸感。我们需要准备6张对应立方体六个面的图片。这里我们可以使用 Three.js 的CubeTextureLoader。准备天空盒图片你可以从免费资源网站下载一套天空盒图片如px.jpg,nx.jpg,py.jpg,ny.jpg,pz.jpg,nz.jpg放入项目的public文件夹下例如public/skybox/。加载天空盒在initScene函数中替换简单的背景色。// 替换 scene.background new THREE.Color(0xaaccff); const textureLoader new THREE.CubeTextureLoader(); const textureCube textureLoader.load([ /skybox/px.jpg, // 右 /skybox/nx.jpg, // 左 /skybox/py.jpg, // 上 /skybox/ny.jpg, // 下 /skybox/pz.jpg, // 后 /skybox/nz.jpg, // 前 ]); scene.background textureCube;5.2 改进材质与光照Kimi K3 生成的代码使用了基础的MeshPhongMaterial。我们可以调整参数或使用更高级的材质来提升质感。增加环境光遮蔽 (AO)和阴影// 在 initScene 中创建 renderer 后启用阴影 renderer.shadowMap.enabled true; renderer.shadowMap.type THREE.PCFSoftShadowMap; // 柔和阴影 // 在创建平行光后启用该光源投射阴影 directionalLight.castShadow true; directionalLight.shadow.mapSize.width 2048; directionalLight.shadow.mapSize.height 2048; // 对于需要接收或投射阴影的物体如地面、建筑设置对应属性 gridHelper.receiveShadow true; // 网格地面接收阴影 // 在南天门、凌霄宝殿的创建函数中为主要的 Mesh 设置 // leftPillar.castShadow true; // base.receiveShadow true;5.3 添加镜头动画与自动漫游为了让用户“开机即达”并有一个震撼的初体验我们可以添加一个开场镜头动画。// 在组件中定义动画状态 const isIntroAnimationPlaying ref(true); const introCameraStart new THREE.Vector3(50, 30, 50); const introCameraEnd new THREE.Vector3(10, 15, 20); // 最终位置 const introLookAtStart new THREE.Vector3(0, 10, -20); const introLookAtEnd new THREE.Vector3(0, 5, -40); let introAnimationProgress 0; // 修改 animate 函数在开头加入动画逻辑 const animate () { animationFrameId requestAnimationFrame(animate); if (isIntroAnimationPlaying.value) { introAnimationProgress 0.005; // 控制动画速度 if (introAnimationProgress 1) { introAnimationProgress 1; isIntroAnimationPlaying.value false; controls.enabled true; // 动画结束后启用用户控制 } // 使用缓动函数使动画更平滑 const easeProgress 1 - Math.pow(1 - introAnimationProgress, 3); // 插值计算相机位置和目标点 camera.position.lerpVectors(introCameraStart, introCameraEnd, easeProgress); const currentLookAt new THREE.Vector3().lerpVectors(introLookAtStart, introLookAtEnd, easeProgress); controls.target.copy(currentLookAt); controls.update(); // 必须调用 update } else { controls.update(); // 正常更新控制器 } // ... 原有的浮动物体动画更新逻辑 renderer.render(scene, camera); }; // 在 initScene 中初始化相机后设置初始状态并禁用控制器 camera.position.copy(introCameraStart); controls.target.copy(introLookAtStart); controls.enabled false; // 开场动画期间禁用用户控制6. 项目构建与部署开发完成后我们需要将其构建为生产环境可用的静态文件。构建项目npm run build该命令会在项目根目录下生成一个dist文件夹里面包含了所有优化、压缩后的静态资源HTML, JS, CSS, 图片等。本地预览构建结果npm run preview这会在本地启动一个静态文件服务器预览dist文件夹的内容确保一切正常。部署你可以将dist文件夹内的全部内容部署到任何静态网站托管服务上例如GitHub Pages: 关联你的仓库设置 source 为gh-pages分支或docs文件夹。Vercel / Netlify: 直接关联你的 Git 仓库它们会自动检测 Vue 项目并完成构建部署。你自己的 Web 服务器如 Nginx, Apache将dist文件上传到服务器对应的网站根目录即可。7. 常见问题与排查思路在复现或扩展本项目时你可能会遇到以下问题问题现象可能原因解决思路页面空白控制台无报错1. Three.js 渲染器 DOM 未正确添加到页面。2. 相机位置不对物体在视野外。1. 检查containerRef.value.appendChild(renderer.domElement)是否执行。2. 调整camera.position和controls.target或使用camera.lookAt(0,0,0)。控制台报错THREE.OrbitControls未定义导入路径错误。Three.js 的附加组件addons路径已变更。确保导入语句为import { OrbitControls } from three/addons/controls/OrbitControls.js;。检查three版本。模型材质为黑色1. 场景中没有光源。2. 光源强度太低或位置不对。3. 材质类型需要光源如MeshPhongMaterial但使用了MeshBasicMaterial。1. 确认已添加AmbientLight和DirectionalLight。2. 增加光源强度调整光源位置。3. 检查材质类型或使用不需要光源的MeshBasicMaterial测试。页面性能卡顿1. 物体面数太多如几何体分段数过高。2. 实时阴影计算开销大。3. 动画循环中有内存泄漏。1. 减少几何体的分段参数如CylinderGeometry的radialSegments。2. 降低shadow.mapSize或对不重要的物体禁用阴影。3. 在onUnmounted中确保取消动画帧、释放渲染器和控制器。天空盒不显示或显示错误1. 图片路径错误。2. 图片加载失败或格式不支持。3. 图片顺序与CubeTextureLoader.load参数顺序不匹配。1. 使用浏览器开发者工具 Network 面板检查图片请求是否 404。2. 确认图片为 JPG/PNG 格式且尺寸为 2 的 N 次幂如 1024x1024。3. 核对天空盒图片顺序[px, nx, py, ny, pz, nz]。TypeScript 类型报错1. 对 Three.js 对象的扩展属性如floatSpeed未定义类型。1. 使用类型断言(obj as any).floatSpeed或正确定义接口扩展THREE.Object3D。8. 最佳实践与扩展方向通过这个项目我们可以总结出一些 AI 辅助 3D 开发的最佳实践并思考未来的扩展方向。最佳实践Prompt 工程是关键与大模型协作时清晰、具体、分步骤的 Prompt 能极大提高生成代码的质量和可用性。明确指定技术栈、版本和输出格式。生成的代码是起点大模型生成的代码提供了很好的骨架和思路但通常需要开发者进行集成、调试、性能优化和细节打磨。不要期望一键生成完美应用。模块化与组件化将不同的场景元素如建筑、云雾、仙山封装成独立的函数或类便于管理和复用。这与 Vue/React 的组件化思想一脉相承。性能意识在 3D 场景中面数、光源数量、阴影计算、纹理尺寸是性能的主要瓶颈。在项目初期就要有性能规划避免过度绘制。资源管理及时在组件销毁时onUnmounted释放几何体、材质、纹理和渲染上下文防止内存泄漏。扩展方向导入精细 3D 模型使用GLTFLoader导入从 Blender 等软件制作的精细天宫模型替换掉基础几何体视觉效果将产生质的飞跃。添加交互为南天门、凌霄宝殿等建筑添加点击事件点击后可以显示介绍信息或触发动画如大门开启。实现漫游路径预设几条飞行路径让用户可以一键切换视角游览整个天宫。集成物理引擎引入Cannon.js或Ammo.js为掉落的仙桃、飘动的旗帜添加物理模拟。多人协作结合 WebSocket 和Socket.io实现一个多人在线的天宫场景每个用户以一个化身Avatar的形式出现可以一起游览。优化移动端针对移动设备调整控件如使用PointerLockControls、简化场景、降低画质以保证流畅度。9. 总结本项目演示了如何将 Kimi K3 这类大语言模型作为“编程伙伴”快速生成 Three.js 代码原型从而高效构建一个具有特定主题的 3D 网页场景。我们从零开始搭建了 Vue3 TypeScript Vite 的开发环境创建了基础的 3D 场景并通过与大模型的多次对话逐步生成了南天门、凌霄宝殿、仙山、云雾等核心元素的代码最终整合并优化出了一个生动、可交互的《西游记》天宫。整个过程的核心价值不在于“一键生成”而在于“人机协作”。开发者负责顶层设计、架构整合、性能优化和细节打磨而大模型则承担了繁重的、模式化的代码编写工作。这种模式尤其适用于需要快速验证创意、构建可视化原型的场景。希望这篇详细的实战教程能为你打开一扇新的大门。无论是想学习 Three.js还是探索 AI 辅助开发的新范式都可以从这个项目出发尝试修改 Prompt、添加新功能、导入更复杂的模型创造出属于你自己的独一无二的 3D 世界。完整的项目代码已整理至代码仓库你可以直接克隆并运行体验“开机即达”南天门的震撼。 AI+Three.js：用Kimi K3大模型快速生成3D天宫场景实战
最近在探索大模型与3D可视化的结合应用时我萌生了一个想法能否利用大模型的代码生成能力快速构建一个复杂的3D场景于是我选择了《西游记》中宏伟的天宫作为目标尝试用 Kimi K3 大模型来生成 Three.js 代码最终实现了一个“开机即达”的网页版天宫场景。整个过程不仅验证了大模型在程序化内容生成上的潜力也让我对 Three.js 的实战应用有了更深的理解。本文将完整复盘这次从创意到实现的探索之旅手把手带你搭建一个属于自己的3D天宫无论你是前端新手还是对AI辅助开发感兴趣的开发者都能从中获得启发和可直接复用的代码。1. 背景与核心概念为什么选择这个技术栈在开始动手之前有必要厘清我们使用的几个核心工具及其在这个项目中的角色。Kimi K3这是本次项目的“大脑”和“创意引擎”。它是一个大型语言模型擅长理解和生成代码。我们的核心思路是将我们对天宫场景的文字描述如“南天门”、“凌霄宝殿”、“云雾缭绕”转化为 Kimi K3 能够理解的提示词Prompt再由它生成对应的 Three.js 代码。这极大地加速了场景构建过程避免了从零开始编写大量几何体、材质和灯光代码的繁琐工作。Three.js这是一个基于 WebGL 的 JavaScript 3D 库。它封装了底层复杂的图形学接口让开发者能够用相对简单的 JavaScript 代码在浏览器中创建和展示精美的3D图形。它是我们项目的“画布”和“渲染引擎”负责将 Kimi K3 生成的代码转化为用户浏览器中可见的、可交互的3D天宫。程序化生成这是本项目的核心方法论。我们并非手动建模每一个宫殿、每一片云彩而是通过编写规则或利用大模型理解规则来批量、自动地创建场景元素。例如告诉大模型“生成10座悬浮的仙山随机分布大小不一”它就能写出相应的循环和随机数生成代码。这种方式对于构建《西游记》天宫这种规模宏大、元素重复但又有变化的场景非常高效。Vite Vue3 TypeScript这是我们选择的现代前端开发栈。Vite 提供极速的开发服务器和构建体验Vue3 的响应式特性便于管理3D场景中的状态如相机视角、动画播放TypeScript 则能提供更好的代码提示和类型安全在与大模型生成的代码协作时尤为重要能帮助我们发现潜在的类型错误。将它们组合起来就形成了“描述需求 → 大模型生成代码骨架 → 开发者整合、调试与优化 → 浏览器渲染”的高效工作流。接下来我们就从环境搭建开始一步步实现这个场景。2. 环境准备与版本说明为了保证教程的复现性这里列出项目开发时的主要环境与版本。你的环境可以略有不同但核心思路和代码是通用的。操作系统Windows 11 / macOS Sonoma / Ubuntu 22.04 LTS (均可)Node.js18.x或20.xLTS 版本。这是运行前端工具链的基础。包管理工具npm(随 Node.js 安装) 或yarn/pnpm。本文示例使用npm。IDE/编辑器Visual Studio Code (推荐)并安装Volar(Vue支持) 和Three.js代码片段等插件。浏览器Chrome 115 或 Edge 115用于开发和调试确保支持 WebGL2。项目依赖版本 (package.json 核心部分) 这是本项目package.json文件中关键依赖的版本。创建一个新项目时你可以直接安装这些版本以确保兼容性。{ name: heavenly-palace, private: true, version: 0.0.0, type: module, scripts: { dev: vite, build: vue-tsc vite build, preview: vite preview }, dependencies: { vue: ^3.4.21, three: ^0.164.1 }, devDependencies: { vitejs/plugin-vue: ^5.0.4, typescript: ^5.2.2, vite: ^5.1.4, vue-tsc: ^1.8.27 } }关键版本说明three^0.164.1Three.js 的 API 在r版本后有一定变化使用此版本可以保证示例代码正常运行。vue^3.4.x使用 Vue 3 的组合式 API。vite^5.x构建工具提供优异的开发体验。如果你的网络环境需要配置请使用合法合规的国内镜像源来加速 npm 包的安装例如设置淘宝镜像npm config set registry https://registry.npmmirror.com。3. 项目初始化与基础场景搭建首先我们创建一个基础的 Vue3 TypeScript Three.js 项目并搭建一个最简单的3D场景容器。3.1 创建Vite项目打开终端执行以下命令# 使用 npm 创建 Vite 项目选择 Vue 和 TypeScript 模板 npm create vitelatest heavenly-palace -- --template vue-ts # 进入项目目录 cd heavenly-palace # 安装 Three.js npm install three # 安装类型定义文件 (Three.js 类型已包含在库中但为了TS提示更完整可安装) npm install --save-dev types/three # 启动开发服务器 npm run dev执行npm run dev后Vite 会启动一个本地开发服务器通常访问http://localhost:5173就能看到 Vue 的默认欢迎页面。3.2 创建基础3D场景组件我们将创建一个独立的 Vue 组件来管理整个 Three.js 场景。在src/components目录下新建文件HeavenlyPalace.vue。!-- src/components/HeavenlyPalace.vue -- template div refcontainerRef classscene-container/div /template script setup langts import { ref, onMounted, onUnmounted } from vue; import * as THREE from three; import { OrbitControls } from three/addons/controls/OrbitControls.js; // 获取DOM容器引用 const containerRef refHTMLElement | null(null); // Three.js 核心对象 let scene: THREE.Scene; let camera: THREE.PerspectiveCamera; let renderer: THREE.WebGLRenderer; let controls: OrbitControls; let animationFrameId: number; const initScene () { if (!containerRef.value) return; // 1. 创建场景 scene new THREE.Scene(); // 给场景一个淡蓝色的背景模拟天空 scene.background new THREE.Color(0xaaccff); // 2. 创建相机 (透视相机) const width containerRef.value.clientWidth; const height containerRef.value.clientHeight; camera new THREE.PerspectiveCamera(75, width / height, 0.1, 1000); camera.position.set(10, 15, 20); // 设置相机初始位置 // 3. 创建渲染器 renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(width, height); renderer.setPixelRatio(window.devicePixelRatio); containerRef.value.appendChild(renderer.domElement); // 4. 添加轨道控制器 (允许鼠标拖拽缩放场景) controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 启用阻尼产生更平滑的控制感 controls.dampingFactor 0.05; // 5. 添加基础光源 (环境光 平行光) const ambientLight new THREE.AmbientLight(0xffffff, 0.6); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.8); directionalLight.position.set(10, 20, 5); scene.add(directionalLight); // 6. 添加一个参考坐标系和地面网格 // const axesHelper new THREE.AxesHelper(5); // scene.add(axesHelper); const gridHelper new THREE.GridHelper(50, 50, 0x444444, 0x888888); scene.add(gridHelper); // 7. 开始动画循环 animate(); }; const animate () { animationFrameId requestAnimationFrame(animate); controls.update(); // 更新控制器 renderer.render(scene, camera); }; const handleResize () { if (!containerRef.value || !camera || !renderer) return; const width containerRef.value.clientWidth; const height containerRef.value.clientHeight; camera.aspect width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); }; onMounted(() { initScene(); window.addEventListener(resize, handleResize); }); onUnmounted(() { window.removeEventListener(resize, handleResize); cancelAnimationFrame(animationFrameId); controls?.dispose(); renderer?.dispose(); }); /script style scoped .scene-container { width: 100vw; height: 100vh; overflow: hidden; } /style3.3 在主页面中使用组件修改src/App.vue文件清空原有内容引入我们的3D场景组件。!-- src/App.vue -- template div idapp HeavenlyPalace / /div /template script setup langts import HeavenlyPalace from ./components/HeavenlyPalace.vue; /script style * { margin: 0; padding: 0; box-sizing: border-box; } html, body, #app { width: 100%; height: 100%; overflow: hidden; } /style现在访问http://localhost:5173你应该能看到一个灰色的网格地面并且可以用鼠标拖拽、滚轮缩放视角。基础3D场景已经搭建完毕。4. 利用 Kimi K3 生成天宫核心元素代码这是本项目最具特色的部分。我们不会手动编写所有宫殿、云雾的代码而是将设计需求描述给 Kimi K3让它生成代码片段我们再将其整合到项目中。与大模型协作的心得分步描述不要一次性要求生成整个天宫。先描述整体布局再分模块生成代码如“南天门”、“凌霄宝殿”、“悬浮仙山”、“云雾系统”。明确技术栈在 Prompt 开头明确指出“使用 Three.js r164在 Vue3script setup lang‘ts’环境中”。要求输出纯代码提示词末尾加上“只输出代码不要解释”。迭代优化第一版生成的代码可能不完美如位置不对、材质太暗可以继续对话描述问题如“让宫殿的瓦片颜色更鲜艳增加金色光泽感”。下面我将展示几个与 Kimi K3 交互的示例 Prompt 及其生成的代码片段。4.1 生成“南天门”建筑模型Prompt 示例 “请用 Three.js 创建一个简化的‘南天门’3D模型。它由两根高大的红色门柱和一个金色的匾额组成。门柱是圆柱体匾额是薄盒子。请使用THREE.Mesh和基础几何体并设置合理的位置、材质和大小。只输出代码。”Kimi K3 生成的代码片段// 生成南天门模型的函数 function createSouthHeavenGate(): THREE.Group { const gateGroup new THREE.Group(); gateGroup.name SouthHeavenGate; // 1. 左侧门柱 const leftPillarGeometry new THREE.CylinderGeometry(0.8, 1.0, 20, 16); const leftPillarMaterial new THREE.MeshPhongMaterial({ color: 0x8b0000, // 深红色 shininess: 30, }); const leftPillar new THREE.Mesh(leftPillarGeometry, leftPillarMaterial); leftPillar.position.set(-6, 10, 0); gateGroup.add(leftPillar); // 2. 右侧门柱 const rightPillar leftPillar.clone(); rightPillar.position.set(6, 10, 0); gateGroup.add(rightPillar); // 3. 顶部横梁/匾额 const beamGeometry new THREE.BoxGeometry(15, 1, 3); const beamMaterial new THREE.MeshPhongMaterial({ color: 0xffd700, // 金色 shininess: 100, }); const beam new THREE.Mesh(beamGeometry, beamMaterial); beam.position.set(0, 20, 0); gateGroup.add(beam); // 4. 匾额文字使用TextGeometry需要加载字体 // 此处简化用一个金色小方块代替文字 const signGeometry new THREE.BoxGeometry(8, 2, 0.5); const signMaterial new THREE.MeshPhongMaterial({ color: 0xffcc00 }); const sign new THREE.Mesh(signGeometry, signMaterial); sign.position.set(0, 20, 1.8); gateGroup.add(sign); return gateGroup; }我们将此函数放入HeavenlyPalace.vue的initScene函数中并在创建光源后调用// 在 initScene 函数内添加基础光源之后... const southGate createSouthHeavenGate(); scene.add(southGate);刷新页面你应该能看到两根红色柱子和一个金色的横梁矗立在场景中央。4.2 生成“凌霄宝殿”建筑群Prompt 示例 “请用 Three.js 创建一个‘凌霄宝殿’建筑群。主殿是一个较大的金色屋顶、红色墙体的建筑使用BoxGeometry和ConeGeometry组合。主殿前方有数级台阶。主殿左右两侧各有一个较小的偏殿。请生成一个返回THREE.Group的函数并合理设置位置。只输出代码。”Kimi K3 生成的代码片段function createJadeEmperorPalace(): THREE.Group { const palaceGroup new THREE.Group(); palaceGroup.name JadeEmperorPalace; // 主殿基座 const baseGeometry new THREE.BoxGeometry(25, 2, 18); const baseMaterial new THREE.MeshPhongMaterial({ color: 0xcccccc }); const base new THREE.Mesh(baseGeometry, baseMaterial); base.position.y 1; palaceGroup.add(base); // 主殿墙体 const wallGeometry new THREE.BoxGeometry(22, 15, 15); const wallMaterial new THREE.MeshPhongMaterial({ color: 0x8b0000 }); const walls new THREE.Mesh(wallGeometry, wallMaterial); walls.position.y 9; palaceGroup.add(walls); // 主殿屋顶 (四棱锥) const roofGeometry new THREE.ConeGeometry(14, 8, 4); const roofMaterial new THREE.MeshPhongMaterial({ color: 0xffd700 }); const roof new THREE.Mesh(roofGeometry, roofMaterial); roof.rotation.y Math.PI / 4; // 旋转45度让棱角对齐 roof.position.y 20; palaceGroup.add(roof); // 台阶 const stepHeight 0.5; const stepDepth 1.5; for (let i 0; i 5; i) { const stepGeometry new THREE.BoxGeometry(10 i * 2, stepHeight, stepDepth * (5 - i)); const stepMaterial new THREE.MeshPhongMaterial({ color: 0xaaaaaa }); const step new THREE.Mesh(stepGeometry, stepMaterial); step.position.set(0, stepHeight / 2 i * stepHeight, -7 - i * stepDepth / 2); palaceGroup.add(step); } // 左侧偏殿 const leftWing createWingBuilding(); leftWing.position.set(-18, 0, 0); palaceGroup.add(leftWing); // 右侧偏殿 const rightWing createWingBuilding(); rightWing.position.set(18, 0, 0); palaceGroup.add(rightWing); return palaceGroup; } // 创建偏殿的辅助函数 function createWingBuilding(): THREE.Group { const wingGroup new THREE.Group(); const base new THREE.Mesh( new THREE.BoxGeometry(10, 2, 8), new THREE.MeshPhongMaterial({ color: 0xcccccc }) ); base.position.y 1; wingGroup.add(base); const walls new THREE.Mesh( new THREE.BoxGeometry(8, 8, 6), new THREE.MeshPhongMaterial({ color: 0x8b0000 }) ); walls.position.y 6; wingGroup.add(walls); const roof new THREE.Mesh( new THREE.ConeGeometry(6, 5, 4), new THREE.MeshPhongMaterial({ color: 0xffaa00 }) ); roof.rotation.y Math.PI / 4; roof.position.y 13; wingGroup.add(roof); return wingGroup; }同样在initScene中调用此函数并设置位置const jadeEmperorPalace createJadeEmperorPalace(); jadeEmperorPalace.position.set(0, 0, -40); // 放在南天门后方远处 scene.add(jadeEmperorPalace);4.3 生成悬浮仙山与云雾为了营造天宫仙境飘渺的氛围我们需要悬浮的仙山和动态云雾。Prompt 示例 (仙山) “请用 Three.js 创建5座随机分布的悬浮仙山。每座仙山由一个作为山体的ConeGeometry或SphereGeometry和表面的一些绿色植被用小BoxGeometry或SphereGeometry表示组成。仙山应悬浮在空中y坐标大于20位置随机大小随机。只输出代码。”Prompt 示例 (云雾) “请用 Three.js 创建一片云雾效果。可以使用多个半透明的白色SphereGeometry或BoxGeometry随机分布在一个区域并让它们缓慢地上下浮动或旋转以模拟云雾飘动。请编写一个createCloud函数生成单个云朵一个createCloudField函数生成云海并实现动画更新逻辑。只输出代码。”由于篇幅限制这里展示整合并优化后的关键代码。我们在HeavenlyPalace.vue的script setup部分新增以下函数和响应式数据import { ref, onMounted, onUnmounted } from vue; import * as THREE from three; // ... 其他导入 // 用于存储动画对象的数组 const floatingObjects: THREE.Object3D[] []; function createFloatingMountain(): THREE.Group { const mountainGroup new THREE.Group(); // 山体 const height 5 Math.random() * 10; const radius 3 Math.random() * 7; const bodyGeometry new THREE.ConeGeometry(radius, height, 8); const bodyMaterial new THREE.MeshPhongMaterial({ color: 0x7a5230 }); const body new THREE.Mesh(bodyGeometry, bodyMaterial); mountainGroup.add(body); // 随机添加一些绿色“植被”小方块 const vegCount Math.floor(Math.random() * 15) 5; for (let i 0; i vegCount; i) { const vegGeometry new THREE.SphereGeometry(0.2 Math.random() * 0.5, 4, 4); const vegMaterial new THREE.MeshPhongMaterial({ color: 0x33aa33 }); const veg new THREE.Mesh(vegGeometry, vegMaterial); veg.position.set( (Math.random() - 0.5) * radius * 1.5, (Math.random() - 0.5) * height height / 2, (Math.random() - 0.5) * radius * 1.5 ); mountainGroup.add(veg); } return mountainGroup; } function createCloud(): THREE.Group { const cloudGroup new THREE.Group(); const cloudPieces Math.floor(Math.random() * 4) 3; for (let i 0; i cloudPieces; i) { const size 1 Math.random() * 2; const pieceGeometry new THREE.SphereGeometry(size, 8, 8); const pieceMaterial new THREE.MeshPhongMaterial({ color: 0xffffff, transparent: true, opacity: 0.6, }); const piece new THREE.Mesh(pieceGeometry, pieceMaterial); piece.position.set( (Math.random() - 0.5) * 4, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 4 ); cloudGroup.add(piece); } // 为云朵添加自定义属性用于动画 (cloudGroup as any).floatSpeed 0.1 Math.random() * 0.2; (cloudGroup as any).rotationSpeed (Math.random() - 0.5) * 0.01; (cloudGroup as any).initialY cloudGroup.position.y; return cloudGroup; } // 在 initScene 函数中调用创建仙山和云雾 function populateScene() { // 创建5座悬浮仙山 for (let i 0; i 5; i) { const mountain createFloatingMountain(); mountain.position.set( (Math.random() - 0.5) * 80, // x: -40 ~ 40 25 Math.random() * 30, // y: 25 ~ 55 (Math.random() - 0.5) * 80 - 50 // z: -90 ~ -10 ); mountain.scale.setScalar(0.8 Math.random() * 0.7); scene.add(mountain); floatingObjects.push(mountain); } // 创建一片云海 (例如15朵云) for (let i 0; i 15; i) { const cloud createCloud(); cloud.position.set( (Math.random() - 0.5) * 100, 10 Math.random() * 40, // 云在不同高度 (Math.random() - 0.5) * 100 - 50 ); scene.add(cloud); floatingObjects.push(cloud); } } // 修改 animate 函数更新浮动物体的动画 const animate () { animationFrameId requestAnimationFrame(animate); // 更新控制器 controls.update(); // 更新浮动物体仙山和云雾的动画 const time Date.now() * 0.001; // 获取时间单位秒 floatingObjects.forEach(obj { if ((obj as any).floatSpeed) { // 云朵上下浮动 obj.position.y (obj as any).initialY Math.sin(time * (obj as any).floatSpeed) * 2; obj.rotation.y (obj as any).rotationSpeed; } // 仙山可以添加缓慢旋转 if (obj.name.includes(mountain)) { obj.rotation.y 0.002; } }); renderer.render(scene, camera); };在initScene函数末尾调用populateScene()。至此一个包含南天门、凌霄宝殿、悬浮仙山和动态云雾的《西游记》天宫场景核心就构建完成了。通过与大模型的协作我们快速生成了多个复杂组件的代码框架大大提升了开发效率。5. 场景优化与交互增强基础场景搭建好后我们还需要进行一些优化提升视觉效果和用户体验。5.1 添加天空盒 (Skybox)天空盒能极大增强场景的沉浸感。我们需要准备6张对应立方体六个面的图片。这里我们可以使用 Three.js 的CubeTextureLoader。准备天空盒图片你可以从免费资源网站下载一套天空盒图片如px.jpg,nx.jpg,py.jpg,ny.jpg,pz.jpg,nz.jpg放入项目的public文件夹下例如public/skybox/。加载天空盒在initScene函数中替换简单的背景色。// 替换 scene.background new THREE.Color(0xaaccff); const textureLoader new THREE.CubeTextureLoader(); const textureCube textureLoader.load([ /skybox/px.jpg, // 右 /skybox/nx.jpg, // 左 /skybox/py.jpg, // 上 /skybox/ny.jpg, // 下 /skybox/pz.jpg, // 后 /skybox/nz.jpg, // 前 ]); scene.background textureCube;5.2 改进材质与光照Kimi K3 生成的代码使用了基础的MeshPhongMaterial。我们可以调整参数或使用更高级的材质来提升质感。增加环境光遮蔽 (AO)和阴影// 在 initScene 中创建 renderer 后启用阴影 renderer.shadowMap.enabled true; renderer.shadowMap.type THREE.PCFSoftShadowMap; // 柔和阴影 // 在创建平行光后启用该光源投射阴影 directionalLight.castShadow true; directionalLight.shadow.mapSize.width 2048; directionalLight.shadow.mapSize.height 2048; // 对于需要接收或投射阴影的物体如地面、建筑设置对应属性 gridHelper.receiveShadow true; // 网格地面接收阴影 // 在南天门、凌霄宝殿的创建函数中为主要的 Mesh 设置 // leftPillar.castShadow true; // base.receiveShadow true;5.3 添加镜头动画与自动漫游为了让用户“开机即达”并有一个震撼的初体验我们可以添加一个开场镜头动画。// 在组件中定义动画状态 const isIntroAnimationPlaying ref(true); const introCameraStart new THREE.Vector3(50, 30, 50); const introCameraEnd new THREE.Vector3(10, 15, 20); // 最终位置 const introLookAtStart new THREE.Vector3(0, 10, -20); const introLookAtEnd new THREE.Vector3(0, 5, -40); let introAnimationProgress 0; // 修改 animate 函数在开头加入动画逻辑 const animate () { animationFrameId requestAnimationFrame(animate); if (isIntroAnimationPlaying.value) { introAnimationProgress 0.005; // 控制动画速度 if (introAnimationProgress 1) { introAnimationProgress 1; isIntroAnimationPlaying.value false; controls.enabled true; // 动画结束后启用用户控制 } // 使用缓动函数使动画更平滑 const easeProgress 1 - Math.pow(1 - introAnimationProgress, 3); // 插值计算相机位置和目标点 camera.position.lerpVectors(introCameraStart, introCameraEnd, easeProgress); const currentLookAt new THREE.Vector3().lerpVectors(introLookAtStart, introLookAtEnd, easeProgress); controls.target.copy(currentLookAt); controls.update(); // 必须调用 update } else { controls.update(); // 正常更新控制器 } // ... 原有的浮动物体动画更新逻辑 renderer.render(scene, camera); }; // 在 initScene 中初始化相机后设置初始状态并禁用控制器 camera.position.copy(introCameraStart); controls.target.copy(introLookAtStart); controls.enabled false; // 开场动画期间禁用用户控制6. 项目构建与部署开发完成后我们需要将其构建为生产环境可用的静态文件。构建项目npm run build该命令会在项目根目录下生成一个dist文件夹里面包含了所有优化、压缩后的静态资源HTML, JS, CSS, 图片等。本地预览构建结果npm run preview这会在本地启动一个静态文件服务器预览dist文件夹的内容确保一切正常。部署你可以将dist文件夹内的全部内容部署到任何静态网站托管服务上例如GitHub Pages: 关联你的仓库设置 source 为gh-pages分支或docs文件夹。Vercel / Netlify: 直接关联你的 Git 仓库它们会自动检测 Vue 项目并完成构建部署。你自己的 Web 服务器如 Nginx, Apache将dist文件上传到服务器对应的网站根目录即可。7. 常见问题与排查思路在复现或扩展本项目时你可能会遇到以下问题问题现象可能原因解决思路页面空白控制台无报错1. Three.js 渲染器 DOM 未正确添加到页面。2. 相机位置不对物体在视野外。1. 检查containerRef.value.appendChild(renderer.domElement)是否执行。2. 调整camera.position和controls.target或使用camera.lookAt(0,0,0)。控制台报错THREE.OrbitControls未定义导入路径错误。Three.js 的附加组件addons路径已变更。确保导入语句为import { OrbitControls } from three/addons/controls/OrbitControls.js;。检查three版本。模型材质为黑色1. 场景中没有光源。2. 光源强度太低或位置不对。3. 材质类型需要光源如MeshPhongMaterial但使用了MeshBasicMaterial。1. 确认已添加AmbientLight和DirectionalLight。2. 增加光源强度调整光源位置。3. 检查材质类型或使用不需要光源的MeshBasicMaterial测试。页面性能卡顿1. 物体面数太多如几何体分段数过高。2. 实时阴影计算开销大。3. 动画循环中有内存泄漏。1. 减少几何体的分段参数如CylinderGeometry的radialSegments。2. 降低shadow.mapSize或对不重要的物体禁用阴影。3. 在onUnmounted中确保取消动画帧、释放渲染器和控制器。天空盒不显示或显示错误1. 图片路径错误。2. 图片加载失败或格式不支持。3. 图片顺序与CubeTextureLoader.load参数顺序不匹配。1. 使用浏览器开发者工具 Network 面板检查图片请求是否 404。2. 确认图片为 JPG/PNG 格式且尺寸为 2 的 N 次幂如 1024x1024。3. 核对天空盒图片顺序[px, nx, py, ny, pz, nz]。TypeScript 类型报错1. 对 Three.js 对象的扩展属性如floatSpeed未定义类型。1. 使用类型断言(obj as any).floatSpeed或正确定义接口扩展THREE.Object3D。8. 最佳实践与扩展方向通过这个项目我们可以总结出一些 AI 辅助 3D 开发的最佳实践并思考未来的扩展方向。最佳实践Prompt 工程是关键与大模型协作时清晰、具体、分步骤的 Prompt 能极大提高生成代码的质量和可用性。明确指定技术栈、版本和输出格式。生成的代码是起点大模型生成的代码提供了很好的骨架和思路但通常需要开发者进行集成、调试、性能优化和细节打磨。不要期望一键生成完美应用。模块化与组件化将不同的场景元素如建筑、云雾、仙山封装成独立的函数或类便于管理和复用。这与 Vue/React 的组件化思想一脉相承。性能意识在 3D 场景中面数、光源数量、阴影计算、纹理尺寸是性能的主要瓶颈。在项目初期就要有性能规划避免过度绘制。资源管理及时在组件销毁时onUnmounted释放几何体、材质、纹理和渲染上下文防止内存泄漏。扩展方向导入精细 3D 模型使用GLTFLoader导入从 Blender 等软件制作的精细天宫模型替换掉基础几何体视觉效果将产生质的飞跃。添加交互为南天门、凌霄宝殿等建筑添加点击事件点击后可以显示介绍信息或触发动画如大门开启。实现漫游路径预设几条飞行路径让用户可以一键切换视角游览整个天宫。集成物理引擎引入Cannon.js或Ammo.js为掉落的仙桃、飘动的旗帜添加物理模拟。多人协作结合 WebSocket 和Socket.io实现一个多人在线的天宫场景每个用户以一个化身Avatar的形式出现可以一起游览。优化移动端针对移动设备调整控件如使用PointerLockControls、简化场景、降低画质以保证流畅度。9. 总结本项目演示了如何将 Kimi K3 这类大语言模型作为“编程伙伴”快速生成 Three.js 代码原型从而高效构建一个具有特定主题的 3D 网页场景。我们从零开始搭建了 Vue3 TypeScript Vite 的开发环境创建了基础的 3D 场景并通过与大模型的多次对话逐步生成了南天门、凌霄宝殿、仙山、云雾等核心元素的代码最终整合并优化出了一个生动、可交互的《西游记》天宫。整个过程的核心价值不在于“一键生成”而在于“人机协作”。开发者负责顶层设计、架构整合、性能优化和细节打磨而大模型则承担了繁重的、模式化的代码编写工作。这种模式尤其适用于需要快速验证创意、构建可视化原型的场景。希望这篇详细的实战教程能为你打开一扇新的大门。无论是想学习 Three.js还是探索 AI 辅助开发的新范式都可以从这个项目出发尝试修改 Prompt、添加新功能、导入更复杂的模型创造出属于你自己的独一无二的 3D 世界。完整的项目代码已整理至代码仓库你可以直接克隆并运行体验“开机即达”南天门的震撼。