Shadermaterial that continues pattern throughout objects

Hi everyone, I am trying to get a grid (that is created with a shadermaterial) on 5 planes that form a small box. I want the grid to look like many squares.
Right now the problem is that the shadermaterial is stretching on these different planes so there are no squares anymore. I tried to group the planes, apply the material there and update the matrix but that was not working (I only have really basic shaderMaterial understanding)
Other than that I tried to work with aspect ratio but the box is not the same size on all devices the website is on.

const shaderMaterial = new THREE.ShaderMaterial({
vertexShader: `
uniform float aspectRatio;
varying vec2 vUv;

    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        vUv = uv;

        // Adjust the texture coordinates
      vec2 textureCoordinates = uv * vec2(aspectRatio, 1.0);
      // Pass the modified texture coordinates to the fragment shader
      vUv = textureCoordinates;
varying vec2 vUv;

void main() {
float strength = step(0.9,mod(vUv.x * 10.0, 1.0));
strength += step(0.9,mod(vUv.y * 10.0, 1.0));

gl_FragColor = vec4(strength, strength, strength, 1.0);

The aspect ratio approach should work, you need to pass the mesh’s width to height ratio into the shader:

  varying vec2 vuv;

  void main() {
    // mesh width / mesh height, calculate this in JS
    float aspect = 1.0 / 2.0;

    // make this a uniform and pass the value from JS
    vec2 grid = 10.0 * vec2(1.0, 1.0 / aspect);

    vec2 uv = grid * vuv;
    vec2 str = step(0.9, fract(uv));
    gl_FragColor = vec4(vec3(str.x + str.y), 1.0);


1 Like

Triplanar case

varying vec3 vPosition;
void main(){
varying vec3 vPosition;
void main(){
float x = step(0.9,mod(vPosition.z * 2.0, 1.0));
x += step(0.9,mod(vPosition.y * 2.0, 1.0));
float y = step(0.9,mod(vPosition.x * 2.0, 1.0));
y += step(0.9,mod(vPosition.z * 2.0, 1.0));
float z = step(0.9,mod(vPosition.x * 2.0, 1.0));
z += step(0.9,mod(vPosition.y * 2.0, 1.0));
gl_FragColor = vec4(vec3(x+y+z), 1.0);

I’m a bit late to the party, as usual :slight_smile:

You can create a custom box geometry of five planes, pass its size in a uniform and process the uniform in shaders. This is for the case, if you want to use uv coords and a box.


Thank you all for your fast replies, amazing:)
In the end I went with Chaser_Code’s approach as for me it was the one that goes best with my project.