【网页端数字人开发】基于babylonjs实现GLB格式的三维模型导入及渲染

一、效果

二、源码

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（垂直旋转）
    3.5,                    // radius（距离）
    new BABYLON.Vector3(0, 0.9, -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/",   // 路径
    "man.glb",  // 模型名
    scene
);

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

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