Load a 3D Model

We recommend using glTF (Graphics Language Transmission Format) as the model loading format.

The glTF (Graphics Language Transmission Format) specification, published by khronos, enables efficient transfer and loading of 3D scenes and models. glTF (Graphics Language Transmission Format) compresses the size of 3D resources to reduce the application file size and processing difficulty. For more information about glTF, see the glTF official website.

Basic Usage

A simple resource management module is built into the engine. We can use the loadGltf API to conveniently load gltf or glb files:

let scene = new Scene3D();
// Load the gltf file
let data = await engine.res.loadGltf('sample.gltf');
// Add to the scene
scene.addChild(data);

For more detailed usage, refer to the GLTF introduction.

Example

Here we look at a simple example of loading a model:

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
let 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, engine.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 engine.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
engine.startRenderView(view);