图片材质

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

支持以下属性：

属性	类型	描述
baseMap	Texture	图片贴图
baseColor	Color	基础颜色
rectClip	Vector4	上下左右裁剪区域

用法

import {ImageMaterial} from '@orillusion/media-extention'

// 创建图片材质
let mat = new ImageMaterial();
// 加载2D纹理
let texture = await Engine3D.res.loadTexture('path/to/image');
mat.baseMap = texture;
// 设置基础颜色
mat.baseColor = new Color(1, 1, 1, 1)
// 设置裁剪区域, left/top/right/bottom
mat.rectClip = new Vector4(0, 0, 0, 0);

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Vector3, Scene3D, Object3D, Camera3D, MeshRenderer, HoverCameraController, PlaneGeometry, View3D, Color, Vector4 } from '@orillusion/core'
import { ImageMaterial } from '@orillusion/media-extention'
import * as dat from 'dat.gui'

await Engine3D.init()
let scene = new Scene3D()
let camera = new Object3D()
scene.addChild(camera)
let mainCamera = camera.addComponent(Camera3D)
mainCamera.perspective(60, Engine3D.aspect, 0.1, 10000.0)
let hc = camera.addComponent(HoverCameraController)
hc.setCamera(0, 0, 2)

// create a 2D image texture
let texture = await Engine3D.res.loadTexture('https://cdn.orillusion.com/gltfs/cube/material_02.png')
// create a image material
let mat = new ImageMaterial()
mat.baseMap = texture

let gui = new dat.GUI()
let f = gui.addFolder('Image')
f.addColor({ baseColor: [255, 255, 255] }, 'baseColor').onChange((v) => {
    mat.baseColor = new Color(v[0]/255, v[1]/255, v[2]/255, 1)
})
let clip = new Vector4(0,0,0,0)
f.add(clip, 'x', 0, 1, 0.01).name('left').onChange(() => mat.rectClip = clip)
f.add(clip, 'y', 0, 1, 0.01).name('top').onChange(() => mat.rectClip = clip)
f.add(clip, 'z', 0, 1, 0.01).name('right').onChange(() => mat.rectClip = clip)
f.add(clip, 'w', 0, 1, 0.01).name('bottom').onChange(() => mat.rectClip = clip)
f.open()


// create a 2D plane to show the image
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 view = new View3D()
view.scene = scene
view.camera = mainCamera
// start render
Engine3D.startRenderView(view)