Three.js 数据纹理对象 DataTexture - 文章教程

Three.js 数据纹理对象 DataTexture

发布于 2021-09-23 字数 2476 浏览 941 评论 0

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

灵芸

每个人心里都住着一个人,或眷念,或暗恋,或想念。

10 文章
3 评论
23170 人气
更多

推荐作者

qq_iQVWB

文章 0 评论 0

gyhjy

文章 0 评论 0

dianjvnan

文章 0 评论 0