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 介绍

示例

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

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<
ts
import { Engine3D, Scene3D, Object3D, Camera3D, DirectLight, HoverCameraController, Color, View3D, AtmosphericComponent } from '@orillusion/core';

// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D: Scene3D = new Scene3D();
// add an Atmospheric sky enviroment
let sky = scene3D.addComponent(AtmosphericComponent);
sky.sunY = 0.6;
// create camera
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, Engine3D.aspect, 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);

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

// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);