# Three.js / React 三纤开发技巧 ## 引擎检测查找：带有“三”、“@react-三/纤维”、“@react-三/drei”、“.glb”、“.gltf”、“.hdr”的“package.json” ## 项目结构（原版 Three.js）源代码/ main.ts # 入口点，渲染器设置场景/ SceneManager.ts # 场景生命周期 LevelLoader.ts 实体/ 播放器.ts 敌人.ts 系统/ 输入系统.ts 物理系统.ts 音频系统.ts 渲染/ 材质库.ts 后处理.ts 着色器块/ 实用程序/ 对象池.ts MathUtils.ts 类型/ 游戏类型.ts 公共/ 型号/ 纹理/ 音频/ ## 项目结构（React Three Fiber）源代码/ 应用程序.tsx 组件/ 画布/ GameCanvas.tsx # 画布 + 提供程序 Scene.tsx # 主场景构成实体/ 播放器.tsx 敌人.tsx 环境/ 地形.tsx 天空盒.tsx 照明.tsx 用户界面/ HUD.tsx 主菜单.tsx 效果/ 后处理.tsx 粒子.tsx 钩子/ useGameLoop.ts useInput.ts usePhysics.ts 商店/ gameStore.ts # Zustand 商店类型/ 游戏.ts 实用程序/ 池.ts 公共/ 型号/ 纹理/ ## 场景图及处理适当的资源管理至关重要。 Three.js 不会垃圾收集 GPU 资源： // 创建资源 const 几何 = new THREE.BoxGeometry(1, 1, 1); const 材质 = new THREE.MeshStandardMaterial({ 颜色: 0xff0000 }); const mesh = new THREE.Mesh(几何，材质); 场景.add(网格); // 删除时必须丢弃场景.删除(网格); 几何.dispose(); 材料.dispose(); if (material.map)material.map.dispose(); // 处理所有纹理：贴图、法线贴图、粗糙度贴图等。 // 深度处置的助手函数 disposeObject(obj: THREE.Object3D): void { obj.traverse((子) => { if (THREE.Mesh 的子实例) { child.geometry.dispose(); if (Array.isArray(child.material)) { child.material.forEach(disposeMaterial); } 否则{ disposeMaterial(child.material); } } }); obj.removeFromParent(); } 函数 disposeMaterial(mat: THREE.Material): void { for (Object.values(mat) 的 const 值) { if (值实例三.Texture) { 值.dispose(); } } mat.dispose(); } ## 游戏循环 (Vanilla Three.js) 类游戏{ 私有渲染器：THREE.WebGLRenderer；私人场景：THREE.Scene；私人相机：THREE.PerspectiveCamera；私有时钟 = new THREE.Clock(); 私有系统：GameSystem[] = []；构造函数（画布：HTMLCanvasElement）{ this.renderer = new THREE.WebGLRenderer({ canvas, antialias: true }); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); this.renderer.setSize(window.innerWidth, window.innerHeight); this.scene = new THREE.Scene(); this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); window.addEventListener('调整大小', this.onResize); this.animate(); } 私人动画 = (): void => { requestAnimationFrame(this.animate); const delta = this.clock.getDelta(); const elapsed = this.clock.getElapsedTime(); for (this.systems 的 const 系统) { system.update（增量，已过去）； } this.renderer.render(this.scene, this.camera); }; 私有 onResize = (): void => { this.camera.aspect = window.innerWidth / window.innerHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize(window.innerWidth, window.innerHeight); }; 处置（）：无效{ window.removeEventListener('调整大小', this.onResize); this.renderer.dispose(); // 处理所有场景对象 disposeObject(this.scene); } } ## 反应三种纤维模式 // GameCanvas.tsx - 入口点从'@react-三/纤维'导入{画布}；从“@react-two/rapier”导入{物理}；导出函数 GameCanvas() { 返回（ <画布相机={{位置:[0,5,10],视场:60}} 阴影 gl={{ 抗锯齿: true }} > <物理> <场景/> ）； } // Player.tsx - 实体组件从'@react-三/纤维'导入{useFrame}；从'react'导入{useRef}；从 '../hooks/useInput' 导入 { useInput }；导出函数 Player() { const meshRef = useRef(null!); 常量输入 = useInput(); useFrame((状态，增量) => { // 运行渲染循环内的每一帧 meshRef.current.position.x += input.horizontal * 5 * delta; meshRef.current.position.z += input.vertical * 5 * delta; }); 返回（ <网格引用={meshRef}castShadow> ）； } ## Zu 代表游戏状态 // 游戏商店.ts 从“zustand”导入{创建}；接口游戏状态{ 健康状况：数量；分数：数量；已暂停：布尔值； takeDamage: (金额: 数字) => void; addScore: (分: 数量) => void; 切换暂停：() => void; } 导出 const useGameStore = create((set) => ({ 健康：100，得分：0，已暂停：假，受到伤害：（金额）=> set((state) => ({ health: Math.max(0, state.health - amount) })), 添加分数：（分）=> set((state) => ({ 分数: state.score + 分数 })), 切换暂停：() => set((state) => ({ isPaused: !state.isPaused })), })); ## 对象池类 ObjectPool { 私有可用：T[] = []；私有活动 = new Set(); 构造函数（私人工厂: () => T, 初始大小：数字，）{ for (让 i = 0; i < 初始大小; i++) { this.available.push(factory()); } } 获取（）：T { const obj = this.available.pop() ?? this.factory(); obj.visible = true； this.active.add(obj); 返回对象； } 释放（对象：T）：无效{ obj.visible = false； this.active.delete(obj); this.available.push(obj); } 获取 activeCount(): 数量 { 返回 this.active.size; } } ## 性能优化 // 对许多相同的对象使用实例化 const instancedMesh = new THREE.InstancedMesh(几何、材质、数量); const 矩阵 = new THREE.Matrix4(); for (令 i = 0; i < 计数; i++) { 矩阵.setPosition(位置[i]); instancedMesh.setMatrixAt(i, 矩阵); } instancedMesh.instanceMatrix.needsUpdate = true; // LOD（细节级别） const lod = new THREE.LOD(); lod.addLevel(highDetailMesh, 0); // 0-50 单位 lod.addLevel(mediumDetailMesh, 50); // 50-150 单位 lod.addLevel(lowDetailMesh, 150); // 150+ 单位 // 纹理优化 const loader = new THREE.TextureLoader(); const 纹理 = loader.load('texture.jpg'); 纹理.minFilter = THREE.LinearMipMapLinearFilter; 纹理.generateMipmaps = true; 纹理.各向异性=渲染器.功能.getMaxAnisotropy(); ## 关键规则 1. **始终处置GPU资源** \-几何、材质、纹理、渲染目标 2. **在useFrame/animate中使用增量时间** \- 帧率独立更新 3. **限制像素比例** \- `Math.min(window.devicePixelRatio, 2)` 防止 GPU 过载 4. **使用重复几何体的实例** \- 大量减少绘制调用 5. **在清理时删除事件侦听器** \- 防止内存泄漏 6. **在 R3F 中使用 Three.js 对象的 refs** \- 不是 React 状态 7. **将 React 状态保留在渲染循环之外** \- 对每帧数据使用 Zustand 或 refs 8. **使用 drei 助手** \- OrbitControls、环境、useGLTF 等。 9. **压缩纹理** \- KTX2/Basis Universal 用于 GPU 压缩 10. **带有 Stats.js 和 renderer.info 的配置文件** \- 监视绘制调用、三角形、纹理 ## 常见的反模式 * 每帧创建新材料/几何形状 * 在 `useFrame` 中使用 `setState` - 导致 React 重新渲染 * 删除时不处理加载的 GLTF 模型 * 使用 `THREE.Group` 父级而不处理子级 * 没有 2 次方维度或压缩的大纹理

三个js

包含技能