所有基类继承texture 基础纹理
CanvasTexture 有两个属性
CanvasTexture( canvas : HTMLElement, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number ) canvas -- 将会被用于加载纹理贴图的Canvas元素。 mapping -- 纹理贴图将被如何应用（映射）到物体上，它是THREE.UVMapping中的对象类型。 请参阅mapping constants（映射模式常量）来了解其他选项。 wrapS -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 wrapT -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 magFilter -- 当一个纹素覆盖大于一个像素时，贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅magnification filter constants（放大滤镜常量）来了解其它选项。 minFilter -- 当一个纹素覆盖小于一个像素时，贴图将如何采样。 其默认值为THREE.LinearMipmapLinearFilter。请参阅minification filter constants（缩小滤镜常量）来了解其它选项。 format -- 在纹理贴图中使用的格式。 请参阅format constants（格式常量）来了解各个选项。 type -- 默认值是THREE.UnsignedByteType. 请参阅type constants（类型常量）来了解其他选项。 anisotropy -- 沿着轴，通过具有最高纹素密度的像素的样本数。 默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。
// 创建 canvas 元素
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 256;
canvas.height = 256;
// 在 canvas 上绘制内容
context.fillStyle = 'blue';
context.fillRect(0, 0, canvas.width, canvas.height);
// 创建 CanvasTexture
const texture = new THREE.CanvasTexture(canvas);
// 将纹理应用到材质
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建网格并添加到场景
const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
属性
- isCanvasTexture : Boolean 判断是canvas纹理
- needsUpdate : Boolean 默认值为true，这是必须的，以便使得Canvas中的数据能够载入。
CompressedTexture 压缩的纹理 有三个属性
CompressedTexture( mipmaps : Array, width : Number, height : Number, format : Constant, type : Constant, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, anisotropy : Number, , colorSpace : Constant ) mipmaps -- mipmaps数组中需要包含具有数据、宽、高的对象。mipmaps应当具有正确的格式与类型。 width -- 最大的mipmap的宽。 height -- 最大的mipmap的高。 format -- 在mipmaps中使用的格式。 请参阅ST3C Compressed Texture Formats、 PVRTC Compressed Texture Formats和 ETC Compressed Texture Format页面来了解其它选项。 type -- 默认值是THREE.UnsignedByteType。 请参阅type constants页面来了解其它选项。 mapping -- 纹理贴图将被如何应用（映射）到物体上，它是THREE.UVMapping中的对象类型。 请参阅mapping constants（映射模式常量）来了解其他选项。 wrapS -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 wrapT -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 magFilter -- 当一个纹素覆盖大于一个像素时，贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅magnification filter constants（放大滤镜常量）来了解其它选项。 minFilter -- 当一个纹素覆盖小于一个像素时，贴图将如何采样。 其默认值为THREE.LinearMipmapLinearFilter。请参阅minification filter constants（缩小滤镜常量）来了解其它选项。 anisotropy -- 沿着轴，通过具有最高纹素密度的像素的样本数。 默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。 colorSpace -- 默认值为 THREE.NoColorSpace。有关其他选择，请参阅颜色空间常数。
// 假设我们有一组已压缩的 mipmaps 数据
const mipmaps = [
{ data: new Uint8Array([/* 压缩纹理的原始数据 */]), width: 256, height: 256 },
{ data: new Uint8Array([/* 压缩纹理的原始数据 */]), width: 128, height: 128 },
{ data: new Uint8Array([/* 压缩纹理的原始数据 */]), width: 64, height: 64 },
{ data: new Uint8Array([/* 压缩纹理的原始数据 */]), width: 32, height: 32 },
{ data: new Uint8Array([/* 压缩纹理的原始数据 */]), width: 16, height: 16 },
{ data: new Uint8Array([/* 压缩纹理的原始数据 */]), width: 8, height: 8 },
];
// 创建一个 CompressedTexture 实例
const texture = new THREE.CompressedTexture(
mipmaps, // mipmaps 数据
256, // 基础纹理的宽度
256, // 基础纹理的高度
THREE.RGBA_S3TC_DXT1_Format, // 压缩格式，例如 DXT1
THREE.LinearFilter // 纹理过滤器
);
// 设置纹理属性
texture.needsUpdate = true;
// 创建材质并应用 CompressedTexture
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建几何体并将材质应用到几何体上
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
属性
- flipY : Boolean 默认值为false。翻转纹理在压缩的纹理贴图中无法工作。
- generateMipmaps : Boolean 默认值为false。无法为压缩的纹理贴图生成Mipmap。
- isCompressedTexture : Boolean 用于检查给定对象是否属于 CompressedTexture 类型的只读标志。
CompressedArrayTexture 有两属性
CompressedArrayTexture( mipmaps : Array, width : Number, height : Number, format : Constant, type : Constant ) mipmaps -- mipmaps数组应包含具有数据、宽度和高度的对象。mipmap 应具有正确的格式和类型。 width -- 最大 mipmap 的宽度 height -- 最大 mipmap 的高度 depth -- 二维阵列纹理的层数。 format -- mipmap 中使用的格式。 有关其他选择，请参阅ST3C Compressed Texture Formats 、 PVRTC Compressed Texture Formats和ETC Compressed Texture Format。 type -- 默认值为THREE.UnsignedByteType。 有关其他选择，请参阅type constants。
// 模拟压缩纹理数据（实际数据应通过工具生成）
const mipmapLevel0Data = new Uint8Array([ /* DXT1 数据 */ ]);
const mipmapLevel1Data = new Uint8Array([ /* DXT1 数据 */ ]);
const mipmapLevel2Data = new Uint8Array([ /* DXT1 数据 */ ]);
// 创建 mipmap 数据数组
const mipmapsArray = [
[
{ data: mipmapLevel0Data, width: 128, height: 128 },
{ data: mipmapLevel1Data, width: 64, height: 64 },
{ data: mipmapLevel2Data, width: 32, height: 32 },
]
];
// 创建 CompressedArrayTexture
const compressedTexture = new THREE.CompressedArrayTexture(
mipmapsArray, // mipmap 数据
128, // 最大 mipmap 宽度
128, // 最大 mipmap 高度
1, // 图层数量
THREE.RGBA_S3TC_DXT1_Format // 压缩格式
);
// 创建材质并应用纹理
const material = new THREE.MeshBasicMaterial({ map: compressedTexture });
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
属性
- wrapR : number 这定义了纹理在深度方向上的包裹方式。 默认值为THREE.ClampToEdgeWrapping，其中边缘被紧贴到外边缘纹素上。 另外两个选择是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 有关详细信息，请参阅texture constants页面。
- isCompressedArrayTexture : Boolean 只读标志，用于检查给定对象是否为CompressedArrayTexture类型。
CubeTexture 立方纹理 有两个属性
CubeTexture( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, colorSpace ) CubeTexture（立方贴图）的功能以及用法几乎和Texture是相同的。区别在于，CubeTexture中的图像是6个单独的图像所组成的数组， 纹理映射选项为THREE.CubeReflectionMapping（默认值）或THREE.CubeRefractionMapping。
// 创建一个立方体纹理
const size = 256; // 纹理的大小
const data = new Float32Array(size * size * 3 * 6); // 6个面，每个面size x size的RGB数据
// 填充每个面的颜色
const colors = [
[1, 0, 0], // +X 红色
[0, 1, 0], // -X 绿色
[0, 0, 1], // +Y 蓝色
[1, 1, 0], // -Y 黄色
[1, 0, 1], // +Z 品红色
[0, 1, 1] // -Z 青色
];
// 将颜色数据填充到 Float32Array 中
for (let face = 0; face < 6; face++) {
for (let i = 0; i < size; i++) {
for (let j = 0; j < size; j++) {
const index = (face * size * size + i * size + j) * 3;
data[index] = colors[face][0]; // R
data[index + 1] = colors[face][1]; // G
data[index + 2] = colors[face][2]; // B
}
}
}
// 创建 CubeTexture
const cubeTexture = new THREE.DataTexture(data, size, size, THREE.RGBFormat);
cubeTexture.needsUpdate = true; // 告诉 Three.js 更新纹理
// 创建一个立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({
color: 0xffffff,
envMap: cubeTexture // 使用 CubeTexture 作为环境贴图
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
属性
- flipY : Boolean 如果设置为 true，纹理上传到 GPU 时会沿垂直轴翻转。默认为 false。
- isCubeTexture : Boolean 用于检查给定对象是否属于 CubeTexture 类型的只读标志。
Data3DTexture 有一个属性
Data3DTexture( data : TypedArray, width : Number, height : Number, depth : Number ) data -- 纹理的数据。 width -- 纹理的宽度。 height -- 纹理的高度。 depth -- 纹理的深度。
// 创建三维纹理数据
const textureWidth = 16; // 纹理的宽度
const textureHeight = 16; // 纹理的高度
const depth = 16; // 纹理的深度
const data = new Float32Array(textureWidth * textureHeight * depth * 3); // 3个通道（RGB）
// 填充纹理数据为渐变
for (let z = 0; z < depth; z++) {
for (let y = 0; y < textureHeight; y++) {
for (let x = 0; x < textureWidth; x++) {
const index = (z * textureHeight * textureWidth + y * textureWidth + x) * 3;
// 生成渐变效果
const r = 1.0; // R通道
const g = 1.0; // G通道
const b = 1.0; // B通道
data[index] = r; // R通道
data[index + 1] = g; // G通道
data[index + 2] = b; // B通道
}
}
}
// 创建 Data3DTexture
const texture = new THREE.Data3DTexture(data, textureWidth, textureHeight, depth);
texture.needsUpdate = true; // 告诉 Three.js 更新纹理
// 创建一个立方体并使用三维纹理
const geometry = new THREE.BoxGeometry(10, 10, 10);
const material = new THREE.MeshBasicMaterial({
color: 0xff0000,
map: texture // 使用三维纹理
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
属性
- wrapR : number 在 Three.js 中，wrapR 属性用于定义三维纹理的 R 轴（深度方向）的包装模式。这对于 Data3DTexture 和其他三维纹理类型非常重要，尤其是在纹理被用于立方体或体积效果时。使用
texture.wrapR = THREE.RepeatWrapping;来设置 R 轴的包装模式为重复。
`THREE.RepeatWrapping`: 纹理会在 R 轴上重复。
`THREE.ClampToEdgeWrapping`: 纹理会在 R 轴上被限制到纹理的边缘，超出部分使用边缘颜色。
`THREE.MirroredRepeatWrapping`: 纹理会在 R 轴上镜像重复。
DataArrayTexture 有八个属性
DataArrayTexture( data, width, height, depth ) data参数必须是ArrayBufferView。 默认继承自Texture的属性，除了magFilter和minFilter默认为THREE.NearestFilter。 属性flipY和generateMipmaps最初设置为false。 数据的解释取决于类型和格式：如果类型是THREE.UnsignedByteType，则Uint8Array可用于寻址纹素数据。 如果格式为THREE.RGBAFormat，则数据需要为一个纹素提供四个值；红色、绿色、蓝色和Alpha（通常是不透明度）。 对于打包类型，THREE.UnsignedShort4444Type和THREE.UnsignedShort5551Type，一个纹素的所有颜色分量都可以作为Uint16Array的整数元素中的位域进行寻址。 为了使用THREE.FloatType和THREE.HalfFloatType类型，WebGL实现必须支持相应的扩展OES_texture_float和OES_texture_half_float。 为了将THREE.LinearFilter用于基于这些类型的纹素的分量双线性插值，还必须存在WebGL扩展OES_texture_float_linear或OES_texture_half_float_linear。
// 创建纹理的宽度和高度
const textureWidth = 256; // 纹理的宽度
const textureHeight = 256; // 纹理的高度
// 创建一个 Uint8Array 类型的数组来存储纹理数据
const data = new Uint8Array(textureWidth * textureHeight * 3); // 3个通道（RGB）
// 填充纹理数据为渐变
for (let y = 0; y < textureHeight; y++) {
for (let x = 0; x < textureWidth; x++) {
const index = (y * textureWidth + x) * 3;
const r = (x / (textureWidth - 1)) * 255; // R通道
const g = (y / (textureHeight - 1)) * 255; // G通道
const b = 128; // B通道固定为128
data[index] = r; // 设置R通道
data[index + 1] = g; // 设置G通道
data[index + 2] = b; // 设置B通道
}
}
// 创建 DataArrayTexture
const texture = new THREE.DataArrayTexture(data, textureWidth, textureHeight);
texture.needsUpdate = true; // 告诉 Three.js 更新纹理
// 创建一个平面几何体并使用纹理
const geometry = new THREE.PlaneGeometry(2, 2);
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
属性
- flipY : Boolean 纹理上传到GPU时是否沿Y轴翻转。默认为false。
- generateMipmaps : Boolean 是否为纹理生成mipmap（如果可能）。默认为false。
- image : Object 被包含数据、宽度、高度和深度的对象覆盖。
- isDataArrayTexture : Boolean 只读标志，用于检查给定对象是否属于DataArrayTexture类型。
- magFilter : number 当纹素覆盖多个像素时如何对纹理进行采样。默认值为THREE.NearestFilter，它使用最近的纹理元素的值。
- minFilter : number 当纹素覆盖少于一个像素时如何对纹理进行采样。默认值为THREE.NearestFilter，它使用最近的纹理元素的值。
DataTexture 有五个属性
DataTexture( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy, colorSpace )
data: TypedArray（如 Uint8Array, Float32Array 等） 纹理数据，通常为一个类型化数组，包含每个像素的颜色信息。
width: number 纹理的宽度（以像素为单位）。
height: number 纹理的高度（以像素为单位）。
format: number (可选) 纹理的格式（如 THREE.RGBAFormat、THREE.RGBFormat、THREE.LuminanceFormat 等）。默认值为 THREE.RGBAFormat。
type: number (可选) 数据类型（如 THREE.UnsignedByteType、THREE.FloatType 等）。默认值为 THREE.UnsignedByteType。
mapping: number (可选) 纹理的映射方式，默认使用 THREE.UVMapping。
wrapS: number (可选) 水平方向的纹理包裹模式（如 THREE.RepeatWrapping、THREE.ClampToEdgeWrapping 等）。默认值为 THREE.ClampToEdgeWrapping。
wrapT: number (可选) 垂直方向的纹理包裹模式，默认值为 THREE.ClampToEdgeWrapping。
magFilter: number (可选) 纹理的放大过滤模式（如 THREE.NearestFilter、THREE.LinearFilter 等）。默认值为 THREE.LinearFilter。
minFilter: number (可选) 纹理的缩小过滤模式，默认值为 THREE.LinearMipMapLinearFilter。
anisotropy: number (可选) 纹理的各向异性过滤等级。默认值为 1。
colorSpace: number (可选) 颜色空间，通常为 THREE.SRGBColorSpace 或 THREE.LinearColorSpace。
// 创建纹理的宽度和高度
const textureWidth = 256; // 纹理的宽度
const textureHeight = 256; // 纹理的高度
// 创建一个 Uint8Array 类型的数组来存储纹理数据
const data = new Uint8Array(textureWidth * textureHeight * 3); // 3个通道（RGB）
// 填充纹理数据为渐变
for (let y = 0; y < textureHeight; y++) {
for (let x = 0; x < textureWidth; x++) {
const index = (y * textureWidth + x) * 3;
data[index] = Math.floor((x / (textureWidth - 1)) * 255); // R通道
data[index + 1] = Math.floor((y / (textureHeight - 1)) * 255); // G通道
data[index + 2] = 128; // B通道固定为128
}
}
// 创建 DataTexture
const texture = new THREE.DataTexture(data, textureWidth, textureHeight, THREE.RGBFormat);
texture.needsUpdate = true; // 告诉 Three.js 更新纹理
// 设置 unpackAlignment
texture.unpackAlignment = 1; // 设置为 1，表示没有对齐
// 创建一个平面几何体并使用纹理
const geometry = new THREE.PlaneGeometry(2, 2);
const material = new THREE.MeshBasicMaterial({ map: texture });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
// 添加光源
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);
- flipY : Boolean 如果设置为 true，纹理上传到 GPU 时会沿垂直轴翻转。默认为 false。
- generateMipmaps : Boolean 是否为纹理生成 mipmap（如果可能）。默认为假。
- image : Object 用保存数据、宽度和高度的记录类型覆盖。
- isDataTexture : Boolean 判断是数据纹理
- unpackAlignment : number 默认为 1。指定内存中每个像素行开头的对齐要求。允许的值为 1（字节对齐）、2（行与偶数字节对齐）、4（字对齐）和 8（行从双字边界开始）。有关详细信息，请参阅 glPixelStorei。
DepthTexture 有七个属性
DepthTexture( width : Number, height : Number, type : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, anisotropy : Number, format : Constant ) width -- 纹理的宽度。 height -- 纹理的高度。 type -- Default is THREE.UnsignedIntType when using DepthFormat and THREE.UnsignedInt248Type when using DepthStencilFormat. 请参阅type constants（类型常量）来了解其他选项。 mapping -- 请参阅mapping mode constants（映射模式常量）来了解其他选项。 wrapS -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 wrapT -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 magFilter -- 当一个纹素覆盖大于一个像素时，贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅magnification filter constants（放大滤镜常量）来了解其它选项。 minFilter -- 当一个纹素覆盖小于一个像素时，贴图将如何采样。 其默认值为THREE.LinearMipMapLinearFilter。请参阅minification filter constants（缩小滤镜常量）来了解其它选项。 anisotropy -- 沿着轴，通过具有最高纹素密度的像素的样本数。 默认情况下，这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果，代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。 format -- 这个值必须是DepthFormat（默认值）或者DepthStencilFormat。 请参阅format constants（格式常量）来了解详细信息。
// 创建深度纹理
const depthTexture = new THREE.DepthTexture(512, 512); // 创建一个 512x512 的深度纹理
// 将深度纹理设置到渲染目标中
const renderTarget = new THREE.WebGLRenderTarget(512, 512, {
depthTexture: depthTexture // 绑定深度纹理
});
// 创建平面几何体
const geometry = new THREE.PlaneGeometry(5, 5);
const material = new THREE.MeshBasicMaterial({ color: 0xffffff });
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);
// 创建一个立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.y = 1; // 将立方体抬高
scene.add(cube);
camera.position.z = 5;
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 渲染循环
function animate() {
requestAnimationFrame(animate);
controls.update();
// 渲染到 renderTarget
renderer.setRenderTarget(renderTarget);
renderer.clear();
renderer.render(scene, camera);
// 还原到默认渲染目标
renderer.setRenderTarget(null);
renderer.clear();
// 在屏幕上显示深度纹理（使用深度材质）
const depthMaterial = new THREE.MeshBasicMaterial({ depthTest: false });
const depthPlane = new THREE.Mesh(geometry, depthMaterial);
depthPlane.material.map = depthTexture;
scene.add(depthPlane);
// 最后渲染场景
renderer.render(scene, camera);
}
animate();
属性
- format DepthFormat（默认值）或者DepthStencilFormat中的一个。
- type 使用 DepthFormat 时默认值为 THREE.UnsignedIntType，使用 DepthStencilFormat 时默认值为 THREE.UnsignedInt248Type。
- magFilter 当一个纹素覆盖大于一个像素时，贴图将如何采样。 其默认值为THREE.NearestFilter。 请参阅magnification filter constants（放大滤镜常量）来了解其他选项。
- minFilter 当一个纹素覆盖小于一个像素时，贴图将如何采样。 其默认值为THREE.NearestFilter。 请参阅minification filter constants（缩小滤镜常量）来了解其他选项。
- flipY 深度贴图不需要被翻转，因此其默认值为false。
- generateMipmaps 深度贴图不使用mipmap。
- isDepthTexture : Boolean 判断是深度纹理
FramebufferTexture 帧缓冲纹理 有五个属性
FramebufferTexture( width : Number, height : Number ) width -- 纹理的宽度 height -- 纹理的高度
// 创建一个 WebGLRenderTarget
const renderTarget = new THREE.WebGLRenderTarget(512, 512);
const framebufferTexture = new THREE.FramebufferTexture(512, 512);
// 创建一个立方体并将其添加到场景
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
// 设置渲染目标
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
// 复制帧缓冲内容到 framebufferTexture
renderer.copyFramebufferToTexture(new THREE.Vector2(0, 0), framebufferTexture);
// 重置渲染目标
renderer.setRenderTarget(null);
// 使用 framebufferTexture 在场景中创建一个平面
const planeGeometry = new THREE.PlaneGeometry(2, 2);
const planeMaterial = new THREE.MeshBasicMaterial({ map: framebufferTexture });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
属性
- generateMipmaps : Boolean 是否为 FramebufferTexture 生成 mipmaps ，默认为false
- isFramebufferTexture : Boolean 只读，检查给定对象是否为 FramebufferTexture 类型
- magFilter : number 纹理元素覆盖多个像素时如何对纹理进行采样。默认值为 THREE.NearestFilter ，它使用最接近的纹理元素。
- minFilter : number 纹理元素覆盖少于一个像素时如何对纹理进行采样。默认值为 THREE.NearestFilter ，它使用最近的纹理元素。
Source 有六个属性一个方法
Source( data : Any ) data --纹理的数据定义。默认为空。
// 创建图像元素并预加载图像
const image = new Image();
image.src = imgPng; // 替换为您的图像路径
image.onload = () => {
// 创建 Source 对象
const textureSource = new THREE.Source(image); // 使用图像作为 Source 数据
// 创建纹理
const texture = new THREE.Texture();
texture.image = textureSource.data; // 将 Source 数据设置为纹理的图像
texture.needsUpdate = true; // 确保纹理更新
// 创建材料并应用纹理
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建立方体几何体
const geometry = new THREE.BoxGeometry(10, 10, 10);
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
};
属性
- data : Any 纹理的实际数据。此属性的类型取决于使用此实例的纹理。
- isCubeTexture : Boolean 判断是立方纹理
- needsUpdate : Boolean 为 true 时需要更新纹理
- dataReady : Boolean
- uuid : String 唯一ID
- version : Integer 它从 0 开始，计算 .needsUpdate 设置为 true 的次数。
方法
- toJSON ( meta : Object ) : Object meta——包含元数据的可选对象。 将数据源转换为 Three.js JSON 对象/场景格式。
VideoTexture 视频纹理 有三个属性一个方法
VideoTexture( video : Video, mapping : Constant, wrapS : Constant, wrapT : Constant, magFilter : Constant, minFilter : Constant, format : Constant, type : Constant, anisotropy : Number ) video -- 将被作为纹理贴图来使用的Video元素。 mapping -- 纹理贴图将被如何应用（映射）到物体上，它是THREE.UVMapping中的对象类型。 请参阅mapping constants（映射模式常量）来了解其他选项。 wrapS -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 wrapT -- 默认值是THREE.ClampToEdgeWrapping. 请参阅wrap mode constants（包裹模式常量）来了解其他选项。 magFilter -- 当一个纹素覆盖大于一个像素时，贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅magnification filter constants（放大滤镜常量）来了解其它选项。 minFilter -- 当一个纹素覆盖小于一个像素时，贴图将如何采样。 其默认值为THREE.LinearFilter。请参阅minification filter constants（缩小滤镜常量）来了解其它选项。 format -- The default is THREE.RGBAFormat. 请参阅format constants（格式常量）来了解各个选项。 type -- 默认值是THREE.UnsignedByteType. 请参阅type constants（类型常量）来了解其他选项。 anisotropy -- 沿着轴，通过具有最高纹素密度的像素的采样数。 默认情况下，这个值为1。设置一个较高的值将会比基本的mipmap产生更清晰的效果，代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值；这个值通常是2的幂。
属性
- generateMipmaps : Boolean 是否生成 mipmap。默认为 false。
- isVideoTexture : Boolean 判断是视频纹理
- needsUpdate : Boolean 为 true 时需要更新纹理 方法
- update () : undefined 在每一次新的一帧可用时，这个方法将被自动调用， 并将 .needsUpdate : Boolean设置为true。
