Rounded cube with checkerboard texture

Questions
1

Hey,

I just found this codepen which maps a checkerboard coloring on cells of a plane-geometry.

If I want to do same same but to an rounded-cube geometry… ?

Kinda goldfish here
B

2

Hi!
And how the desired result with a rounded cube has to look like?

3

@prisoner849

e62882949731baf18619e29e4d7b4924
e62882949731baf18619e29e4d7b49241106×1106 131 KB

Just the texture → not the stretching of the cube geometry

4

So what’s the question? :slight_smile:

Three.js has RoundedBoxGeometry https://cdn.skypack.dev/three@0.132.2/examples/jsm/geometries/RoundedBoxGeometry.js, that supports UVs.

Example: Edit fiddle - JSFiddle - Code Playground

изображение

5

@prisoner849 almost yes, but still, at some sides it is not alternating the chequer´s

checkerboard
checkerboard1920×1143 90.7 KB

I´d love to have it alternating it´s chequers on each side?

6

This is the best I could imagine for the UV based checkered pattern of a rounded box: Edit fiddle - JSFiddle - Code Playground

изображение
изображение569×604 7.13 KB 

let g = new RoundedBoxGeometry(5, 5, 5, 10, 1);
let m = new THREE.MeshBasicMaterial({
  onBeforeCompile: shader => {
  	shader.fragmentShader = `${shader.fragmentShader}`
    .replace(
    	`vec4 diffuseColor = vec4( diffuse, opacity );`,
      `
      	float chCount = 7.;
        float checker = (1. / chCount);
        float actualCheckers = 1. - checker;
        float halfChecker = checker * 0.5;
      	vec2 bUv = (vUv * actualCheckers) - halfChecker;
      	vec2 cUv = fract((bUv) * (chCount * 0.5)) - 0.5;
        float checkerVal = clamp(step(cUv.x * cUv.y, 0.), 0.5, 1.);
      	vec3 col = vec3(checkerVal);
      	vec4 diffuseColor = vec4( col, opacity );
      `
    );
  	console.log(shader.fragmentShader)
  }
});
m.defines = {"USE_UV":""};
let o = new THREE.Mesh(g, m);
scene.add(o);

chCount must be an odd number.

3 Likes
7

Really cool @prisoner849 - would this approach be able to use a custom texture as well?

8

If segmentation is odd, then yes :thinking: