Mesh
Mesh
describes the geometric information (geometry)
and material information (material)
of the model. If you want to use an Object3D
object to display a 3D model, then it must add the MeshRenderer component, which mainly contains two properties:
Geometry
object, which determines the specific geometry of the object, includingvertex position
,topology
,UV
, etc.;Material
object, which determines the material ball style of the object, includingtexture
,color
,transparency
, etc.
Orillusion
has several built-in geometry types, which can be used to create different types of mesh
:
Rectangular Cuboid
BoxGeometry class provides the function of creating a rectangular box. Parameters overview:
Parameter | Description |
---|---|
width | The width on the X axis. The default value is 1. |
height | The height on the Y axis. The default value is 1. |
depth | The depth on the Z axis. The default value is 1. |
Example:
import {Object3D, MeshRenderer, BoxGeometry} from '@orillusion/core';
let obj = new Object3D();
// Add MeshRenderer component
let mr = obj.addComponent(MeshRenderer);
// Set the component geometry
mr.geometry = new BoxGeometry(5,2,3);
import { Engine3D, Scene3D, Object3D, Camera3D, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3, AtmosphericComponent, View3D } from '@orillusion/core';
await Engine3D.init();
let scene3D: Scene3D = new Scene3D();
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 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);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer to the object
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set a box geometry
mr.geometry = new BoxGeometry(5, 2, 3);
// set a pbr lit material
mr.material = new LitMaterial();
// set location and rotation
obj.localPosition = new Vector3(0, 0, 0);
obj.localRotation = new Vector3(0, 45, 0);
scene3D.addChild(obj);
// add an Atmospheric sky enviroment
scene3D.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
Sphere
SphereGeometry class provides the function of creating a sphere. Parameters overview:
Parameter | Description |
---|---|
widthSegments | The number of segments that make up the sphere along the width (longitude). |
heightSegments | The number of segments that make up the sphere along the height (latitude). |
phiStart | (Optional) The starting angle, in radians, of the horizontal (longitude) lines. |
phiLength | (Optional) The central angle, in radians, of the horizontal (longitude) lines. |
thetaStart | (Optional) The starting angle, in radians, of the vertical (latitude) lines. |
thetaLength | (Optional) The central angle, in radians, of the vertical (latitude) lines. |
Example:
import {Object3D, MeshRenderer, SphereGeometry} from '@orillusion/core';
let obj = new Object3D();
// Add MeshRenderer
let mr = obj.addComponent(MeshRenderer);
// Set the component geometry
mr.geometry = new SphereGeometry(2, 50, 50);
import { Engine3D, Scene3D, Object3D, Camera3D, AtmosphericComponent, View3D, LitMaterial, SphereGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from '@orillusion/core';
await Engine3D.init();
let scene3D: Scene3D = new Scene3D();
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 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);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer to the object
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set a box geometry
mr.geometry = new SphereGeometry(2, 50, 50);
// set a pbr lit material
mr.material = new LitMaterial();
// set location
obj.localPosition = new Vector3(0, 0, 0);
scene3D.addChild(obj);
// add an Atmospheric sky enviroment
scene3D.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
Cylinder
CylinderGeometry class provides the function of creating a cylinder. Parameters overview:
Parameter | Description |
---|---|
radiusTop | Top radius. The default value is 1. |
radiusBottom | Bottom radius. The default value is 1. |
height | The height of the cylinder. The default value is 1. |
radialSegments | The number of subdivisions around the circumference of the circle. The default value is 8. |
heightSegments | The number of subdivisions along the height of the cylinder. The default value is 8. |
openEnded | Whether the cylinder is open (with top and bottom). The default value is false. |
thetaStart | The starting angle of the first segment, in radians. The default value is 0. |
thetaLength | The central angle of the circular sector, in radians. The default value is Math.PI * 2. |
Example:
import {Object3D, MeshRenderer, CylinderGeometry} from '@orillusion/core';
let obj = new Object3D();
// Add MeshRenderer component
let mr = obj.addComponent(MeshRenderer);
// Set the component geometry
mr.geometry = new CylinderGeometry(2, 2, 10);
import { Engine3D, Scene3D, Object3D, Camera3D, AtmosphericComponent, View3D, LitMaterial, CylinderGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 } from '@orillusion/core';
await Engine3D.init();
let scene3D: Scene3D = new Scene3D();
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 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);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer to the object
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set a cylinder geometry
mr.geometry = new CylinderGeometry(1, 1, 1, 8, 8, false, 0, 2 * Math.PI);
// set a pbr lit material for 3 sub-geometries
let material = new LitMaterial();
mr.materials = [material, material, material];
// set location and rotation
obj.localPosition = new Vector3(0, 0, 0);
scene3D.addChild(obj);
// add an Atmospheric sky enviroment
scene3D.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
Torus
TorusGeometry class provides the function of creating a Torus.
Parameters overview:
Parameter | Description |
---|---|
radius | The radius of the Torus,default value 0.4 |
tube | The pipe radius,default value 0.1 |
radialSegments | Number of torus segments, default value 32 |
tubularSegments | Number of pipeline segments,default value 32 |
Example:
import {Object3D, MeshRenderer, TorusGeometry} from '@orillusion/core';
let obj = new Object3D();
// Add MeshRenderer component
let mr = obj.addComponent(MeshRenderer);
// set a torus geometry
mr.geometry = new TorusGeometry(3, 1, 32, 32);
import { Engine3D, Scene3D, Object3D, Camera3D, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3, AtmosphericComponent, View3D, TorusGeometry } from '@orillusion/core';
await Engine3D.init();
let scene3D: Scene3D = new Scene3D();
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 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);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer to the object
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set a box geometry
mr.geometry = new TorusGeometry(3, 1, 32, 32);
// set a pbr lit material
mr.material = new LitMaterial();
// set location and rotation
obj.localPosition = new Vector3(0, 0, 0);
obj.localRotation = new Vector3(90, 0, 0);
scene3D.addChild(obj);
// add an Atmospheric sky enviroment
scene3D.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
Plane
PlaneGeometry class provides the function of creating a plane. Parameters overview:
Parameter | Description |
---|---|
width | The width of the plane along the X axis. The default value is 1. |
height | The height of the plane along the Y axis. The default value is 1. |
segmentW | The number of segments along the width of the plane. The default value is 1. |
segmentH | The number of segments along the height of the plane. The default value is 1. |
up | The direction of the plane. The default value is Vector3.Y_AXIS. |
Example:
import {Object3D, MeshRenderer, PlaneGeometry} from '@orillusion/core';
let obj = new Object3D();
// Add MeshRenderer component
let mr = obj.addComponent(MeshRenderer);
// Set the component geometry
mr.geometry = new PlaneGeometry(100, 100, 1, 1);
import { Engine3D, Scene3D, Object3D, Camera3D, AtmosphericComponent, View3D, LitMaterial, PlaneGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3, GPUCullMode } from '@orillusion/core';
await Engine3D.init();
let scene3D: Scene3D = new Scene3D();
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 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);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer to the object
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// set a plane geometry
mr.geometry = new PlaneGeometry(20, 20);
// set a pbr lit material
mr.material = new LitMaterial();
// render double side
mr.material.cullMode = GPUCullMode.none;
// set location and rotation
obj.localPosition = new Vector3(0, 0, 0);
obj.localRotation = new Vector3(0, 45, 0);
scene3D.addChild(obj);
// add an Atmospheric sky enviroment
scene3D.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
Extruded Geometry
ExtrudeGeometry Creates extruded geometry from a path shape
Example:
import {Object3D, MeshRenderer, ExtrudeGeometry, Vector3} from '@orillusion/core';
let conduitObject3D = new Object3D();
// Add MeshRenderer component
let mr = conduitObject3D.addComponent(MeshRenderer);
// Create a custom shape
let shape: Vector3[] = [], vertexCount = 8, shapeRadius = 1
for (let i = 0; i < vertexCount; i++) {
let angle = Math.PI * 2 * i / vertexCount;
let point = new Vector3(Math.sin(angle), 0, Math.cos(angle)).multiplyScalar(shapeRadius);
shape.push(point);
}
// Create a custom curve path
let curve: Vector3[] = [], sectionCount = 60, modelRadius = 4
for (let i = 0; i < sectionCount; i++) {
let angle = Math.PI * 2 * i / 20;
modelRadius += 0.1 * i / sectionCount;
let offsetY = 0.6 - Math.sqrt(i / sectionCount);
let point = new Vector3(Math.sin(angle), offsetY * 6, Math.cos(angle)).multiplyScalar(modelRadius);
curve.push(point);
}
// Build extruded geometry
mr.geometry = new ExtrudeGeometry().build(shape, true, curve, 0.2);
import { Engine3D, Scene3D, Object3D, Camera3D, LitMaterial, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3, AtmosphericComponent, View3D, ExtrudeGeometry, BitmapTexture2D, GPUCullMode } from '@orillusion/core';
await Engine3D.init();
let scene3D: Scene3D = new Scene3D();
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
camera.perspective(60, Engine3D.aspect, 1, 5000.0);
let controller = camera.object3D.addComponent(HoverCameraController);
controller.setCamera(0, 0, 40);
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);
// create a object
const obj: Object3D = new Object3D();
// add MeshRenderer to the object
let mr: MeshRenderer = obj.addComponent(MeshRenderer);
// build shape
let shape: Vector3[] = [],
vertexCount = 8,
shapeRadius = 1;
for (let i = 0; i < vertexCount; i++) {
let angle = (Math.PI * 2 * i) / vertexCount;
let point = new Vector3(Math.sin(angle), 0, Math.cos(angle)).multiplyScalar(shapeRadius);
shape.push(point);
}
// build curve path
let curve: Vector3[] = [],
sectionCount = 60,
modelRadius = 4;
for (let i = 0; i < sectionCount; i++) {
let angle = (Math.PI * 2 * i) / 20;
modelRadius += (0.1 * i) / sectionCount;
let offsetY = 0.6 - Math.sqrt(i / sectionCount);
let point = new Vector3(Math.sin(angle), offsetY * 6, Math.cos(angle)).multiplyScalar(modelRadius);
curve.push(point);
}
// build ExtrudeGeometry from shape & curve
mr.geometry = new ExtrudeGeometry().build(shape, true, curve, 0.2);
// set a pbr lit material
mr.material = new LitMaterial();
let texture = new BitmapTexture2D();
texture.addressModeU = 'repeat';
texture.addressModeV = 'repeat';
await texture.load('https://cdn.orillusion.com/textures/grid.webp');
mr.material.baseMap = texture;
mr.material.cullMode = GPUCullMode.none;
scene3D.addChild(obj);
// add an Atmospheric sky enviroment
scene3D.addComponent(AtmosphericComponent).sunY = 0.6;
// create a view with target scene and camera
let view = new View3D();
view.scene = scene3D;
view.camera = camera;
// start render
Engine3D.startRenderView(view);
Custom Geometry
We can customize the shape of the geometry by updating the vertices of the existing geometry’s vertexBuffer.
Example:
import {Object3D, MeshRenderer, PlaneGeometry, LitMaterial, VertexAttributeName} from '@orillusion/core';
let obj = new Object3D();
// Add MeshRenderer component
let mr = obj.addComponent(MeshRenderer);
// Set a base plane geometry, easy to set size and segments
mr.geometry = new PlaneGeometry(100, 100, 100, 100);
mr.material = new LitMaterial()
// get current vertex position buffer
let posAttrData = mr.geometry.getAttribute(VertexAttributeName.position);
// you can reset all vertex position
for (let i = 0, count = posAttrData.data.length / 3; i < count; i++) {
posAttrData.data[i * 3 + 0] = Math.random(); // position x
posAttrData.data[i * 3 + 1] = Math.random(); // position y
posAttrData.data[i * 3 + 2] = Math.random(); // poisiton z
}
// reuplaod the vertex buffer
mr.geometry.vertexBuffer.upload(VertexAttributeName.position, posAttrData);
// recompute normal buffer
mr.geometry.computeNormals();
We can even change the vertex buffer in the main loop every frame:
import { View3D, PlaneGeometry, Engine3D, Scene3D, AtmosphericComponent, CameraUtil, HoverCameraController, Object3D, DirectLight, KelvinUtil, MeshRenderer, LitMaterial, VertexAttributeName, Time } from '@orillusion/core';
// An sample of dynamically updating a geometry vertex attribute
class Smaple_VertexAnimation {
// This geometry will dynamically update its vertex data over time
floorGeometry: PlaneGeometry;
scene: Scene3D;
async run() {
await Engine3D.init({ beforeRender: () => this.update() });
let view = new View3D();
view.scene = new Scene3D();
view.scene.addComponent(AtmosphericComponent);
this.scene = view.scene;
view.camera = CameraUtil.createCamera3DObject(view.scene, 'camera');
view.camera.perspective(60, Engine3D.aspect, 1, 2000);
view.camera.object3D.addComponent(HoverCameraController).setCamera(35, -20, 150);
Engine3D.startRenderView(view);
this.createScene();
}
private createScene() {
// add light
let lightObj3D = new Object3D();
let directLight = lightObj3D.addComponent(DirectLight);
directLight.intensity = 25;
directLight.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
directLight.castShadow = true;
lightObj3D.rotationX = 53.2;
lightObj3D.rotationY = 220;
lightObj3D.rotationZ = 5.58;
this.scene.addChild(lightObj3D);
// add floor
this.floorGeometry = new PlaneGeometry(100, 100, 199, 199);
let floor = new Object3D();
let renderer = floor.addComponent(MeshRenderer);
renderer.geometry = this.floorGeometry;
renderer.material = new LitMaterial();
renderer.castShadow = true;
renderer.receiveShadow = true;
this.scene.addChild(floor);
}
private update() {
if (this.floorGeometry) {
let posAttrData = this.floorGeometry.getAttribute(VertexAttributeName.position);
// update its vertex data over time
let timeOffset = Time.time;
for (let i = 0, count = posAttrData.data.length / 3; i < count; i++) {
posAttrData.data[i * 3 + 1] = Math.sin(timeOffset * 0.01 + i * 0.25);
}
// position attr need to be upload
this.floorGeometry.vertexBuffer.upload(VertexAttributeName.position, posAttrData);
//update normals
this.floorGeometry.computeNormals();
}
}
}
new Smaple_VertexAnimation().run();