Three.js數據紋理對象DataTexture

Three.js數據紋理對象DataTexture

本文是Three.js電子書的8.10節

Three.js數據紋理對象DataTexture簡單地說就是通過程序創建紋理貼圖的每一個像素值。

程序生成一張圖片的RGB值

var geometry = new THREE.PlaneGeometry(128, 128); //矩形平面
/**
 * 創建紋理對象的像素數據
 */
var width = 32; //紋理寬度
var height = 32; //紋理高度
var size = width * height; //像素大小
var data = new Uint8Array(size * 3); //size*3：像素在緩衝區佔用空間
for (let i = 0; i < size * 3; i += 3) {
  // 隨機設置RGB分量的值
  data[i] = 255 * Math.random()
  data[i + 1] = 255 * Math.random()
  data[i + 2] = 255 * Math.random()
}
// 創建數據文理對象   RGB格式：THREE.RGBFormat
var texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
texture.needsUpdate = true; //紋理更新
//打印紋理對象的image屬性
// console.log(texture.image);

var material = new THREE.MeshPhongMaterial({
  map: texture, // 設置紋理貼圖
}); //材質對象Material
var mesh = new THREE.Mesh(geometry, material);

程序生成一張圖片的RGBA值

var geometry = new THREE.PlaneGeometry(128, 128); //矩形平面
/**
 * 創建紋理對象的像素數據
 */
var width = 32; //紋理寬度
var height = 32; //紋理高度
var size = width * height; //像素大小
var data = new Uint8Array(size * 4); //size*4：像素在緩衝區佔用空間
for (let i = 0; i < size * 4; i += 4) {
  // 隨機設置RGB分量的值
  data[i] = 255 * Math.random()
  data[i + 1] = 255 * Math.random()
  data[i + 2] = 255 * Math.random()
  // 設置透明度分量A
  data[i + 3] = 255 * 0.5
}
// 創建數據文理對象   RGBA格式：THREE.RGBAFormat
var texture = new THREE.DataTexture(data, width, height, THREE.RGBAFormat);
texture.needsUpdate = true; //紋理更新
//打印紋理對象的image屬性
console.log(texture.image);

var material = new THREE.MeshPhongMaterial({
  map: texture, // 設置紋理貼圖
  transparent:true,//允許透明設置
});
var mesh = new THREE.Mesh(geometry, material);

圖片格式

像素值包含RGB三個分量的圖片格式有.jpg、.BMP等格式，通過WebGL原生API加載解析這些類型格式的圖片需要設置gl.RGB，對於Threejs而言對WebGL進行封裝了，gl.RGB對應的設置是THREE.RGBFormat

像素值包含RGBA四個分量的圖片格式有.PNG等格式，通過WebGL原生API加載解析這些類型格式的圖片需要設置gl.RGBA，對於Threejs而言對WebGL進行封裝了，gl.RGBA對應的設置是THREE.RGBAFormat