Orillusion

Appearance

本页内容

加载3D模型 ​

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

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

基本使用 ​

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

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();