First Script

The core of Orillusion is component system, in addition to the basic components built into the engine, users can also write custom components to extend any functionality. In this section we will learn how to use custom components to add animation scripts to objects, such as adding a rotation animation to the cube created in the previous section. Let's take a look at the final result: we added a custom RotateScript component to the cube to make it rotate continuously around the Y axis.

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

<

import { Engine3D, Scene3D, Object3D, Camera3D, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, ComponentBase, View3D, AtmosphericComponent } from '@orillusion/core';

class RotateScript extends ComponentBase {
    public onUpdate() {
        // update lifecycle codes
        this.object3D.rotationY += 1;
    }
}

// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D = new Scene3D();
// add an Atmospheric sky enviroment
let sky = scene3D.addComponent(AtmosphericComponent);
sky.sunY = 0.6;
// create camera
let cameraObj = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
// set camera controller
cameraObj.addComponent(HoverCameraController);
// add camera node
scene3D.addChild(cameraObj);

// create light
let light: Object3D = new Object3D();
// add direct light component
let component = light.addComponent(DirectLight);
// adjust lighting
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
// add light object
scene3D.addChild(light);

// create new object
const obj = new Object3D();
// add MeshRenderer
let mr = obj.addComponent(MeshRenderer);
// set geometry
mr.geometry = new BoxGeometry(5, 5, 5);
// set material
mr.material = new LitMaterial();
// add script
obj.addComponent(RotateScript);
// add object
scene3D.addChild(obj);

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

Users can extend functions from the ComponentBase class, and by using callbacks of Life Cycle to write your own logic. Set the behavior, state and orientation of the object for each frame by setting update callbacks of the script component.
In the example, we use a simple script component with onUpdate lifecycle, and write a script to add rotation animation to the object.

class RotateScript extends ComponentBase {
    public onUpdate() {
        //update lifecycle, executed every frame in the main loop
    }
}

We can get the current object3D of the component by this.object3D, and then change the state of the node. For example, in update() we increase object3D.rotationY, in order to rotate the object around the Y axis by 1 degree every frame.

public onUpdate() {
  this.object3D.rotationY += 1;
}

After defining the component, we can use addComponent to mount the component to the object.

obj.addComponent(RotateScript);

The main loop of engine will run onUpdate callback automatically to complete the animation effect. For more usage of custom components, please refer to Custom Components page.