@xiping/babylon-store

轻量 Babylon.js 场景封装，提供常用的相机控制、模型/高斯 splat 加载、辅助几何和视图导航能力。

安装

npm install @xiping/babylon-store

依赖要求

请在业务项目中安装 peer 依赖：

• @babylonjs/core
• @babylonjs/gui
• @babylonjs/loaders
• @babylonjs/havok（仅物理功能需要）

用法

import BabylonStore from "@xiping/babylon-store";

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
const store = new BabylonStore(canvas);

store.createGround();
// store.setCameraTarget(new Vector3(0, 0, 0));
// await store.addGaussianSplats({ rootUrl, sceneFilename });

常用 API

• 相机：setCameraPosition、setCameraTarget、setCameraFov、setWheelSensitivity
• 导航：addViewportGizmo、removeViewportGizmo
• 资源：addGltfModel、addGaussianSplats
• 辅助：createGround、createLine、createAxisHelper、createBoundingBoxWireframe

视口导航控件（ViewportGizmo）

addViewportGizmo(options?) 支持以下参数：

• ratio?: number 按主画布短边比例设置 gizmo 尺寸（0~1，优先级最高）
• size?: number | { width: number; height: number } 按像素设置 gizmo 尺寸
• position?: { x: number; y: number } 按像素设置 gizmo 左上角位置
• backgroundColor?: string 设置 gizmo 画布背景色（如 "#1f1f1f"、"rgb(31,31,31)"、"hsl(0,0%,12%)"）

示例：

const { dispose } = store.addViewportGizmo({
  ratio: 0.16,
  position: { x: 16, y: 16 },
});

// 或者不需要时移除
dispose();
// store.removeViewportGizmo();

开发

pnpm install
pnpm dev
pnpm build
pnpm lint