Appearance
代码示例
场景展示动画
效果: 利用贝塞尔曲线缓动技术,实现从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,
});
});注意:以上代码示例为概念性演示,可能需要根据你的具体项目环境及需求进行调整。