一、效果

二、源码

import './style.css'
//导入babylonjs
import * as BABYLON from "babylonjs"
//导入gltf加载器
import "babylonjs-loaders"


//创建canvas
const canvas = document.createElement("canvas");

//设置canvas的宽高
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;

//将canvas添加到body中
document.body.appendChild(canvas);

//创建引擎
const engine = new BABYLON.Engine(canvas, true);

//创建初始场景
const scene = new BABYLON.Scene(engine);

//创建相机
const camera = new BABYLON.ArcRotateCamera(
    "camera",           // 名称
    Math.PI / 2,           // alpha（水平旋转）
    Math.PI/2 ,           // beta（垂直旋转）
    5,                    // radius（距离）
    new BABYLON.Vector3(0, 0.8, -1), // 目标点
    scene
);
// 让相机响应鼠标/触摸操作
camera.attachControl(canvas, true);

// 创建光源
const light = new BABYLON.DirectionalLight(
  "light",//名称
   new BABYLON.Vector3(0, -1, -1), //光源方向
   scene  //光源所在的场景
  );
// 设置光源强度 
light.intensity=10;

//加载模型
const result = await BABYLON.SceneLoader.ImportMeshAsync(
    null,        // 导入所有 mesh
    "/model/",   // 路径
    "animation.glb",  // 模型名
    scene
);

//选择模型第2个动画
const animation=result.animationGroups[1];

//如果按下空格键就进行动画切换
window.addEventListener("keydown", (event) => {
  if (event.key === " ") {
    if (animation.isPlaying) {
      animation.pause();
    } else {
      animation.play();
    }
  }
});

//渲染场景
engine.runRenderLoop(() => {
scene.render();
});

//监听窗口大小改变
window.addEventListener("resize", () => {
engine.resize();
});