绘制立方体
在这一节,我们将通过一个绘制立方体的实例了解一下引擎的使用流程:
ts
import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from "@orillusion/core";
async function demo() {
// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D:Scene3D = new Scene3D();
// create camera
let cameraObj:Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, 0, 15);
// add camera node
scene3D.addChild(cameraObj);
// create light
let light:Object3D = new Object3D();
// add direct light component
let component:DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
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:Object3D = new Object3D();
// add MeshRenderer
let mr:MeshRenderer = obj.addComponent(MeshRenderer);
// set geometry
mr.geometry = new BoxGeometry(5, 5, 5);
// set material
mr.material = new LitMaterial();
// set position and rotation
obj.localPosition = new Vector3(0, 0, 0);
obj.localRotation = new Vector3(0, 45, 0);
// add object
scene3D.addChild(obj);
// create new forward rendering job
let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
// start rendering
Engine3D.startRender(renderJob);
}
demo();
引入模块
首先,我们需要引入相应的模块:
ts
import {
Engine3D,
Scene3D,
Object3D,
Camera3D,
ForwardRenderJob,
LitMaterial,
BoxGeometry,
MeshRenderer,
DirectLight,
HoverCameraController
} from '@orillusion/core';
模块 | 说明 |
---|---|
Engine3D | Engine3D 类为引擎主体,包含引擎初始化启动、运行渲染等核心方法 |
Scene3D | 通过新建 Scene3D 类可以创建一个场景实例,该场景实例在程序中通常作为根节点被使用 |
Object3D | Object3D 类定义了物体对象,该对象包含常用的物体属性如位置、旋转等参数 |
Camera3D | 通过新建 Camera3D 类可以创建一个摄像机3D组件的实例,该实例可以作为相机节点添加到场景中 |
ForwardRenderJob | 前向渲染业务,为引擎提供前向渲染方法 |
LitMaterial | 通过 LitMaterial 类可以创建材质实例,并通过设置材质参数实现不同的材质效果 |
BoxGeometry | 通过 BoxGeometry 类可以创建一个长方体几何体 |
MeshRenderer | MeshRenderer组件,为物体提供 mesh 对象几何渲染 |
DirectLight | 平行光组件,可以设置平行光组件的颜色、强度属性和光照角度来获得合适的光照效果 |
HoverCameraController | 盘旋相机组件,可以控制相机围绕观察点移动 |
初始化引擎
ts
await Engine3D.init();
新建场景根节点
ts
let scene3D = new Scene3D();
添加摄像机控件
ts
// 新建摄像机实例
let cameraObj:Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// 根据窗口大小设置摄像机视角
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// 设置相机控制器
let controller = camera.object3D.addComponent(HoverCameraController);
controller.setCamera(0, 0, 15);
// 添加相机节点
scene3D.addChild(cameraObj);
添加光照
ts
// 新建光照
let light: Object3D = new Object3D();
// 添加直接光组件
let component = light.addComponent(DirectLight);
// 调整光照参数
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 0.6, 0.6, 1);
component.intensity = 2;
// 添加光照对象
scene3D.addChild(light);
新建对象并为其添加 MeshRenderer
为对象添 MeshRenderer 后,我们需要将几何体和材质挂载到对象的 MeshRenderer 上。
ts
// 新建对象
const obj= new Object3D();
// 为对象添 MeshRenderer
let mr = obj.addComponent(MeshRenderer);
// 设置几何体
mr.geometry = new BoxGeometry(5, 5, 5);
// 设置材质
mr.material = new LitMaterial();
将物体对象添加到场景中
ts
scene3D.addChild(obj);
渲染场景
ts
// 新建前向渲染业务
let renderJob = new ForwardRenderJob(scene3D);
// 开始渲染
Engine3D.startRender(renderJob);