网格
mesh
描述了模型的几何信息(geometry)
和材质信息(material)
。如果你想用一个 Object3D
对象展示一个3D的模型,那么它必须添加 MeshRenderer 组件,它主要包含两个属性:
geometry
对象,它决定了物体具体的几何形状,包括顶点位置
,拓扑
,UV
等;material
对象,它决定了物体呈现的材质球样式,包括贴图
,颜色
,透明度
等属性。
Orillusion
内置了几种常见的几何体,可以很方便的创建不同的 mesh
类型:
长方体
BoxGeometry 类提供长方体创建功能。 参数概览:
参数 | 描述 |
---|---|
width | X轴上面的宽度,默认值为1。 |
height | y轴上面的高度,默认值为1。 |
depth | Z轴上面的深度,默认值为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);
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);
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);
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);
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();