Orillusion

简体中文

English

简体中文

English

Appearance

绘制立方体 ​

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


WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<
ts
import { Engine3D, Scene3D, Object3D, Camera3D, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, View3D, AtmosphericComponent } from '@orillusion/core'

// initializa engine
await Engine3D.init()
// create new scene as root node
let scene3D: Scene3D = new Scene3D()
// add an Atmospheric sky enviroment
let sky = scene3D.addComponent(AtmosphericComponent)
sky.sunY = 0.6
// create camera
let cameraObj: Object3D = new Object3D()
let camera = cameraObj.addComponent(Camera3D)
// adjust camera view
camera.perspective(60, Engine3D.aspect, 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.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 rotation
obj.rotationY = 45
// 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, View3D, AtmosphericComponent } from '@orillusion/core'

// initializa engine
await Engine3D.init()
// create new scene as root node
let scene3D: Scene3D = new Scene3D()
// add an Atmospheric sky enviroment
let sky = scene3D.addComponent(AtmosphericComponent)
sky.sunY = 0.6
// create camera
let cameraObj: Object3D = new Object3D()
let camera = cameraObj.addComponent(Camera3D)
// adjust camera view
camera.perspective(60, Engine3D.aspect, 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.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 rotation
obj.rotationY = 45
// 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)

引入模块 ​

首先，我们需要引入相应的模块：

ts
import {
  Engine3D,
  Scene3D,
  Object3D,
  Camera3D,
  View3D,
  LitMaterial,
  BoxGeometry,
  MeshRenderer,
  DirectLight,
  HoverCameraController,
  AtmosphericComponent
} from '@orillusion/core';
import {
  Engine3D,
  Scene3D,
  Object3D,
  Camera3D,
  View3D,
  LitMaterial,
  BoxGeometry,
  MeshRenderer,
  DirectLight,
  HoverCameraController,
  AtmosphericComponent
} from '@orillusion/core';
模块说明
Engine3DEngine3D 类为引擎主体，包含引擎初始化启动、运行渲染等核心方法
Scene3D通过新建 Scene3D 类可以创建一个场景实例，该场景实例在程序中通常作为根节点被使用
Object3DObject3D 类定义了物体对象，该对象包含常用的物体属性如位置、旋转等参数
Camera3D通过新建 Camera3D 类可以创建一个摄像机3D组件的实例，该实例可以作为相机节点添加到场景中
View3DView3D，指定引擎渲染的目标场景和观察相机
LitMaterial通过 LitMaterial 类可以创建材质实例，并通过设置材质参数实现不同的材质效果
BoxGeometry通过 BoxGeometry 类可以创建一个长方体几何体
MeshRendererMeshRenderer组件，为物体提供 mesh 对象几何渲染
DirectLight平行光组件，可以设置平行光组件的颜色、强度属性和光照角度来获得合适的光照效果
HoverCameraController盘旋相机组件，可以控制相机围绕观察点移动
AtmosphericComponent引擎内置的大气天空盒组件

初始化引擎 ​

ts
await Engine3D.init();
await Engine3D.init();

新建场景根节点 ​

ts
let scene3D = new Scene3D();
let scene3D = new Scene3D();

添加天空盒 ​

ts
// 添加大气散射天空组件
let sky = scene3D.addComponent(AtmosphericComponent);
// 添加大气散射天空组件
let sky = scene3D.addComponent(AtmosphericComponent);

添加摄像机控件 ​

ts
// 新建摄像机实例
let cameraObj = 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);
// 新建摄像机实例
let cameraObj = 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 = new Object3D();
// 添加直接光组件
let component = light.addComponent(DirectLight);
// 调整光照参数
light.rotationX = 45;
light.rotationY = 30;
component.intensity = 2;
// 添加光照对象
scene3D.addChild(light);
// 新建光照
let light = new Object3D();
// 添加直接光组件
let component = light.addComponent(DirectLight);
// 调整光照参数
light.rotationX = 45;
light.rotationY = 30;
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();
// 新建对象
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);
scene3D.addChild(obj);

渲染场景 ​

ts
// 创建View3D对象
let view = new View3D();
// 指定渲染的场景
view.scene = scene3D;
// 指定使用的相机
view.camera = camera;
// 开始渲染
Engine3D.startRenderView(view);
// 创建View3D对象
let view = new View3D();
// 指定渲染的场景
view.scene = scene3D;
// 指定使用的相机
view.camera = camera;
// 开始渲染
Engine3D.startRenderView(view);