当前位置: 首页 > news >正文

three.js 纹理(Texture)、深度纹理(DepthTexture)、视频纹理(VideoTexture)

纹理(Texture)

创建一个纹理贴图,将其应用到一个表面,或者作为反射/折射贴图。

构造函数

Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )

// load a texture, set wrap mode to repeat
const texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );

属性

.id : Integer

只读 - 表示该纹理实例的唯一数字。

.uuid : String

该对象实例的UUID。 这个值是自动分配的,因此不应当对其进行编辑。

.name : String

该对象的名称,可选,且无需唯一。默认值是一个空字符串。

.image : Image

一个图片对象,通常由TextureLoader.load方法创建。 该对象可以是被three.js所支持的任意图片(例如PNG、JPG、GIF、DDS)或视频(例如MP4、OGG/OGV)格式。

要使用视频来作为纹理贴图,你需要有一个正在播放的HTML5 Video元素来作为你纹理贴图的源图像, 并在视频播放时不断地更新这个纹理贴图。——VideoTexture 类会对此自动进行处理。

.mipmaps : Array

用户所给定的mipmap数组(可选)。

.mapping : number

图像将如何应用到物体(对象)上。默认值是THREE.UVMapping对象类型, 即UV坐标将被用于纹理映射。
请参阅texture constants(映射模式常量)来了解其他映射类型。

.wrapS : number

这个值定义了纹理贴图在水平方向上将如何包裹,在UV映射中对应于U
默认值是THREE.ClampToEdgeWrapping,即纹理边缘将被推到外部边缘的纹素。 其它的两个选项分别是THREE.RepeatWrapping和THREE.MirroredRepeatWrapping。 请参阅texture constants来了解详细信息。

.wrapT : number

这个值定义了纹理贴图在垂直方向上将如何包裹,在UV映射中对应于V
可以使用与.wrapS : number相同的选项。

请注意:纹理中图像的平铺,仅有当图像大小(以像素为单位)为2的幂(2、4、8、16、32、64、128、256、512、1024、2048、……)时才起作用。 宽度、高度无需相等,但每个维度的长度必须都是2的幂。 这是WebGL中的限制,不是由three.js所限制的。

.magFilter : number

当一个纹素覆盖大于一个像素时,贴图将如何采样。默认值为THREE.LinearFilter, 它将获取四个最接近的纹素,并在他们之间进行双线性插值。 另一个选项是THREE.NearestFilter,它将使用最接近的纹素的值。
请参阅texture constants页面来了解详细信息。

.minFilter : number

当一个纹素覆盖小于一个像素时,贴图将如何采样。默认值为THREE.LinearMipmapLinearFilter, 它将使用mipmapping以及三次线性滤镜。

请参阅texture constants页面来了解所有可能的选项。

.anisotropy : number

沿着轴,通过具有最高纹素密度的像素的样本数。 默认情况下,这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果,代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。

.format : number

默认值为THREE.RGBAFormat, 但TextureLoader将会在载入JPG图片时自动将这个值设置为THREE.RGBFormat。

请参阅texture constants页面来了解其它格式。

.internalFormat : String

The default value is obtained using a combination of .format and .type.
The GPU format allows the developer to specify how the data is going to be stored on the GPU.

See the texture constants page for details regarding all supported internal formats.

.type : number

这个值必须与.format相对应。默认值为THREE.UnsignedByteType, 它将会被用于绝大多数纹理格式。

请参阅texture constants来了解其它格式。

.offset : Vector2

How much a single repetition of the texture is offset from the beginning, in each direction U and V. Typical range is 0.0 to 1.0.

The below texture types share the first uv channel in the engine. The offset (and repeat) setting is evaluated according to the following priorities and then shared by those textures:

  1. color map
  2. specular map
  3. displacement map
  4. normal map
  5. bump map
  6. roughness map
  7. metalness map
  8. alpha map
  9. emissive map
  10. clearcoat map
  11. clearcoat normal map
  12. clearcoat roughnessMap map

The below texture types share the second uv channel in the engine. The offset (and repeat) setting is evaluated according to the following priorities and then shared by those textures:

  1. ao map
  2. light map

.repeat : Vector2

How many times the texture is repeated across the surface, in each direction U and V. If repeat is set greater than 1 in either direction, the corresponding Wrap parameter should also be set to THREE.RepeatWrapping or THREE.MirroredRepeatWrapping to achieve the desired tiling effect. Setting different repeat values for textures is restricted in the same way like .offset.

.rotation : number

纹理将围绕中心点旋转多少度,单位为弧度(rad)。正值为逆时针方向旋转,默认值为0

.center : Vector2

旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0),即左下角。

.matrixAutoUpdate : Boolean

是否从纹理的.offset、.repeat、.rotation和.center属性更新纹理的UV变换矩阵(uv-transform .matrix)。 默认值为true。 如果你要直接指定纹理的变换矩阵,请将其设为false。

.matrix : Matrix3

纹理的UV变换矩阵。 当纹理的.matrixAutoUpdate属性为true时, 由渲染器从纹理的.offset、.repeat、.rotation和.center属性中进行更新。 当.matrixAutoUpdate属性为false时,该矩阵可以被手动设置。 默认值为单位矩阵。

.generateMipmaps : Boolean

是否为纹理生成mipmap(如果可用)。默认为true。 如果你手动生成mipmap,请将其设为false。

.premultiplyAlpha : Boolean

If set to true, the alpha channel, if present, is multiplied into the color channels when the texture is uploaded to the GPU. Default is false.

Note that this property has no effect for ImageBitmap. You need to configure on bitmap creation instead. See ImageBitmapLoader.

.flipY : Boolean

If set to true, the texture is flipped along the vertical axis when uploaded to the GPU. Default is true.

Note that this property has no effect for ImageBitmap. You need to configure on bitmap creation instead. See ImageBitmapLoader.

.unpackAlignment : number

默认为4。指定内存中每个像素行起点的对齐要求。 允许的值为1(字节对齐)、2(行对齐到偶数字节)、4(字对齐)和8(行从双字边界开始)。 请参阅glPixelStorei来了解详细信息。

.encoding : number

默认值为THREE.LinearEncoding。 请参阅texture constants来了解其他格式的详细信息。

请注意,如果在材质被使用之后,纹理贴图中这个值发生了改变, 需要触发Material.needsUpdate,来使得这个值在着色器中实现。

.version : Integer

这个值起始值为0,计算.needsUpdate : Boolean被设置为true的次数。

.onUpdate : Function

一个回调函数,在纹理被更新后调用。 (例如,当needsUpdate被设为true且纹理被使用。)

.needsUpdate : Boolean

将其设置为true,以便在下次使用纹理时触发一次更新。 这对于设置包裹模式尤其重要。

方法

EventDispatcher方法在这个类上可以使用。

.updateMatrix () : null

从纹理的.offset、.repeat、 .rotation和.center属性来更新纹理的UV变换矩阵(uv-transform .matrix)。

.clone () : Texture

拷贝纹理。请注意。这不是“深拷贝”,图像是共用的。

.toJSON ( meta : Object ) : Object

meta -- 可选,包含有元数据的对象。
将Texture对象转换为 three.js JSON Object/Scene format(three.js JSON 物体/场景格式)。

.dispose () : null

使用“废置”事件类型调用EventDispatcher.dispatchEvent。

.transformUv ( uv : Vector2 ) : Vector2

基于纹理的.offset、.repeat、 .wrapS、.wrapT和.flipY属性值来变换uv。

深度纹理(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.UnsignedShortType when unsing 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(格式常量)来了解详细信息。

属性

共有属性请参见其基类Texture。 —— 以下属性也是texture类中的一部分,但在这里默认值不同。

.format

DepthFormat(默认值)或者DepthStencilFormat中的一个。 请参阅format constants来了解详细信息。

.type

Default is THREE.UnsignedShortType when unsing DepthFormat and THREE.UnsignedInt248Type when using DepthStencilFormat. 请参阅format constants来了解详细信息。

.magFilter

当一个纹素覆盖大于一个像素时,贴图将如何采样。 其默认值为THREE.NearestFilter。 请参阅magnification filter constants(放大滤镜常量)来了解其他选项。

.minFilter

当一个纹素覆盖小于一个像素时,贴图将如何采样。 其默认值为THREE.NearestFilter。 请参阅minification filter constants(缩小滤镜常量)来了解其他选项。

.flipY

深度贴图不需要被翻转,因此其默认值为false

.generateMipmaps

深度贴图不使用mipmap。

方法

共有方法请参见其基类Texture。

视频纹理(VideoTexture)

创建一个使用视频来作为贴图的纹理对象。

它和其基类Texture几乎是相同的,除了它总是将needsUpdate设置为true,以便使得贴图能够在视频播放时进行更新。自动创建mipmaps也会被禁用

// assuming you have created a HTML video element with id="video"
const video = document.getElementById( 'video' );
const texture = new THREE.VideoTexture( video );

构造函数

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.LinearMipmapLinearFilter。请参阅minification filter constants(缩小滤镜常量)来了解其它选项。
format -- 在纹理贴图中使用的格式。 请参阅format constants(格式常量)来了解各个选项。
type -- 默认值是THREE.UnsignedByteType. 请参阅type constants(类型常量)来了解其他选项。
anisotropy -- 沿着轴,通过具有最高纹素密度的像素的采样数。 默认情况下,这个值为1。设置一个较高的值将会比基本的mipmap产生更清晰的效果,代价是需要使用更多纹理样本。 使用renderer.getMaxAnisotropy() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。
 

属性

共有属性请参见其基类Texture。

.needsUpdate : Boolean

在这里,你不必手动设置这个值,因为它是由update方法来进行控制的。

方法

共有方法请参见其基类Texture。

.update () : null

在每一次新的一帧可用时,这个方法将被自动调用, 并将.needsUpdate : Boolean设置为true

相关文章:

three.js 纹理(Texture)、深度纹理(DepthTexture)、视频纹理(VideoTexture)

纹理(Texture) 创建一个纹理贴图,将其应用到一个表面,或者作为反射/折射贴图。 构造函数 Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding ) // load a texture, set wrap…...

广东自闭症全托机构:提供高质量的康复服务

在广东这片充满活力的土地上,自闭症儿童的康复需求日益受到社会各界的关注。在众多自闭症全托机构中,位于广州的星贝育园自闭症儿童寄宿制学校以其专业的团队、全面的服务体系以及显著的康复成效,成为了众多家庭的信赖之选。 星贝育园&#…...

Nodejs安装配置及创建vue项目

文章目录 Node简介Node官网安装node.js验证是否安装成功 npm简介配置node远程拉取仓库安装cnpm(国内插件管理命令)npm相关参数解读 vue简介创建vue项目 Node 简介 Node.js 是一个免费、开源、跨平台的 JavaScript 运行时环境,它让开发人员能…...

浅析正交投影矩阵和透视投影矩阵的推导

先上矩阵的内容。在opengl中,分别通过glOrtho函数和glFrustum函数得到正交投影矩阵和透视投影矩阵。 glOrtho 函数描述生成正交投影矩阵。 (左、 下、 近) 和 (右、 上、 近) 参数分别指定近剪裁平面上映射到窗口左下角和右上角的点,假定眼睛位于 (0、0…...

python四舍五入保留两位小数不足补0

在 Python 中,当你想要对数字进行四舍五入并保留两位小数,同时确保当小数位数不足两位时能够补零,你可以继续使用 round() 函数进行四舍五入,然后在格式化输出时使用字符串格式化方法来确保小数位数。 round() 函数本身只会返回四…...

Mybatis-15.动态SQL-if

一.动态SQL 比如只想查询名字中带‘张’的&#xff0c;其他的都不进行条件筛查 会发现什么也查询不出来 我们希望SQL语句能够根据我们所输入的查询值进行动态的变化&#xff0c;就需要使用到动态SQL。动态SQL中有很多标签&#xff0c;其中用于条件判断的就是标签<if>。…...

gb28181-sip注册流程

gb28181-sip注册流程 当客户端第一次接入时&#xff0c;客户端将持续向Server端发送REGISTER消息&#xff0c;直到Server端回复"200 OK"后结束 它的注册流程如下图&#xff1a; 注册流程&#xff1a; 1 . SIP代理向SIP服务器发送Register请求&#xff1a; 第1行表…...

WEBRTC教程:局域网怎么调试,http://172.19.18.101:8080 ,无法访问摄像头和麦克风,请检查权限

在局域网中使用 WebRTC 时&#xff0c;无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了 getUserMedia API 的使用。如果你在非 localhost 或非 HTTPS 环境下访问网页&#xff0c;浏览器会阻止访问摄像头和麦克风。 解决方案 在局域网中调试 WebRTC 时&#xff0c;你…...

Apache POI—读写Office格式文件

Apache POI 是一个开源的 Java 库&#xff0c;用于读写 Microsoft Office 格式的文件&#xff0c;主要包括 Excel、Word 和 PowerPoint 等文档。POI 对 Excel 文件的支持最为完善&#xff0c;通过 POI 可以方便地进行 Excel 文件的创建、编辑、读取等操作。 1. Apache POI 简介…...

3162. 优质数对的总数 I

3162. 优质数对的总数 I 题目链接&#xff1a;3162. 优质数对的总数 I 代码如下&#xff1a; class Solution { public:int numberOfPairs(vector<int>& nums1, vector<int>& nums2, int k){int res 0;for (int i 0; i < nums1.size(); i){for (int…...

(五)Web前端开发进阶2——AJAX

目录 2.Axios库 3.认识URL 4.Axios常用请求方法 5.HTTP协议——请求报文/响应报文 6.前后端分离开发 7.Element组件库 1.Ajax概述 AJAX 是异步的 JavaScript和XML(Asynchronous JavaScript And XML)。简单点说&#xff0c;就是使用XMLHttpRequest 对象与服务器通信。它可…...

数据结构(java)——数组的构建和插入

数组&#xff1a;地址连续&#xff0c;可以直接通过下标获取数组中的内容。&#xff08;下标从0开始&#xff09; 新建的数组都有默认值 //创建数组//Java是强类型 数组必须声明类型//以下是三种创建数组的方式 int[] arr {2,23,55,12,34,53};int[] brrnew int[5];int[] crrn…...

AI-CNN-验证码识别

1 需求 GitHub - xhh890921/cnn-captcha-pytorch: 小黑黑讲AI&#xff0c;AI实战项目《验证码识别》 2 接口 3 示例 config.json {"train_data_path": "./data/train-digit/","test_data_path": "./data/test-digit/","train_…...

React 前端框架全面教程:从入门到进阶

React 前端框架全面教程&#xff1a;从入门到进阶 引言 在现代前端开发中&#xff0c;React 作为一款流行的 JavaScript 库&#xff0c;以其组件化、声明式的特性和强大的生态系统&#xff0c;成为了开发者的首选。无论是构建单页应用&#xff08;SPA&#xff09;还是复杂的用…...

重拾CSS,前端样式精读-布局(弹性盒)

前言 本文收录于CSS系列文章中&#xff0c;欢迎阅读指正 接着上篇布局文章继续介绍当前流行的布局方式 Flexbox布局 长久以来&#xff0c;CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有floats和positioning。这两个工具大部分情况下都很好使&#xff0c;但是在某些方面它…...

Python 使用 LSTM 进行情感分析:处理文本序列数据的指南

使用 LSTM 进行情感分析&#xff1a;处理文本序列数据的指南 长短期记忆网络&#xff08;LSTM&#xff09;是一种适合处理序列数据的深度学习模型&#xff0c;广泛应用于情感分析、语音识别、文本生成等领域。它通过在训练过程中“记住”过去的数据特征来理解和预测序列数据的…...

MySQL:INSERT IGNORE 语句的用法

INSERT IGNORE 语句 在MySQL中&#xff0c;INSERT IGNORE 语句用于尝试向表中插入一行数据&#xff0c;但如果插入操作会导致表中唯一索引或主键的冲突&#xff0c;MySQL将忽略该操作并继续执行&#xff0c;而不会引发错误。这意味着&#xff0c;如果表中已经存在具有相同唯一…...

java模拟进程调度

先来先服务优先级调度短作业优先调度响应比优先调度 代码 import java.util.ArrayList; import java.util.Comparator; import java.util.List; import java.util.Scanner;class Main {static class tasks{int id;//序号char jinchengname;//进程名int jinchengId;//double a…...

大模型AI在教育领域有哪些创业机会?

大模型AI在教育领域有很多创业机会&#xff0c;尤其是在个性化学习、教学辅助、教育资源优化等方面。以下是一些潜在的创业机会&#xff1a; 个性化学习平台 学习路径定制&#xff1a;根据学生的学习数据与兴趣&#xff0c;为他们设计个性化的学习路径&#xff0c;提供适合的课…...

网页上视频没有提供下载权限怎么办?

以腾讯会议录屏没有提供下载权限为例&#xff0c;该怎么办呢&#xff1f; 最好的办法就是找到管理员&#xff0c;开启下载权限。如果找不到呢&#xff0c;那就用这个办法下载。 1.打开Microsoft Edge浏览器的扩展 2.搜索“视频下载”&#xff0c;选择“视频下载Pro” 3.点击“…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

使用LangGraph和LangSmith构建多智能体人工智能系统

现在&#xff0c;通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战&#xff0c;比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...