网格

mesh 描述了模型的几何信息(geometry)和材质信息(material)。如果你想用一个 Object3D 对象展示一个3D的模型，那么它必须添加 MeshRenderer 组件，它主要包含两个属性：

geometry 对象，它决定了物体具体的几何形状，包括顶点位置，拓扑，UV等；
material 对象，它决定了物体呈现的材质球样式，包括贴图，颜色，透明度等属性。

Orillusion 内置了几种常见的几何体，可以很方便的创建不同的 mesh类型:

长方体

BoxGeometry 类提供长方体创建功能。参数概览：

参数	描述
width	X轴上面的宽度，默认值为1。
height	y轴上面的高度，默认值为1。
depth	Z轴上面的深度，默认值为1。

使用示例：

import {Object3D, MeshRenderer, BoxGeometry} from '@orillusion/core';

let obj = new Object3D();
// 添加 MeshRenderer 组件
let mr = obj.addComponent(MeshRenderer);
// 设置组件 geometry
mr.geometry = new BoxGeometry(5,2,3);

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

import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from "@orillusion/core";
async function demo() {
	// 初始化引擎
	await Engine3D.init({});
	// 新建场景根节点
	let scene3D:Scene3D = new Scene3D();
	// 新建摄像机实例
	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);
	// 新建光照
	let light:Object3D = new Object3D();
	// 添加直接光组件
	let component:DirectLight = light.addComponent(DirectLight);
	// 调整光照参数
	light.rotationX = 45;
	light.rotationY = 30;
	component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
	component.intensity = 1;
	// 添加光照对象
	scene3D.addChild(light);
	// 新建对象
	const obj:Object3D = new Object3D();
	// 为对象添 MeshRenderer
	let mr:MeshRenderer = obj.addComponent(MeshRenderer);
	// 设置几何体
	mr.geometry = new BoxGeometry(5, 2, 3);
	// 设置材质
	mr.material = new LitMaterial();
	// 设置位置和旋转
	obj.localPosition = new Vector3(0, 0, 0);
  	obj.localRotation = new Vector3(0, 45, 0);
	// 添加对象
	scene3D.addChild(obj);
	// 新建前向渲染业务
	let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
	// 开始渲染
	Engine3D.startRender(renderJob);
}
demo();

球体

SphereGeometry 类提供球体创建功能。参数概览：

参数	描述
widthSegments	球体水平分段数（沿着经线分段）
heightSegments	球体垂直分段数（沿着纬线分段）
phiStart	（可选）指定水平（经线）起始角度
phiLength	（可选）指定水平（经线）扫描角度的大小球体赤道线的弧长
thetaStart	（可选）指定垂直（纬线）起始角度
thetaLength	（可选）指定垂直（纬线）扫描角度大小

使用示例：

import {Object3D, MeshRenderer, SphereGeometry} from '@orillusion/core';

let obj = new Object3D();
// 添加 MeshRenderer 组件
let mr = obj.addComponent(MeshRenderer);
// 设置组件 geometry
mr.geometry = new SphereGeometry(2, 50, 50);

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

import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, SphereGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from "@orillusion/core";
async function demo() {
	// 初始化引擎
	await Engine3D.init({});
	// 新建场景根节点
	let scene3D:Scene3D = new Scene3D();
	// 新建摄像机实例
	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);
	// 新建光照
	let light:Object3D = new Object3D();
	// 添加直接光组件
	let component:DirectLight = light.addComponent(DirectLight);
	// 调整光照参数
	light.rotationX = 45;
	light.rotationY = 30;
	component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
	component.intensity = 1;
	// 添加光照对象
	scene3D.addChild(light);
	// 新建对象
	const obj:Object3D = new Object3D();
	// 为对象添 MeshRenderer
	let mr:MeshRenderer = obj.addComponent(MeshRenderer);
	// 设置几何体
	mr.geometry = new SphereGeometry(2, 50, 50);
	// 设置材质
	mr.material = new LitMaterial();
	// 设置位置和旋转
	obj.localPosition = new Vector3(0, 0, 0);
	// 添加对象
	scene3D.addChild(obj);
	// 新建前向渲染业务
	let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
	// 开始渲染
	Engine3D.startRender(renderJob);
}
demo();

圆柱体

CylinderGeometry 类提供球体创建功能。

参数概览：

参数	描述
radiusTop	顶部半径，默认值为1
radiusBottom	底部半径，默认值为1
height	桶高度，默认值为1
radialSegments	圆面细分数量，默认值为8
heightSegments	桶壁细分数量，默认值为8
openEnded	是否开放的桶（有上下底），默认值为false
thetaStart	第一个分段的起始角度，默认值为0
thetaLength	圆形扇区的中心角，默认值为Math.PI * 2

使用示例：

import {Object3D, MeshRenderer, CylinderGeometry} from '@orillusion/core';

let obj = new Object3D();
// 添加 MeshRenderer 组件
let mr = obj.addComponent(MeshRenderer);
// 设置组件 geometry
mr.geometry = new CylinderGeometry(2, 2, 10);

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

import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, CylinderGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from "@orillusion/core";
async function demo() {
	// 初始化引擎
	await Engine3D.init({});
	// 新建场景根节点
	let scene3D:Scene3D = new Scene3D();
	// 新建摄像机实例
	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, -15, 10);
	// 添加相机节点
	scene3D.addChild(cameraObj);
	// 新建光照
	let light:Object3D = new Object3D();
	// 添加直接光组件
	let component:DirectLight = light.addComponent(DirectLight);
	// 调整光照参数
	light.rotationX = 45;
	light.rotationY = 30;
	component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
	component.intensity = 1;
	// 添加光照对象
	scene3D.addChild(light);
	// 新建对象
	const obj:Object3D = new Object3D();
	// 为对象添 MeshRenderer
	let mr:MeshRenderer = obj.addComponent(MeshRenderer);
	// 设置几何体
	mr.geometry = new CylinderGeometry(1, 1, 1, 8, 8, false, 0, 2 * Math.PI);
	// 设置材质
	mr.material = new LitMaterial();
	// 设置位置和旋转
	obj.localPosition = new Vector3(0, 0, 0);
	// 添加对象
	scene3D.addChild(obj);
	// 新建前向渲染业务
	let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
	// 开始渲染
	Engine3D.startRender(renderJob);
}
demo();

平面

PlaneGeometry 类提供平面创建功能。

参数概览：

参数	描述
width	平面沿着X轴的宽度。默认值是1。
height	平面沿着Y轴的高度。默认值是1。
segmentW	平面的宽度分段数，默认值是1。
segmentH	平面的高度分段数，默认值是1。
up	平面朝向，默认值是Vector3.Y_AXIS。

使用示例：

import {Object3D, MeshRenderer, PlaneGeometry} from '@orillusion/core';

let obj = new Object3D();
// 添加 MeshRenderer 组件
let mr = obj.addComponent(MeshRenderer);
// 设置组件 geometry
mr.geometry = new PlaneGeometry(100, 100, 1, 1);

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

import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, PlaneGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3, GPUCullMode } from "@orillusion/core";
async function demo() {
	// 初始化引擎
	await Engine3D.init({});
	// 新建场景根节点
	let scene3D:Scene3D = new Scene3D();
	// 新建摄像机实例
	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, -15, 80);
	// 添加相机节点
	scene3D.addChild(cameraObj);
	// 新建光照
	let light:Object3D = new Object3D();
	// 添加直接光组件
	let component:DirectLight = light.addComponent(DirectLight);
	// 调整光照参数
	light.rotationX = 45;
	light.rotationY = 30;
	component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
	component.intensity = 1;
	// 添加光照对象
	scene3D.addChild(light);
	// 新建对象
	const obj:Object3D = new Object3D();
	// 为对象添 MeshRenderer
	let mr:MeshRenderer = obj.addComponent(MeshRenderer);
	// 设置几何体
	mr.geometry = new PlaneGeometry(20, 20);
	// 设置材质
	mr.material = new LitMaterial();
	mr.material.cullMode = GPUCullMode.none;
	// 设置位置和旋转
	obj.localPosition = new Vector3(0, 0, 0);
  	obj.localRotation = new Vector3(0, 45, 0);
	// 添加对象
	scene3D.addChild(obj);
	// 新建前向渲染业务
	let renderJob:ForwardRenderJob = new ForwardRenderJob(scene3D);
	// 开始渲染
	Engine3D.startRender(renderJob);
}
demo();

WebGPU Shader

后处理特效

网格

长方体

球体

圆柱体

平面

网格 ​

长方体 ​

球体 ​

圆柱体 ​

平面 ​

网格

长方体

球体

圆柱体

平面