Skip to content
本页内容

网格

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

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

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

长方体

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

参数描述
widthX轴上面的宽度,默认值为1。
heighty轴上面的高度,默认值为1。
depthZ轴上面的深度,默认值为1。

使用示例:

ts
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

<
ts
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(可选)指定垂直(纬线)扫描角度大小

使用示例:

ts
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

<
ts
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

使用示例:

ts
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

<
ts
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。

使用示例:

ts
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

<
ts
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();