Orillusion第一个脚本组件
Orillusion 的核心是 组件系统，除了引擎内置的基础组件，用户也可以通过编写自定义组件来扩充任意功能。这一节我们将学习如何利用自定义组件为物体添加动画脚本，比如为上一节创建的立方体添加旋转动画。先来看看最终的效果：我们为立方体添加了一个自定义 RotateScript 组件，使之绕 Y 轴连续转动。
ts
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)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 生命周期的简单脚本组件为例，编写一个为物体添加旋转动画的脚本。
ts
class RotateScript extends ComponentBase {
public onUpdate() {
// update 生命周期，主循环每一帧执行
}
}class RotateScript extends ComponentBase {
public onUpdate() {
// update 生命周期，主循环每一帧执行
}
}我们可以通过 this.object3D 获取当前组件挂载到的 object3D 对象，从而更改节点的状态。例如，在 update 中更新 object3D.rotationY, 即每一帧围绕 Y 轴旋转加 1 度。
ts
public onUpdate() {
this.object3D.rotationY += 1;
}public onUpdate() {
this.object3D.rotationY += 1;
}定义好组件后，我们利用 addComponent 将组件挂载到对象上即可。
ts
obj.addComponent(RotateScript);obj.addComponent(RotateScript);引擎主循环会自动运行 onUpdate 回调完成动画效果，更多自定义组件的使用方法可参考 自定义组件 页面。