# Babylon.js 引擎技能 ## 相关技能 * Threejs-webgl：替代 3D 引擎 * React-Three-Fiber：React 3D 集成 * gsap-scrolltrigger：动画库 * 运动框架：UI 动画 ## 核心概念 ### 1\.引擎和场景初始化 **基本设置** // 获取画布元素 const canvas = document.getElementById('renderCanvas'); // 创建引擎 const 引擎 = new BABYLON.Engine(canvas, true, { 保留绘图缓冲区：真，模板：真实 }); // 创建场景 const 场景 = new BABYLON.Scene(engine); // 渲染循环引擎.runRenderLoop(() => { 场景.render(); }); // 处理调整大小 window.addEventListener('调整大小', () => { 引擎.调整大小(); }); **ES6/TypeScript 设置** 从 '@babylonjs/core/Engines/engine' 导入 { Engine } ；从'@babylonjs/core/scene'导入{场景}；从'@babylonjs/core/Cameras/freeCamera'导入{FreeCamera}；从'@babylonjs/core/Maths/math.vector'导入{Vector3}；从 '@babylonjs/core/Lights/hemisphericLight' 导入 { HemisphericLight }；从 '@babylonjs/core/Meshes/Builders/sphereBuilder' 导入 { CreateSphere }； const canvas = document.getElementById('renderCanvas') as HTMLCanvasElement; const 引擎 = 新引擎(画布); const 场景 = 新场景(引擎); // 相机设置 const 相机 = new FreeCamera('camera1', new Vector3(0, 5, -10), scene); 相机.setTarget(Vector3.Zero()); 相机.attachControl（画布，true）； // 照明 const light = new HemisphericLight('light1', new Vector3(0, 1, 0), scene); 光强度=0.7； // 创建网格 const sphere = CreateSphere('sphere1', { 段数: 16, 直径: 2 }, 场景); 球体.位置.y = 2; // 渲染引擎.runRenderLoop(() => { 场景.render(); }); **场景配置选项** const 场景 = new BABYLON.Scene(引擎, { // 针对大网格数进行优化 useGeometryUniqueIdsMap：true， useMaterialMeshMap: true, useClonedMeshMap: true }); ### 2\.相机系统 **免费相机（FPS 风格）** const 相机 = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene); camera.setTarget(BABYLON.Vector3.Zero()); 相机.attachControl（画布，true）； // 移动设置相机速度=0.5；相机.角度灵敏度 = 2000; 相机.keysUp = [87]; // W 相机.keysDown = [83]; // S 相机.keysLeft = [65]; // 一个相机.keysRight = [68]; //D **弧形旋转相机（轨道）** const 相机 = new BABYLON.ArcRotateCamera( '相机', -Math.PI/2, // alpha（水平旋转） Math.PI / 2.5, // beta（垂直旋转） 15, // 半径（距离） new BABYLON.Vector3(0, 0, 0), // 目标场景）；相机.attachControl（画布，true）； // 约束相机.lowerRadiusLimit = 5; 相机.upperRadiusLimit = 50; 相机.lowerBetaLimit = 0.1; 相机.upperBetaLimit = Math.PI / 2; **通用相机（高级）** const 相机 = new BABYLON.UniversalCamera('相机', new BABYLON.Vector3(0, 5, -10), scene); camera.setTarget(BABYLON.Vector3.Zero()); 相机.attachControl（画布，true）； // 碰撞检测相机.checkCollisions = true; 相机.applyGravity = true; camera.ellipsoid = new BABYLON.Vector3(1, 1, 1); ### 3\.照明系统 **半球光（环境光）** const light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene); 光强度=0.7； light.diffuse = new BABYLON.Color3(1, 1, 1); light.specular = new BABYLON.Color3(1, 1, 1); light.groundColor = new BABYLON.Color3(0, 0, 0); **定向光（类似太阳）** const light = new BABYLON.DirectionalLight('dirLight', new BABYLON.Vector3(-1, -2, -1), scene); light.position = new BABYLON.Vector3(20, 40, 20); 光强度=0.5； // 阴影设置 const ShadowGenerator = new BABYLON.ShadowGenerator(1024, 光); ShadowGenerator.useExponentialShadowMap = true; **点光源（全向）** const light = new BABYLON.PointLight('pointLight', new BABYLON.Vector3(0, 10, 0), scene); 光强度=0.7； light.diffuse = new BABYLON.Color3(1, 0, 0); light.specular = new BABYLON.Color3(0, 1, 0); // 范围和衰减光.范围 = 100; 光半径=0.1； **聚光灯（聚焦）** const light = new BABYLON.SpotLight( '聚光灯', new BABYLON.Vector3(0, 10, 0), // 位置 new BABYLON.Vector3(0, -1, 0), // 方向 Math.PI/3, // 角度 2, // 指数场景）；光强度=0.8； **光照优化（仅包括特定网格）** // 只影响特定的网格 light.includedOnlyMeshes = [网格1，网格2，网格3]； // 或者排除特定的网格 light.excludedMeshes = [mesh4, mesh5]; ### 4\.网格创建 **内置形状** // 盒子 const box = BABYLON.MeshBuilder.CreateBox('box', { 尺寸: 2, 宽度：2，高度：2，深度：2 }，场景）； // 球体 const 球体 = BABYLON.MeshBuilder.CreateSphere('球体', { 直径：2，段：32，直径X：2，直径Y：2，直径Z：2，弧度：1，切片：1 }，场景）； // 圆柱体 const 圆柱体 = BABYLON.MeshBuilder.CreateCylinder('圆柱体', { 高度：3，直径：2，镶嵌：24 }，场景）； // 平面 const 平面 = BABYLON.MeshBuilder.CreatePlane('plane', { 尺寸：5，宽度：5，高度：5 }，场景）； // 接地 const ground = BABYLON.MeshBuilder.CreateGround('ground', { 宽度：10，高度：10，细分：2 }，场景）； // 从高度图地面 const ground = BABYLON.MeshBuilder.CreateGroundFromHeightMap('ground', 'heightmap.png', { 宽度：100，高度：100，细分：100，最小高度：0，最大高度：10 }，场景）； // 环面 const 环面 = BABYLON.MeshBuilder.CreateTorus('环面', { 直径：3，厚度：1，镶嵌：16 }，场景）； // 圆环结 const torusKnot = BABYLON.MeshBuilder.CreateTorusKnot('torusKnot', { 半径：2，管：0.6，径向段：64，管状段：8， p：2，问：3 }，场景）； **网格变换** // 位置 mesh.position = new BABYLON.Vector3(0, 5, 10); 网格.位置.x = 5; 网格位置.y = 2; // 旋转（弧度） mesh.rotation = new BABYLON.Vector3(0, Math.PI / 2, 0); 网格.旋转.y = Math.PI / 4; // 缩放 mesh.scaling = new BABYLON.Vector3(2, 2, 2); 网格缩放.x = 1.5; // 看看 mesh.lookAt(new BABYLON.Vector3(0, 0, 0)); // 父子关系 childMesh.parent =parentMesh; **网格属性** // 可见性 mesh.isVisible = true; 网格可见度 = 0.5； // 0 = 不可见，1 = 完全可见 // 挑选 mesh.isPickable = true; mesh.checkCollisions = true; // 剔除 mesh.cullingStrategy = BABYLON.AbstractMesh.CULLINGSTRATEGY_BOUNDINGSPHERE_ONLY; // 接收阴影 mesh.receiveShadows = true; ### 5\.材料 **标准材料** const 材质 = new BABYLON.StandardMaterial('材质', 场景); // 颜色 Material.diffuseColor = new BABYLON.Color3(1, 0, 1); material.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87); Material.emissiveColor = new BABYLON.Color3(0, 0, 0); 材质.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53); // 纹理 material.diffuseTexture = new BABYLON.Texture('diffuse.png', scene); material.specularTexture = new BABYLON.Texture('specular.png', scene); material.emissiveTexture = new BABYLON.Texture('emissive.png', scene); material.ambientTexture = new BABYLON.Texture('ambient.png', scene); material.bumpTexture = new BABYLON.Texture('normal.png', scene); material.opacityTexture = new BABYLON.Texture('opacity.png', scene); // 属性材质.alpha = 0.8; 材质.backFaceCulling = true; 材质.线框=假；材质.specularPower = 64; // 应用于网格网格.材质 = 材质； **PBR 材质（基于物理的渲染）** const pbr = new BABYLON.PBRMaterial('pbr', scene); // 金属工作流程 pbr.albedoColor = new BABYLON.Color3(1, 1, 1); pbr.albedoTexture = new BABYLON.Texture('albedo.png', scene); pbr.金属 = 1.0; pbr.粗糙度=0.5； pbr.metalicTexture = new BABYLON.Texture('金属.png', scene); // 或者镜面工作流程 pbr.albedoTexture = new BABYLON.Texture('albedo.png', scene); pbr.reflectivityTexture = new BABYLON.Texture('reflectivity.png', scene); // 环境 pbr.environmentTexture = BABYLON.CubeTexture.CreateFromPrefilteredData('environment.dds', scene); // 其他地图 pbr.bumpTexture = new BABYLON.Texture('normal.png', scene); pbr.ambientTexture = new BABYLON.Texture('ao.png', scene); pbr.emissiveTexture = new BABYLON.Texture('emissive.png', scene); 网格.材质 = pbr; **多种材料** const multiMat = new BABYLON.MultiMaterial('multiMat', scene); multiMat.subMaterials.push(material1); multiMat.subMaterials.push(material2); multiMat.subMaterials.push(material3); 网格.材质 = multiMat; 网格.subMeshes = []; mesh.subMeshes.push(new BABYLON.SubMesh(0, 0, verticesCount, 0, indicesCount1, mesh)); mesh.subMeshes.push(new BABYLON.SubMesh(1, 0, verticesCount,indexCount1,indicesCount2,mesh)); ### 6\.模型加载 **GLTF/GLB 导入** // 追加到场景 BABYLON.SceneLoader.Append('路径/到/', 'model.gltf', 场景, 函数(场景) { console.log('模型已加载'); }); // 导入网格 BABYLON.SceneLoader.ImportMesh('', '路径/到/', 'model.gltf', 场景, 函数(网格) { 常量网格=网格[0]；网格位置.y = 5; }); // 异步版本 const 结果 = 等待 BABYLON.SceneLoader.ImportMeshAsync( null, // 所有网格 'https://assets.babylonjs.com/meshes/', '村庄.glb', 场景）； console.log('加载的网格：', result.meshes); // 从二进制加载 const 结果 = 等待 BABYLON.SceneLoader.AppendAsync( '', '数据：'+数组缓冲区，场景）； **资源管理器（批量加载）** const assetManager = new BABYLON.AssetsManager(scene); // 添加网格任务 const meshTask = assetManager.addMeshTask('model', '', 'path/to/', 'model.gltf'); meshTask.onSuccess = 函数（任务）{ task.loadedMeshes[0].position = new BABYLON.Vector3(0, 0, 0); }; // 添加纹理任务 consttextureTask = assetManager.addTextureTask('texture', 'texture.png'); textureTask.onSuccess = 函数（任务）{ 材质.diffuseTexture = 任务.texture; }; // 加载全部 assetManager.onFinish = 函数(任务) { console.log('所有资源已加载'); engine.runRenderLoop(() => scene.render()); }; assetManager.load(); ### 7\.物理引擎 **Havok 物理设置** // 导入哈沃克从“@babylonjs/havok”导入 HavokPhysics； // 初始化 const havokInstance = 等待 HavokPhysics(); const havokPlugin = new BABYLON.HavokPlugin(true, havokInstance); // 启用物理 scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), havokPlugin); // 为网格创建物理聚合 const sphereAggregate = new BABYLON.PhysicsAggregate( 球体， BABYLON.PhysicsShapeType.SPHERE, { 质量: 1, 恢复: 0.75 }, 场景）； // 接地（静态） const groundAggregate = new BABYLON.PhysicsAggregate( 地面, BABYLON.PhysicsShapeType.BOX, { 质量: 0 }, // 质量 0 = 静态场景）； **物理形状** // 可用形状 BABYLON.PhysicsShapeType.SPHERE BABYLON.PhysicsShapeType.BOX BABYLON.PhysicsShapeType.CAPSULE BABYLON.PhysicsShapeType.CYLINDER BABYLON.PhysicsShapeType.CONVEX_HULL BABYLON.PhysicsShapeType.MESH BABYLON.PhysicsShapeType.HEIGHTFIELD **物理身体控制** // 获取主体 const body = 聚合体； //施加力 body.applyForce( new BABYLON.Vector3(0, 10, 0), // 力 new BABYLON.Vector3(0, 0, 0) // 应用点）； //施加脉冲 body.applyImpulse( 新巴比伦.Vector3(0, 5, 0), 新巴比伦.Vector3(0, 0, 0) ）； // 设置速度 body.setLinearVelocity(new BABYLON.Vector3(0, 5, 0)); body.setAngularVelocity(new BABYLON.Vector3(0, 1, 0)); // 属性 body.setMassProperties({ 质量: 2 }); body.setCollisionCallbackEnabled(true); ### 8\.动画 **直接动画** // 动画属性 BABYLON.Animation.CreateAndStartAnimation( '动画', 网格， '位置.y', 30, // 帧率 120, // 总帧数 mesh.position.y, // 来自 10, // 到 BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE ）； **动画课** const 动画 = new BABYLON.Animation( '我的动画', '位置.x', 30、 BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE ）； // 关键帧常量键 = [ { 帧：0，值：0 }， { 帧：30，值：10 }， { 帧：60，值：0 } ]; 动画.setKeys(键); // 附加到网格网格.animations.push(动画); // 开始 scene.beginAnimation(mesh, 0, 60, true); **动画组** const AnimationGroup = new BABYLON.AnimationGroup('group', scene); AnimationGroup.addTargetedAnimation(animation1, mesh1); AnimationGroup.addTargetedAnimation(animation2, mesh2); // 控制动画组.play(); 动画组.pause(); 动画组.stop(); 动画组.speedRatio = 2.0; // 事件 AnimationGroup.onAnimationEndObservable.add(() => { console.log('动画完成'); }); **骨骼动画（来自导入模型）** // 从导入的模型中获取骨架常量骨架=结果.骨架[0]; // 获取动画范围 const 范围 = sculpture.getAnimationRanges(); // 播放动画范围场景.beginAnimation(骨架, 0, 100, true); // 或者使用动画组 result.animationGroups[0].play(); result.animationGroups[0].setWeightForAllAnimatables(0.5); ## 常见模式 ### 模式 1：使用默认环境设置场景 const createScene = 函数() { const 场景 = new BABYLON.Scene(engine); // 快速设置 scene.createDefaultCameraOrLight(true, true, true); const env = scene.createDefaultEnvironment({ 创建地面：真实，创建天空盒：真，天空盒大小：150，地面尺寸：50 }); // 你的网格 const sphere = BABYLON.MeshBuilder.CreateSphere('球体', {直径: 2}, 场景); 球体.位置.y = 1; 返回场景； }; ### 模式 2：异步场景加载 const createScene = 异步函数() { const 场景 = new BABYLON.Scene(engine); const 相机 = new BABYLON.ArcRotateCamera('相机', 0, 0, 10, BABYLON.Vector3.Zero(), 场景); 相机.attachControl（画布，true）； const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene); // 加载模型 const 结果 = 等待 BABYLON.SceneLoader.ImportMeshAsync( 空， 'https://assets.babylonjs.com/meshes/', '村庄.glb', 场景）； // 设置物理 const havokInstance = 等待 HavokPhysics(); const havokPlugin = new BABYLON.HavokPlugin(true, havokInstance); scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), havokPlugin); 返回场景； }; createScene().then(场景 => { engine.runRenderLoop(() => scene.render()); }); ### 模式3：交互式拣选 scene.onPointerDown = 函数(evt, pickResult) { 如果（pickResult.hit）{ console.log('选取的网格：', pickResult.pickedMesh.name); console.log('选取点：', pickResult.pickedPoint); // 突出显示选取的网格 pickResult.pickedMesh.material.emissiveColor = new BABYLON.Color3(1, 0, 0); } }; // 或者使用动作管理器 mesh.actionManager = new BABYLON.ActionManager(场景); mesh.actionManager.registerAction( 新的 BABYLON.ExecuteCodeAction( BABYLON.ActionManager.OnPickTrigger, 函数（）{ console.log('网格被点击'); } ））； ### 模式 4：后处理效果 // 默认管道 const pipeline = new BABYLON.DefaultRenderingPipeline('pipeline', true, scene, [camera]); 管道.样本= 4; pipeline.fxaaEnabled = true; pipeline.bloomEnabled = true; pipeline.bloomThreshold = 0.8; pipeline.bloomWeight = 0.5; pipeline.bloomKernel = 64; // 景深 pipeline.depthOfFieldEnabled = true; pipeline.depthOfFieldBlurLevel = BABYLON.DepthOfFieldEffectBlurLevel.Low; pipeline.depthOfField.focusDistance = 2000; pipeline.depthOfField.focalLength = 50; // 发光层 const GlowLayer = new BABYLON.GlowLayer('发光', 场景); 发光层.强度 = 0.5; // 高亮层 const highlightLayer = new BABYLON.HighlightLayer('高亮', 场景); highlightLayer.addMesh(mesh, BABYLON.Color3.Green()); ### 模式 5：GUI（2D UI）从'@babylonjs/gui'导入{AdvancedDynamicTexture，按钮，TextBlock，矩形}； // 全屏用户界面 const AdvancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI('UI'); // 按钮 const 按钮 = BABYLON.GUI.Button.CreateSimpleButton('按钮', '点击我'); 按钮宽度 = '150px'; 按钮高度 = '40px'; 按钮.颜色 = '白色'; 按钮.背景 = '绿色'; Button.onPointerUpObservable.add(() => { console.log('按钮被点击'); }); AdvancedTexture.addControl(按钮); // 文本 const text = new BABYLON.GUI.TextBlock(); text.text = '你好世界'; text.color = '白色'; 文本.fontSize = 24; 高级纹理.addControl(文本); // 3D 网格 UI constplane = BABYLON.MeshBuilder.CreatePlane('plane', {size: 2}, scene); const AdvancedTexture3D = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane); const button3D = BABYLON.GUI.Button.CreateSimpleButton('button3D', '点击我'); AdvancedTexture3D.addControl(button3D); ### 模式 6：阴影贴图 const light = new BABYLON.DirectionalLight('light', new BABYLON.Vector3(-1, -2, -1), scene); light.position = new BABYLON.Vector3(20, 40, 20); // 创建阴影生成器 const ShadowGenerator = new BABYLON.ShadowGenerator(1024, 光); ShadowGenerator.useExponentialShadowMap = true; ShadowGenerator.usePoissonSampling = true; // 添加阴影投射器 ShadowGenerator.addShadowCaster(球体); ShadowGenerator.addShadowCaster(box); // 启用影子接收地面.receiveShadows = true; ### 模式 7：粒子系统 const 粒子系统 = new BABYLON.ParticleSystem('粒子', 2000, 场景); 粒子系统.粒子纹理 = new BABYLON.Texture('粒子.png', 场景); // 发射器粒子系统.发射器 = 新 BABYLON.Vector3(0, 5, 0); 粒子系统.minEmitBox = new BABYLON.Vector3(-1, 0, 0); 粒子系统.maxEmitBox = 新 BABYLON.Vector3(1, 0, 0); // 颜色粒子系统.color1 = new BABYLON.Color4(0.7, 0.8, 1.0, 1.0); 粒子系统.color2 = new BABYLON.Color4(0.2, 0.5, 1.0, 1.0); 粒子系统.colorDead = new BABYLON.Color4(0, 0, 0.2, 0.0); // 大小粒子系统.minSize = 0.1; 粒子系统.maxSize = 0.5; // 生命周期粒子系统.minLifeTime = 0.3; 粒子系统.maxLifeTime = 1.5; // 发射率粒子系统.emitRate = 1500; // 方向粒子系统.direction1 = new BABYLON.Vector3(-1, 8, 1); 粒子系统.direction2 = new BABYLON.Vector3(1, 8, -1); // 重力粒子系统.重力 = new BABYLON.Vector3(0, -9.81, 0); // 开始粒子系统.start(); ## 集成模式 ### 模式 1：React 集成从 'react' 导入 { useEffect, useRef }; 从'@babylonjs/core'导入*作为BABYLON；函数巴比伦场景（）{ const canvasRef = useRef(null); const engineRef = useRef(null); const sceneRef = useRef(null); 使用效果（（）=> { if (!canvasRef.current) 返回； // 初始化 const 引擎 = new BABYLON.Engine(canvasRef.current, true); engineRef.current = 引擎； const 场景 = new BABYLON.Scene(engine); sceneRef.current = 场景； // 设置场景 const 相机 = new BABYLON.ArcRotateCamera('相机', 0, 0, 10, BABYLON.Vector3.Zero(), 场景); camera.attachControl(canvasRef.current, true); const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene); const sphere = BABYLON.MeshBuilder.CreateSphere('球体', {直径: 2}, 场景); // 渲染循环引擎.runRenderLoop(() => { 场景.render(); }); // 调整处理程序大小 const handleResize = () => engine.resize(); window.addEventListener('调整大小',handleResize); // 清理返回（）=> { window.removeEventListener('调整大小',handleResize); 场景.dispose(); 引擎.dispose(); }; }, []); 返回（ <画布参考={canvasRef} 样式={{宽度：'100%'，高度：'100vh'}} /> ）； } ### 模式 2：WebXR（VR/AR） const createScene = 异步函数() { const 场景 = new BABYLON.Scene(engine); const 相机 = new BABYLON.FreeCamera('相机', new BABYLON.Vector3(0, 5, -10), scene); 相机.attachControl（画布，true）； const light = new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0, 1, 0), scene); const sphere = BABYLON.MeshBuilder.CreateSphere('球体', {直径: 2}, 场景); 球体.位置.y = 1; const env = scene.createDefaultEnvironment(); // 启用WebXR const xrHelper = 等待 scene.createDefaultXRExperienceAsync({ 地板网格：[env.ground]，禁用传送： false }); // XR控制器输入 xrHelper.input.onControllerAddedObservable.add((控制器) => { controller.onMotionControllerInitObservable.add((motionController) => { const 触发器 = MotionController.getMainComponent(); trigger.onButtonStateChangedObservable.add(() => { 如果（触发。按下）{ console.log('触发器被按下'); } }); }); }); 返回场景； }; ### 模式 3：节点材质（可视化着色器编辑器） // 从片段创建 const nodeMaterial =等待 BABYLON.NodeMaterial.ParseFromSnippetAsync('#SNIPPET_ID', scene); // 应用于网格节点材质.build(); 网格材质=节点材质； // 或者以编程方式创建 const nodeMaterial = new BABYLON.NodeMaterial('node', scene); constpositionInput = new BABYLON.InputBlock('position'); positionInput.setAsAttribute('位置'); const worldPos = new BABYLON.TransformBlock('worldPos'); nodeMaterial.addOutputNode(worldPos); ## 性能优化 ### 1\.网格优化 // 合并具有相同材质的网格 const 合并 = BABYLON.Mesh.MergeMeshes( [网格1，网格2，网格3]， true, // 处理源 true, // 允许32BitsIndices 未定义， false, // 多重材质 true // 保留SerializationHelper ）； // 实例（用于重复网格） const instance1 = mesh.createInstance('instance1'); const instance2 = mesh.createInstance('instance2'); 实例1.位置.x = 5; instance2.position.x = -5; // 瘦实例（甚至更高效） const 缓冲区 = new Float32Array(16 * 计数); // 每个矩阵 16 个浮点数 mesh.thinInstanceSetBuffer('矩阵', 缓冲区, 16); // 冻结网格体（静态网格体） mesh.freezeWorldMatrix(); // 冻结材料材料.冻结(); // 简化网格 (LOD) const 简化 = mesh.simplify( [ { 质量：0.8，距离：10 }， { 质量：0.4，距离：50 }， { 质量：0.2，距离：100 } ], true, // 并行处理 BABYLON.SimplificationType.QUADRATIC ）； ### 2\.场景优化 // 场景优化器 const 选项 = new BABYLON.SceneOptimizerOptions(); options.addOptimization(new BABYLON.HardwareScalingOptimization(0, 1)); options.addOptimization(new BABYLON.ShadowsOptimization(1)); options.addOptimization(new BABYLON.PostProcessesOptimization(2)); options.addOptimization(new BABYLON.LensFlaresOptimization(3)); options.addOptimization(new BABYLON.ParticlesOptimization(4)); options.addOptimization(new BABYLON.TextureOptimization(5, 512)); options.addOptimization(new BABYLON.RenderTargetsOptimization(6)); options.addOptimization(new BABYLON.MergeMeshesOptimization(7)); const 优化器 = new BABYLON.SceneOptimizer(场景, 选项); 优化器.start(); // 八叉树（空间分区） const octree = scene.createOrUpdateSelectionOctree(); // 视锥体剔除场景.blockMaterialDirtyMechanism = true; // 跳过指针移动拾取 scene.skipPointerMovePicking = true; // 冻结活动网格场景.freezeActiveMeshes(); ### 3\.渲染优化 // 硬件缩放引擎.setHardwareScalingLevel(0.5); // 以一半分辨率渲染 // 自适应质量 scene.onBeforeRenderObservable.add(() => { const fps = engine.getFps(); 如果（fps < 30）{ // 降低质量引擎.setHardwareScalingLevel(2); } 否则如果 (fps > 55) { // 提高质量引擎.setHardwareScalingLevel(1); } }); // 增量加载场景.useDelayedTextureLoading = true; // 剔除策略 mesh.cullingStrategy = BABYLON.AbstractMesh.CULLINGSTRATEGY_BOUNDINGSPHERE_ONLY; ### 4\.纹理优化 // 压缩纹理 const 纹理 = new BABYLON.Texture('texture.dds', scene); // Mip 贴图纹理.updateSamplingMode(BABYLON.Texture.TRILINEAR_SAMPLINGMODE); // 各向异性过滤纹理.anisotropicFilteringLevel = 4; // KTX2 压缩 const 纹理 = new BABYLON.Texture('texture.ktx2', scene); ## 常见陷阱 ### 陷阱 1：内存泄漏 **问题**：未处置资源 // ❌ 不好 - 内存泄漏函数createAndRemoveMesh() { const mesh = BABYLON.MeshBuilder.CreateBox('box', {}, scene); 场景.removeMesh(网格); } **解决方案**：妥善处置 // ✅ 好函数createAndRemoveMesh() { const mesh = BABYLON.MeshBuilder.CreateBox('box', {}, scene); 网格.dispose(); } // 处理整个场景场景.dispose(); // 处置引擎引擎.dispose(); ### 陷阱 2：绘制调用过多导致性能问题 **问题**：每个网格 = 一次绘制调用 // ❌ 糟糕 - 1000 次绘制调用 for (令 i = 0; i < 1000; i++) { const box = BABYLON.MeshBuilder.CreateBox('box' + i, {}, scene); 框.位置.x = i; } **解决方案**：使用实例或合并 // ✅ 好 - 1 次抽奖 const box = BABYLON.MeshBuilder.CreateBox('box', {}, scene); for (令 i = 0; i < 1000; i++) { const instance = box.createInstance('instance' + i); 实例.位置.x = i; } ### 陷阱 3：阻塞主线程 **问题**：大量计算阻塞渲染 // ❌ 坏 - 阻塞渲染函数createManyMeshes() { for (令 i = 0; i < 10000; i++) { const mesh = BABYLON.MeshBuilder.CreateSphere('球体' + i, {}, scene); } } **解决方案**：使用异步/增量加载 // ✅ 好 - 增量异步函数 createManyMeshes() { for (令 i = 0; i < 10000; i++) { const mesh = BABYLON.MeshBuilder.CreateSphere('球体' + i, {}, scene); 如果（我％100 === 0）{ 等待新的 Promise(resolve => setTimeout(resolve, 0)); } } } ### 陷阱 4：相机控制不正确 **问题**：相机没有响应 // ❌ 不好 - 忘记了 AttachControl const 相机 = new BABYLON.ArcRotateCamera('相机', 0, 0, 10, BABYLON.Vector3.Zero(), 场景); **解决方案**：始终附加控件 // ✅ 好 const 相机 = new BABYLON.ArcRotateCamera('相机', 0, 0, 10, BABYLON.Vector3.Zero(), 场景); 相机.attachControl（画布，true）； ### 陷阱 5：不处理异步操作 **问题**：在场景准备好之前使用场景 // ❌ 不好 BABYLON.SceneLoader.ImportMesh('', 'path/', 'model.gltf', scene); const mesh = scene.getMeshByName('meshName'); // 无效的！ **解决方案**：使用回调或 async/await // ✅ 好 const result =等待 BABYLON.SceneLoader.ImportMeshAsync('', 'path/', 'model.gltf', scene); const mesh = scene.getMeshByName('meshName'); // 或者使用回调 BABYLON.SceneLoader.ImportMesh('', 'path/', 'model.gltf', 场景, 函数(网格) { 常量网格=网格[0]； }); ### 陷阱 6：物理原理不起作用 **问题**：忘记启用物理或创建聚合 // ❌ 不好 const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {}, scene); sphere.physicalsImpostor = new BABYLON.PhysicsImpostor(球体, BABYLON.PhysicsImpostor.SphereImpostor, {质量: 1}, 场景); // 错误：物理未启用！ **解决方案**：首先启用物理，使用聚合 // ✅ 好 const havokInstance = 等待 HavokPhysics(); const havokPlugin = new BABYLON.HavokPlugin(true, havokInstance); scene.enablePhysics(new BABYLON.Vector3(0, -9.8, 0), havokPlugin); const sphere = BABYLON.MeshBuilder.CreateSphere('sphere', {}, scene); const 聚合 = new BABYLON.PhysicsAggregate( 球体， BABYLON.PhysicsShapeType.SPHERE, {质量：1}，场景）； ## 高级主题 ### 1\.自定义着色器 BABYLON.Effect.ShadersStore['customVertexShader'] = ` 高精度高精度浮子；属性 vec3 位置；属性 vec2 uv；统一 mat4 worldViewProjection；改变 vec2 vUV；无效主（无效）{ gl_Position = worldViewProjection * vec4(位置, 1.0); vUV = 紫外线； } `; BABYLON.Effect.ShadersStore['customFragmentShader'] = ` 高精度高精度浮子；改变 vec2 vUV；统一采样器2D纹理采样器；无效主（无效）{ gl_FragColor =texture2D(textureSampler, vUV); } `; const shaderMaterial = new BABYLON.ShaderMaterial('着色器', 场景, { 顶点：'自定义'，片段：“自定义” }, { 属性：['位置'，'uv']，制服：['worldViewProjection'] }); ### 2\.计算着色器 constcomputeShader = new BABYLON.ComputeShader('计算', 引擎, { 计算源：` #版本 450 布局（local_size_x = 8，local_size_y = 8，local_size_z = 1）中；布局（std430，绑定= 0）缓冲区OutputBuffer { vec4数据[]; } 输出缓冲区；无效主（）{ uint索引 = gl_GlobalInitationID.x + gl_GlobalInitationID.y * 8u; 输出缓冲区.data[索引] = vec4(1.0, 0.0, 0.0, 1.0); } ` }); ### 3\.程序纹理 const NoiseTexture = new BABYLON.NoiseProceduralTexture('噪音', 256, 场景); 噪声纹理.八度= 4; 噪声纹理.持久性= 0.8; 噪声纹理.animationSpeedFactor = 5; 材质.emissiveTexture = 噪声纹理； ## 调试 // 显示检查器场景.debugLayer.show(); // 显示边界框 scene.forceShowBoundingBoxes = true; // 显示线框材质.线框=真； // 记录帧率设置间隔（（）=> { console.log('FPS:', engine.getFps()); }, 1000); // 仪器仪表 const Instrumentation = new BABYLON.SceneInstrumentation(scene); Instrumentation.captureFrameTime = true; console.log('帧时间：', Instrumentation.frameTimeCounter.average); ## 资源 * [官方文档]() * [游乐场]() * [论坛]() * [示例]() * [NPM 包]() ## 版本说明该技能基于Babylon.js 7.x。有关最新功能，请参阅官方文档。

巴比伦引擎

包含技能