Orillusion第一个脚本组件
Orillusion 的核心是 组件系统，除了引擎内置的基础组件，用户也可以通过编写自定义组件来扩充任意功能。这一节我们将学习如何利用自定义组件为物体添加动画脚本，比如为上一节创建的立方体添加旋转动画。先来看看最终的效果：我们为立方体添加了一个自定义 RotateScript 组件，使之绕 Y 轴连续转动。
ts
import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, ComponentBase } from "@orillusion/core";
class RotateScript extends ComponentBase {
public update() {
// update lifecycle codes
this.object3D.rotationY += 1;
}
}
async function demo() {
// initializa engine
await Engine3D.init({});
// create new scene as root node
let scene3D = new Scene3D();
// create camera
let cameraObj = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, window.innerWidth / window.innerHeight, 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 new forward rendering job
let renderJob = new ForwardRenderJob(scene3D);
// start rendering
Engine3D.startRender(renderJob);
}
demo();
用户可以继承 ComponentBase 基类，并通过组件的 生命周期 回调中编写自己的逻辑代码。借助脚本组件的更新回调设置每一帧物体的行为，状态和方位。
示例中我们以一个包含 update 生命周期的简单脚本组件为例，编写一个为物体添加旋转动画的脚本。
ts
class RotateScript extends ComponentBase {
public update() {
// update 生命周期，主循环每一帧执行
}
}
我们可以通过 this.object3D 获取当前组件挂载到的 object3D 对象，从而更改节点的状态。例如，在 update 中更新 object3D.rotationY, 即每一帧围绕 Y 轴旋转加 1 度。
ts
public update() {
this.object3D.rotationY += 1;
}
定义好组件后，我们利用 addComponent 将组件挂载到对象上即可。
ts
obj.addComponent(RotateScript);
引擎主循环会自动运行 update 回调完成动画效果，更多自定义组件的使用方法可参考 自定义组件 页面。