前言

我们已经学过了CanvasTexture、VideoTexture等纹理贴图，本节我们来介绍数据纹理对象——DataTexture，它是一个特殊的纹理，我们能够使用原始数据去创建纹理效果。

DataTexure

DataTexture是利用像素化的数据创建的，该纹理对象可操控性强，我们可以利用该对象进行更多的操作，比如应用滤镜、创建图片等。在three中创建DataTexture需要数据源，这个数据源可以是ImageData或者Float32Array，具体的构造函数如下：

   DataTexture( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, colorSpace)
   // data--数据源
   // colorSpace--颜色空间。颜色空间用来描述颜色的方式，涉及到颜色的编码与解码。
   // 其他参数跟之前的纹理一样

除了texture公共属性方法，还有一些属性方法如下：

image：用来设置纹理的图像，如果有了数据源该属性就是为null。
isDataTexture：用来检测是否为DataTextrue对象。在某些时候可能需要我们去做个判断。
generateMipmaps：用来控制是否自动生成mipmap。mipmap是用来表述缩放级别的优化方法，纹理图像可以被缩小到不同的分辨率，数据存储类型为金字塔结构。

下面我们利用DataTexture创建一个图片的RGB值：

// 创建光源
const light = new THREE.SpotLight();
light.position.set(0, 0, 10);
light.angle = Math.PI / 4;
const geometry = new THREE.PlaneGeometry(12, 12); //矩形平面
const width = 3; 
const height = 3;
//像素大小
const size = width * height;
const data = new Uint8Array(size * 3);
//循环得到随机rgb的值
for (let i = 0; i < size * 3; i += 3) {
  data[i] = 255 * Math.random()
  data[i + 1] = 255 * Math.random()
  data[i + 2] = 255 * Math.random()
}
const texture = new THREE.DataTexture(data, width, height, THREE.RGBFormat);
texture.needsUpdate = true;
const material = new THREE.MeshPhongMaterial({
  map: texture, 
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube, light);

在上述代码中THREE.RGBFormat是表示RGB颜色空间的纹理格式，其中每个像素存储了3个8位字节，也就是24位。

总结

DataTexture是通过数据源生成纹理，能够方便我们去生成一些复杂的贴图，但它对于性能有更高的要求，因为要处理更多的数据。

three学习（二十五）—— DataTexture

前言

DataTexure

总结