Load 3D Model

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

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

Basic Usage

A simple resource management module has been included in the engine, we can use loadGltf API easily to loadgltf or glb files:

let scene = new Scene3D();
// load gltf file
let data = await Engine3D.res.loadGltf('sample.gltf');
// add to scene
scene.addChild(data);

You can refer GLTF Introduction for more detailed information.

Example

Here is 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
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);