# 神岛模型高阶贝塞尔动画

**Repository Path**: ifishcool/GameHighBessel

## Basic Information

- **Project Name**: 神岛模型高阶贝塞尔动画
- **Description**: GameHighBessel 类负责管理神奇代码岛游戏中的模型高贝塞尔曲线动画
它使用贝塞尔曲线来平滑地移动相机实体，并支持不同的缓动函数来控制动画速度
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-01-31
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 神岛模型高阶贝塞尔曲线动画 2.0

> 来自 box3 游戏《新春·欢乐游乐园》中的火车运行路径，运用了贝塞尔 3 阶内连续移动。[https://dao3.fun/exp/experience/detail/100012435](https://dao3.fun/exp/experience/detail/100012435)

![](https://static.codemao.cn/pickduck/Hkh0XuvWkx.gif?hash=lm78J0LS8CUIYMHZDEuyLx-7CMLQ)

> 来自 box3 游戏《瓶盖人大乱斗》中的胜利场面，运用了贝塞尔 3 阶内连续移动。锁定视角。[https://dao3.fun/exp/experience/detail/100108748](https://dao3.fun/exp/experience/detail/100108748)

![](https://static.codemao.cn/pickduck/HyMx4dvbyx.gif?hash=lg9KArMwdfxvjKmGEpH1akLVqtTN)

![](https://static.codemao.cn/pickduck/SyWfEdwbke.gif?hash=ljTs4HwUvh9Efg8bS8IYd-SrQlLJ)

## 详细文档

[https://docs.pgaot.com/npm/high-bessel/](https://docs.pgaot.com/npm/high-bessel/)

## 示例

- 生成模型
  效果： 根据刷新频率，在贝塞尔曲线上动态生成一系列模型。

```javascript
import GameHighBessel, { GameHighBesselEases } from "@dao3fun/high-bessel";

// 初始化贝塞尔曲线动画对象，设置固定点模型名称为 "pos"
const bessel = new GameHighBessel({
  fixedPointNameOrPosList: "pos",
});

// 当动画进度更新时，创建一个新实体表示贝塞尔曲线上的一个点
bessel.onUpdate((point) => {
  world.createEntity({
    mesh: "mesh/点.vb",
    collides: false,
    gravity: false,
    position: point,
  });
});

// 播放贝塞尔曲线动画，设置播放速度为 0.01
bessel.play({
  speed: 0.01,
});
```

- 场景展示动画
  效果： 使用贝塞尔曲线缓动，从 pos-1 位置移动到 pos-2 位置等，实现平滑的场景切换。

```javascript
import GameHighBessel, { GameHighBesselEases } from "@dao3fun/high-bessel";

// 创建一个模型实体，设置其属性
const model = world.createEntity({
  mesh: "mesh/摄像头.vb",
  collides: false,
  gravity: false,
});

// 初始化贝塞尔曲线动画对象，设置固定点模型名称为 "pos"
const bessel = new GameHighBessel({
  fixedPointNameOrPosList: "pos",
});

// 如果模型存在，则在玩家加入世界时播放动画，并将摄像机绑定到玩家
if (model) {
  model.meshInvisible = true;
  world.onPlayerJoin(({ entity, tick }) => {
    // 播放贝塞尔曲线动画，设置播放速度和缓动函数
    bessel.play({
      cameraEntity: model,
      speed: 0.00002,
      ease: "easeInOutCubic",
    });

    // 将贝塞尔曲线动画的摄像机实体设置为当前玩家的摄像机实体
    if (bessel.cameraEntity) entity.player.cameraEntity = bessel.cameraEntity;
  });
}
```

- 拖放进度
  效果： 在贝塞尔曲线上拖拽进度条，从任意位置开始播放动画。

```javascript
import GameHighBessel, { GameHighBesselEases } from "@dao3fun/high-bessel";

// 创建一个模型实体，设置其属性
const model = world.createEntity({
  mesh: "mesh/AI自动生成-橘子.vb",
  collides: false,
  gravity: false,
});

if (model) {
  // 初始化贝塞尔曲线动画对象，设置固定点模型名称为 "pos" 并绑定摄像机实体
  const bessel = new GameHighBessel({
    fixedPointNameOrPosList: "pos",
    cameraEntity: model,
  });

  // 设置贝塞尔曲线动画的进度为 60%，并开始播放
  bessel.progress = 0.6;
  bessel.play();

  // 当贝塞尔曲线动画完成时，重新从头开始播放
  bessel.onFinish(() => {
    bessel.play({ progress: 0 });
  });
}
```

- 曲线转曲面
  效果：将多条贝塞尔曲线转化为曲面

```javascript
import GameHighBessel, { GameHighBesselEases } from "@dao3fun/high-bessel";

// 定义一个包含贝塞尔曲线配置的数组
const besselConfigs = [
  { fixedPointNameOrPosList: "pos", fixedPointMeshInvisible: false },
  { fixedPointNameOrPosList: "pos2", fixedPointMeshInvisible: false },
  { fixedPointNameOrPosList: "pos3", fixedPointMeshInvisible: false },
];

// 根据配置数组创建贝塞尔曲线对象数组
const bessels = besselConfigs.map((config) => new GameHighBessel(config));

// 获取所有贝塞尔曲线对象的固定点列表
const fixedPointLists = bessels.map((bessel) => bessel.fixedPointList());

// 从固定点列表中创建一个贝塞尔曲面
const vectorSurface = GameHighBessel.createBezierSurfaceFromPoints({
  controlPoints: fixedPointLists,
});

// 遍历贝塞尔曲面上的每个位置，创建实体
vectorSurface.forEach((position) => {
  world.createEntity({
    mesh: "mesh/方块.vb",
    position,
    fixed: true,
  });
});
```