加载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 文件:

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

<

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)