threejs UV动画(偏移属性.offset) 学习笔记

js yekong

纹理对象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()
喜欢