CODEWITHSUNDEEP
three.js
samanthaxpalmer
samanthaxpalmer

Reputation: 23

Three js texture offset not updating

I am currently trying to create a mesh that is colored using a datatexture, my initial coloring shows up just fine, but now my next goal is to offset the texture along the y axis. very similar to this example.

http://math.hws.edu/graphicsbook/demos/c5/textures.html

How I create my texture / mesh:

this.colorTexture = new DataTexture(colors, this.frameWidth, frameCount, RGBFormat, FloatType, UVMapping, RepeatWrapping, RepeatWrapping);

    const material = new MeshBasicMaterial({
        side: FrontSide,
        vertexColors: true,
        wireframe: false,
        map: this.colorTexture
    });
    
    this.mesh = new Mesh(geometry, material);

How I attempt to animate the texture using offset:

    this.mesh.material.map.offset.y -= 0.001;
    this.mesh.material.map.needsUpdate = true;
    this.mesh.material.needsUpdate = true;
    this.mesh.needsUpdate = true;

I have confirmed that the function I'm using to try to offset is being called during each animation frame, however the visualization itself is not animating or showing changes apart from the initial positioning of the colors I wrote to the texture. Any help is greatly appreciated :)

Upvotes: 2

Views: 1434

Answers (1)

Mugen87
Mugen87

Reputation: 31026

The uv transformation matrix of a texture is updated automatically as long as Texture.matrixAutoUpdate is set to true (which is also the default value). You can simply modulate Texture.offset. There is no need to set any needsUpdate flags (Mesh.needsUpdate does not exist anyway).

It's best if you strictly stick to the code from the webgl_materials_texture_rotation example. If this code does not work, please demonstrate the issue with a live example.

Upvotes: 2

Related Questions