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

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

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

详细文档

https://docs.pgaot.com/npm/high-bessel/

示例

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

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 位置等，实现平滑的场景切换。

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;
  });
}

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

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 });
  });
}

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

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,
  });
});