Orillusion

Appearance

本页内容

绘制立方体 ​

在这一节，我们将通过一个绘制立方体的实例了解一下引擎的使用流程：


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, 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';
模块说明
Engine3DEngine3D 类为引擎主体，包含引擎初始化启动、运行渲染等核心方法
Scene3D通过新建 Scene3D 类可以创建一个场景实例，该场景实例在程序中通常作为根节点被使用
Object3DObject3D 类定义了物体对象，该对象包含常用的物体属性如位置、旋转等参数
Camera3D通过新建 Camera3D 类可以创建一个摄像机3D组件的实例，该实例可以作为相机节点添加到场景中
ForwardRenderJob前向渲染业务，为引擎提供前向渲染方法
LitMaterial通过 LitMaterial 类可以创建材质实例，并通过设置材质参数实现不同的材质效果
BoxGeometry通过 BoxGeometry 类可以创建一个长方体几何体
MeshRendererMeshRenderer组件，为物体提供 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);