Skip to content

第一个脚本组件

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


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
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 回调完成动画效果,更多自定义组件的使用方法可参考 自定义组件 页面。