Threejs纹理对象Texture阵列、偏移、旋转(纹理动画)

纹理对象Texture阵列、偏移、旋转

本文是Three.js电子书的8.4节

8.1节给大家提到过纹理对象Texture,简单的说纹理对象Texture就是包含一张图片的对象,纹理对象Texture搜包含的图片就是.image属性,除此外,纹理对象Texture还提供了一些实际开发中经常会用到的属性和方法。

阵列

纹理贴图阵列映射。

var texture = textureLoader.load('太阳能板.png');
// 设置阵列模式   默认ClampToEdgeWrapping  RepeatWrapping:阵列  镜像阵列:MirroredRepeatWrapping
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(4, 2);

偏移

不设置阵列纹理贴图,只设置偏移

var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('太阳能板2.png');// 加载纹理贴图
// 不设置重复  偏移范围-1~1
texture.offset = new THREE.Vector2(0.3, 0.1)

阵列纹理贴图的同时,进行偏移设置

// 设置阵列模式
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(4, 2);
// 偏移效果
texture.offset = new THREE.Vector2(0.5, 0.5)

纹理旋转

var texture = textureLoader.load('太阳能板.png'); // 加载纹理贴图
// 设置纹理旋转角度
texture.rotation = Math.PI/4;
// 设置纹理的旋转中心,默认(0,0)
texture.center.set(0.5,0.5);
console.log(texture.matrix);

案例:草地效果

提供一张宽高尺寸比较小的草地贴图,然后通过该贴图设置一片范围比较广的草地效果,这时候阵列贴图是比较好的选择。

/**
 * 创建一个地面
 */
var geometry = new THREE.PlaneGeometry(1000, 1000); //矩形平面
// 加载树纹理贴图
var texture = new THREE.TextureLoader().load("grass.jpg");
// 设置阵列
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
// uv两个方向纹理重复数量
texture.repeat.set(10, 10);
var material = new THREE.MeshLambertMaterial({
  map: texture,
});
var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
mesh.rotateX(-Math.PI / 2);

纹理动画

纹理动画比较简单,必须要在渲染函数中render()一直执行texture.offset.x -= 0.06动态改变纹理对象Texture的偏移属性.offset就可以。
在这里插入图片描述

// 渲染函数
function render() {
  renderer.render(scene, camera); //执行渲染操作
  requestAnimationFrame(render);
  // 使用加减法可以设置不同的运动方向
  // 设置纹理偏移
  texture.offset.x -= 0.06
}
render();
/**
 * 创建一个设置重复纹理的管道
 */
var curve = new THREE.CatmullRomCurve3([
  new THREE.Vector3(-80, -40, 0),
  new THREE.Vector3(-70, 40, 0),
  new THREE.Vector3(70, 40, 0),
  new THREE.Vector3(80, -40, 0)
]);
var tubeGeometry = new THREE.TubeGeometry(curve, 100, 0.6, 50, false);
var textureLoader = new THREE.TextureLoader();
var texture = textureLoader.load('run.jpg');
// 设置阵列模式为 RepeatWrapping
texture.wrapS = THREE.RepeatWrapping
texture.wrapT=THREE.RepeatWrapping
// 设置x方向的偏移(沿着管道路径方向),y方向默认1
//等价texture.repeat= new THREE.Vector2(20,1)
texture.repeat.x = 20;
var tubeMaterial = new THREE.MeshPhongMaterial({
  map: texture,
  transparent: true,
});

总结

Texture对象 webgl封装 属性 方法 重复、偏移、旋转等属性 旋转、平移改变matrix repeat:缩放矩阵 rotation:旋转矩阵 offset:平移矩阵 本质 默认不会改变faceVertexUvs .offset,.repeat, .rotation 纹理的matrix属性 uv.applyMatrix3( this.matrix ); 纹理方法transformUv Texture对象 Texture.js 渲染器解析Texture对象 gl.bindTexture gl.activeTexture WebGL纹理相关API封装 WebGLTextures.js

  • 5
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
对于Three.js中的纹理流动效果,可以通过多重纹理和过程纹理来实现。 多重纹理可以用于在一个对象上同时应用多个纹理,比如可以在一个球体上同时应用地图纹理和云层纹理。在Three.js中,可以使用THREE.MeshPhongMaterial来实现多重纹理。具体实现步骤如下: 1. 创建多个纹理对象,例如地图纹理和云层纹理。 ``` const mapTexture = new THREE.TextureLoader().load('map.jpg'); const cloudTexture = new THREE.TextureLoader().load('cloud.jpg'); ``` 2. 创建多重纹理材质对象,并将纹理对象添加到材质中。 ``` const material = new THREE.MeshPhongMaterial({ map: mapTexture, specularMap: cloudTexture, specular: new THREE.Color('grey'), shininess: 50 }); ``` 3. 创建对象,并将多重纹理材质对象添加到对象中。 ``` const sphere = new THREE.Mesh(new THREE.SphereGeometry(5, 32, 32), material); scene.add(sphere); ``` 过程纹理可以用于在运行时生成纹理,可以用于创建流动的水面、火焰等效果。在Three.js中,可以使用THREE.WebGLRenderTarget和THREE.ShaderMaterial来实现过程纹理。具体实现步骤如下: 1. 创建WebGLRenderTarget对象,用于生成渲染目标,并设置其宽度和高度。 ``` const renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight); ``` 2. 创建ShaderMaterial对象,并将renderTarget对象添加到uniforms中。 ``` const material = new THREE.ShaderMaterial({ uniforms: { texture: { value: renderTarget.texture } }, vertexShader: document.getElementById('vertexShader').textContent, fragmentShader: document.getElementById('fragmentShader').textContent }); ``` 3. 创建对象,并将ShaderMaterial对象添加到对象中。 ``` const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(50, 50), material); scene.add(plane); ``` 4. 在渲染时,先渲染到renderTarget上,然后将渲染结果应用到ShaderMaterial对象纹理中。 ``` renderer.setRenderTarget(renderTarget); renderer.render(scene, camera); renderer.setRenderTarget(null); ``` 其中,vertexShader和fragmentShader分别为顶点着色器和片元着色器代码。可以在ShaderMaterial对象中直接使用字符串,也可以将代码放置在HTML中,并通过document.getElementById()方法获取。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Threejs可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值