Skip to content
本页内容

加载3D模型

我们推荐使用 glTF(Graphics Language Transmission Format)作为模型加载格式。

glTF(Graphics Language Transmission Format)规范由 khronos 发布,能够高效传输和加载 3D 场景、模型。glTF(Graphics Language Transmission Format)会压缩 3D 资源大小,以减少应用文件大小及处理难度。更多关于 glTF 的介绍请参看 glTF官网

基本使用

引擎内已经封装了简易的 资源管理 模块,我们可以使用 loadGltf API 很方便的加载 gltfglb 文件:

ts
let scene = new Scene3D();
// 加载 gltf 文件
let data = await Engine3D.res.loadGltf('sample.gltf');
// 添加至场景
scene.addChild(data);

更多详细用法,请参考 GLTF 介绍

示例

这里我们来看一个加载模型的简单示例:


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, DirectLight, HoverCameraController, Color } from "@orillusion/core";

async function demo() {
    // initializa engine
    await Engine3D.init();
    // create new scene as root node
    let scene3D: Scene3D = new Scene3D();
    // create camera
    let cameraObj: Object3D = new Object3D();
    let camera = cameraObj.addComponent(Camera3D);
    // adjust camera view
    camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
    // set camera controller
    let controller = cameraObj.addComponent(HoverCameraController);
    controller.setCamera(0, -20, 15);
    // add camera node
    scene3D.addChild(cameraObj);
    // create light
    let light: Object3D = new Object3D();
    // add direct light component
    let component: DirectLight = light.addComponent(DirectLight);
    // adjust lighting
    light.rotationX = 45;
    light.rotationY = 30;
    component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
    component.intensity = 1;
    // add light object
    scene3D.addChild(light);

    let dragon = await Engine3D.res.loadGltf('https://cdn.orillusion.com/PBR/DragonAttenuation/DragonAttenuation.gltf');
    scene3D.addChild(dragon);

    // create new forward rendering job
    let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
    // start rendering
    Engine3D.startRender(renderJob);
}

demo();