Orillusion

Appearance

本页内容

图片材质 ​

该材质继承于 UnLit 材质，同样不计算光照，仅通过图片像素颜色渲染的基础材质，不同的是，增加了空间裁剪 (clip) 的设置，可以更自由的进行图片的显示。

支持以下属性：

属性描述
baseColor基础颜色
uv_offsetXx方向位移
uv_offsetYy方向位移
uv_scaleXx方向缩放
uv_scaleYy方向缩放
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;


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

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