three.js更改贴图位置和缩放

发表于2021-12-06更新于2022-06-29字数统计161阅读次数阅读次数

一个简单的DEMO展示了如何更改贴图的缩放位移和旋转，以及重复的方法

如果要手动调整UV映射，需要先关闭自动更新

1
texture.matrixAutoUpdate = false;

实现的效果

如果你不能在这里看到交互式的效果，请访问这里

关键代码

1
2
3
4
5
6
7
8
9
10
11
12
13
// 调整旋转平移缩放
box.material.map.matrix.setUvTransform( 
  uvTransform.offsetX, uvTransform.offsetY, 
  uvTransform.repeatX, uvTransform.repeatY, 
  uvTransform.rotation, 
  uvTransform.centerX, uvTransform.centerY 
);
box.material.map.needsUpdate = true; // 每次手动调整后设置为true
// 调整贴图重复
box.material.map.wrapS 
 = box.material.map.wrapT
 = (isRepeat?THREE.RepeatWrapping:THREE.ClampToEdgeWrapping)
box.material.map.needsUpdate = true; // 每次手动调整后设置为true