纹理对象Texture的.offset 的功能是偏移贴图在Mesh上位置,本质上相当于修改了UV顶点坐标。
// 纹理U方向偏移
texture.offset.x += 0.5
// 纹理V方向偏移
texture.offset.y += 0.5
纹理对象.wrapS或.WrapT与.offset 组合使用
当通过offset设置了纹理映射偏移后,是否把wrapS或.wrapT 设置为重复映射模式 THREE. RepeatWrapping,两种情况的渲染效果差异。
多出的部分移到后面
纹理UV动画
纹理对象Texture的.offset的功能是偏移贴图在Mesh上位置。
var geometry = new THREE.PlaneGeometry(60, 60);
const loadTex = new THREE.TextureLoader();
const texture = loadTex.load('./转弯.png')
texture.wrapT = THREE.RepeatWrapping;
const material = new THREE.MeshLambertMaterial({
map: texture, //设管材质的颜色贴图:把图片作为mesh材质的贴图,
transparent: true
})
// 纹理U方向偏移
texture.offset.x += 0.1
// 纹理V方向偏移
texture.offset.y += 0.1
// 注意选择合适的阵列数量
const mesh = new THREE.Mesh(geometry, material)
//适当偏移,不与地面重合
mesh.position.y = 1
// 旋转矩形平面
mesh.rotateX(-Math.PI / 2)
export {mesh, texture}
function render() {
// model.rotation.y += 0.01
texture.offset.y += 0.001
renderer.render(scene, camera)
requestAnimationFrame(render)
// 请求再次执行函数render
}
render()