第一个脚本组件

Orillusion 的核心是 组件系统，除了引擎内置的基础组件，用户也可以通过编写自定义组件来扩充任意功能。这一节我们将学习如何利用自定义组件为物体添加动画脚本，比如为上一节创建的立方体添加旋转动画。先来看看最终的效果：我们为立方体添加了一个自定义 RotateScript 组件，使之绕 Y 轴连续转动。

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

用户可以继承 ComponentBase 基类，并通过组件的 生命周期 回调中编写自己的逻辑代码。借助脚本组件的更新回调设置每一帧物体的行为，状态和方位。
示例中我们以一个包含 onUpdate 生命周期的简单脚本组件为例，编写一个为物体添加旋转动画的脚本。

class RotateScript extends ComponentBase {
  public onUpdate() {
    // update 生命周期，主循环每一帧执行
  }
}

我们可以通过 this.object3D 获取当前组件挂载到的 object3D 对象，从而更改节点的状态。例如，在 update 中更新 object3D.rotationY, 即每一帧围绕 Y 轴旋转加 1 度。

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

定义好组件后，我们利用 addComponent 将组件挂载到对象上即可。

obj.addComponent(RotateScript);

引擎主循环会自动运行 onUpdate 回调完成动画效果，更多自定义组件的使用方法可参考 自定义组件 页面。