图片材质
该材质继承于 UnLit 材质,同样不计算光照,仅通过图片像素颜色渲染的基础材质,不同的是,增加了空间裁剪 (clip)
的设置,可以更自由的进行图片的显示。
支持以下属性:
属性 | 描述 |
---|---|
baseColor | 基础颜色 |
uv_offsetX | x方向位移 |
uv_offsetY | y方向位移 |
uv_scaleX | x方向缩放 |
uv_scaleY | y方向缩放 |
clip_left | 左方裁剪 |
clip_top | 上方裁剪 |
clip_right | 右方裁剪 |
clip_bottom | 下方裁剪 |
用法
ts
import {ImageMaterial} from '@orillusion/media-extention'
// 创建图片材质
let mat = new ImageMaterial();
// 加载2D纹理
let texture = await Engine3D.res.loadTexture('path/to/image');
mat.baseMap = texture;
ts
import {
Engine3D, Vector3, Scene3D, Object3D, Camera3D, ForwardRenderJob, MeshRenderer, HoverCameraController, PlaneGeometry, GUIHelp
} from "@orillusion/core";
import { ImageMaterial } from "@orillusion/media-extention"
async function demo() {
await Engine3D.init();
GUIHelp.init();
let scene = new Scene3D();
let camera = new Object3D();
scene.addChild(camera)
let mainCamera = camera.addComponent(Camera3D);
mainCamera.perspective(60, window.innerWidth / window.innerHeight, 0.1, 10000.0);
let hc = camera.addComponent(HoverCameraController);
hc.setCamera(0, 0, 2);
// 创建2D纹理
let texture = await Engine3D.res.loadTexture('https://cdn.orillusion.com/gltfs/cube/material_02.png');
// 创建图片材质
let mat = new ImageMaterial();
mat.baseMap = texture;
mat.roughness = 1;
mat.debug();
// 创建2D平面
let planeObj = new Object3D();
let mr = planeObj.addComponent(MeshRenderer);
mr.geometry = new PlaneGeometry(2, 2, 10, 10, Vector3.Z_AXIS);
mr.material = mat;
scene.addChild(planeObj);
let renderJob = new ForwardRenderJob(scene);
Engine3D.startRender(renderJob);
}
demo();