Creating a Checkerboard Plane using Three.js

Question

Creating a Checkerboard Plane using Three.js

I am currently working on a Three.js project for a webpage 3D example where I want to create a checkerboard. The issue I am facing is that my code assigns three colors, but I only need two colors (black and white). How can I adjust the mathematical calculations to generate the correct checkerboard pattern?

// Creating geometry for the checkerboard
var cbgeometry = new THREE.PlaneGeometry( 500, 500, 8, 8 );

// Defining materials for the board
var cbmaterials = []; 

cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide }) );
cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide }) );
cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide }) );

// Assigning material based on the color index
var l = cbgeometry.faces.length / 2;

for( var i = 0; i < l; i ++ ) {
    var j = 2 * i;
    cbgeometry.faces[ j ].materialIndex = i % 3;
    cbgeometry.faces[ j + 1 ].materialIndex = i % 3;
}

// Creating the mesh with the defined materials
var cb = new THREE.Mesh( cbgeometry, new THREE.MeshFaceMaterial( cbmaterials ) );
scene.add( cb );

javascript three.js geometry plane

Answer 1

Answer №1

UPDATE:

If our development environments differ, I propose the following code correction:

UPDATE-2:

Instead of 'j's in the index selection part, use 'i's as shown below.

Give this a try:

// Geometry
var cbgeometry = new THREE.PlaneGeometry( 500, 500, 8, 8 );

// Materials
var cbmaterials = []; 

cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide }) );
cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide }) );

var l = cbgeometry.faces.length / 2; // <-- This should remain 8x8 (64)

console.log("This should be 64: " + l);// Double-check if this is 64

for( var i = 0; i < l; i ++ ) {
    j = i * 2; // <-- Reintroduced to handle every other 'face'
    cbgeometry.faces[ j ].materialIndex = ((i + Math.floor(i/8)) % 2); // Replace all 'i's with 'j's here. KEEP THE 8
    cbgeometry.faces[ j + 1 ].materialIndex = ((i + Math.floor(i/8)) % 2); // Include this line too for the other half of each face
}

// Mesh
cb = new THREE.Mesh( cbgeometry, new THREE.MeshFaceMaterial( cbmaterials ) );
scene.add( cb );

The changes made are documented within the code.

I introduced Math.floor(i/8) into the material index to alternate layers. Without it, only vertical lines would appear.

Furthermore, I eliminated the 3rd material, leaving only white and black options.

Thank you for posing this question; it was enjoyable to work through!

Answer 2

UPDATE:

If our development environments differ, I propose the following code correction:

UPDATE-2:

Instead of 'j's in the index selection part, use 'i's as shown below.

Give this a try:

// Geometry
var cbgeometry = new THREE.PlaneGeometry( 500, 500, 8, 8 );

// Materials
var cbmaterials = []; 

cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide }) );
cbmaterials.push( new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide }) );

var l = cbgeometry.faces.length / 2; // <-- This should remain 8x8 (64)

console.log("This should be 64: " + l);// Double-check if this is 64

for( var i = 0; i < l; i ++ ) {
    j = i * 2; // <-- Reintroduced to handle every other 'face'
    cbgeometry.faces[ j ].materialIndex = ((i + Math.floor(i/8)) % 2); // Replace all 'i's with 'j's here. KEEP THE 8
    cbgeometry.faces[ j + 1 ].materialIndex = ((i + Math.floor(i/8)) % 2); // Include this line too for the other half of each face
}

// Mesh
cb = new THREE.Mesh( cbgeometry, new THREE.MeshFaceMaterial( cbmaterials ) );
scene.add( cb );

The changes made are documented within the code.

I introduced Math.floor(i/8) into the material index to alternate layers. Without it, only vertical lines would appear.

Furthermore, I eliminated the 3rd material, leaving only white and black options.

Thank you for posing this question; it was enjoyable to work through!

Answer 3

Answer №2

How about using a THREE.ShaderMaterial() for this effect?

Your vertex shader could look something like this,

varying vec2 vUv;
void main(){
vUv = uv;
gl_FragPosition = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

For the fragment shader, you can try something similar to this code snippet:

varying vec2 vUv;
void main(){
vec2 tileUV = vec2(500.0, 500.0);// For repeating the texture 500 times in both directions
vec2 repeatedUV = vUv * tileUV ;
repeatedUV -=floor(repeatedUV);

The repeatedUV variable now contains tiled textures within the 0-1 range that repeat.

repeatedUV.x = floor(repeatedUV.x * 2.0);// This will create black or white stripes in the U direction
repeatedUV.y = floor(repeatedUV.y * 2.0);// Same for the other direction

This process is akin to boolean algebra with textures.

float finalMask = repeatedUV.x + repeatedUV.y;// Bottom left: 0, bottom right: 1, top left: 1, top right: 2
finalMask *= 1.0 - repeatedUV.x*repeatedUV.y; // All zeroes except for the top right
gl_FragColor = vec4(vec3(finalMask), 1.0);

}

This may not be the most efficient way, but it avoids creating thousands of triangles. It's a procedurally generated solution.

Answer 4

How about using a THREE.ShaderMaterial() for this effect?

Your vertex shader could look something like this,

varying vec2 vUv;
void main(){
vUv = uv;
gl_FragPosition = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

For the fragment shader, you can try something similar to this code snippet:

varying vec2 vUv;
void main(){
vec2 tileUV = vec2(500.0, 500.0);// For repeating the texture 500 times in both directions
vec2 repeatedUV = vUv * tileUV ;
repeatedUV -=floor(repeatedUV);

The repeatedUV variable now contains tiled textures within the 0-1 range that repeat.

repeatedUV.x = floor(repeatedUV.x * 2.0);// This will create black or white stripes in the U direction
repeatedUV.y = floor(repeatedUV.y * 2.0);// Same for the other direction

This process is akin to boolean algebra with textures.

float finalMask = repeatedUV.x + repeatedUV.y;// Bottom left: 0, bottom right: 1, top left: 1, top right: 2
finalMask *= 1.0 - repeatedUV.x*repeatedUV.y; // All zeroes except for the top right
gl_FragColor = vec4(vec3(finalMask), 1.0);

}

This may not be the most efficient way, but it avoids creating thousands of triangles. It's a procedurally generated solution.

Creating a Checkerboard Plane using Three.js

Answer №1

Answer №2

Similar questions

Background of jQuery-UI Slider

Error message encountered in React Material-UI while attempting to run the basic Hello World test - Invalid hook call

What is the best way to trigger a new css animation on an element that is already in the midst of

JQuery for personalized path animations

Updating HTML content with Node JS using MYSQL data

Discovering the method to access query parameters in a node.js module

Is it possible to maintain the data types of each individual piece of data when it's divided into an array in

Troubleshooting issue with error handling in graphql mutation hook with react and apollo is not resolving

There seems to be an issue with posting JSON data correctly

What's the most effective method for updating the title of the date header on MUI Date Picker?

Are you harnessing the power of Ant Design's carousel next and previous pane methods with Typescript?

Trigger Object RuntimeError

Automatically fill in input fields in a form by selecting options from a dropdown menu and extracting data

Unable to modify text or utilize any of the buttons within CKEDITOR

Difficulty with NodeJS, Hapi, and Cascading Style Sheets

Replicate and customize identical object for creating instances in JavaScript

The ng-model does not reflect changes when using the JQuery datepicker

An element featuring a background color is vertically aligned in the middle of its parent container

What is the reason for Firefox displaying the "excessive recursion" error message?

What steps are necessary to instruct multer to store the file in a specific directory?