Skip to content

代码示例

场景展示动画

效果: 利用贝塞尔曲线缓动技术,实现从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/橘子.vb", // 替换为你的模型路径
  collides: false,
  gravity: false,
});

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

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

  // 当贝塞尔曲线动画播放完成时,重置进度并重新播放
  bessel.onFinish(() => {
    bessel.progress = 0; // 重置进度
    bessel.play(); // 重新播放动画
  });
}

定位点转坐标列表

效果: 将模型定位点转换为坐标列表,供后续的贝塞尔曲线动画使用。

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

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

// 输出固定点坐标列表
console.log(bessel.fixedPointList());
// 输出格式如下:[[x1, y1, z1], [x2, y2, z2], ...]

// 使用转换后的坐标列表初始化另一个贝塞尔曲线动画对象,并播放动画
const bessel2 = new GameHighBessel({
  fixedPointNameOrPosList: bessel.fixedPointList(),
});
bessel2.play();

曲线转曲面

效果: 将多条贝塞尔曲线转化为曲面。

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

注意:以上代码示例为概念性演示,可能需要根据你的具体项目环境及需求进行调整。