Exploring the versatility of WebGL and Three.js with multiple materials on a single intricate grid structure

Question

Exploring the versatility of WebGL and Three.js with multiple materials on a single intricate grid structure

To enhance performance, I optimize by rendering the grid to a single THREE.Geometry() object using this loop:

build: function(){ 

  square = new THREE.Geometry();
  face = 0;

  for(r = 0; r < this["rows"]; r++)
   for(c = 0; c < this["cols"]; c++)

       // create square
       square.vertices.push(new THREE.Vector3(x, y, z));
       square.vertices.push(new THREE.Vector3(x + w, y, z));
       square.vertices.push(new THREE.Vector3(x + w, y - h, z));
       square.vertices.push(new THREE.Vector3(x, y - h, z));

       square.faces.push(new THREE.Face4(face + 0, face + 1, face + 2, face + 3));

       face += 4;
  // end of loops 

  // Add material to the entire grid.
  // How can individual colors be applied to each square?

  squareMaterial = new THREE.MeshBasicMaterial({
        color:"white",
        side:THREE.DoubleSide
  });

  grid = new THREE.Mesh(square, squareMaterial); 
  scene.add(grid);

Assuming there's a function that selects the vertices set (one square) from the grid (mesh), how do you then apply color specifically to this vertices set (square)?

javascript three.js webgl

Answer 1

Answer №1

When writing your code, keep in mind that you are creating a single object grid with one material. It is not possible to set a new material for just part of the object. One way around this limitation is to write your own shader and define attributes such as pos.x, pos.y, and texture. Another option could be to draw your grid in sections, although this may not be the best approach.

Answer 2

When writing your code, keep in mind that you are creating a single object grid with one material. It is not possible to set a new material for just part of the object. One way around this limitation is to write your own shader and define attributes such as pos.x, pos.y, and texture. Another option could be to draw your grid in sections, although this may not be the best approach.

Answer 3

Answer №2

Firstly: start by generating a grid using a plane geometry with multiple segments (10x10):

let planeGeometry = new THREE.PlaneGeometry(100, 100, 10, 10);

Secondly: assign materialIndex to the desired face for changing the material color:

For example:

planeGeometry.faces[5].materialIndex = 1;

Please note that the default materialIndex is set to 0;

Next, create two or more materials and store them in an array:

let materialsArray = [
        new THREE.MeshBasicMaterial({color: 0xFF0000, side: THREE.DoubleSide}), // matIdx = 0
        new THREE.MeshBasicMaterial({color: 0x00FF00, side: THREE.DoubleSide}) // matIdx = 1
    ];

Then, create a multimaterial:

let multiMaterial = new THREE.MeshFaceMaterial(materialsArray);

Afterward, generate the mesh and add it to the scene:

grid = new THREE.Mesh(planeGeometry, squareMaterial); 
scene.add(grid);

I hope this explanation proves useful,

M.

PS:

You may need to rotate the planeGeometry 180 degrees around the X or Z axis - as the PlaneGeometry might be created with normals facing downward - although this is not certain.

If rotation is necessary, you can achieve it by:

planeGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI));

Answer 4

Firstly: start by generating a grid using a plane geometry with multiple segments (10x10):

let planeGeometry = new THREE.PlaneGeometry(100, 100, 10, 10);

Secondly: assign materialIndex to the desired face for changing the material color:

For example:

planeGeometry.faces[5].materialIndex = 1;

Please note that the default materialIndex is set to 0;

Next, create two or more materials and store them in an array:

let materialsArray = [
        new THREE.MeshBasicMaterial({color: 0xFF0000, side: THREE.DoubleSide}), // matIdx = 0
        new THREE.MeshBasicMaterial({color: 0x00FF00, side: THREE.DoubleSide}) // matIdx = 1
    ];

Then, create a multimaterial:

let multiMaterial = new THREE.MeshFaceMaterial(materialsArray);

Afterward, generate the mesh and add it to the scene:

grid = new THREE.Mesh(planeGeometry, squareMaterial); 
scene.add(grid);

I hope this explanation proves useful,

M.

PS:

You may need to rotate the planeGeometry 180 degrees around the X or Z axis - as the PlaneGeometry might be created with normals facing downward - although this is not certain.

If rotation is necessary, you can achieve it by:

planeGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI));

Exploring the versatility of WebGL and Three.js with multiple materials on a single intricate grid structure

Answer №1

Answer №2

Similar questions

Techniques for linking <span> values to the radar chart's field titles using AngularJS or JQuery

My attempts to load the .mtl and .obj files using THREE.js have been unsuccessful

What is the best method for creating a fade effect on a div background?

The Comparison of $rootScope and services in AngularJS

Change the content of a selectbox dynamically with the help of jQuery and AJAX

How can I make tooltipster display tooltips properly?

I am currently working on coding a function that will search an array to determine if a specific item is present. If the item is found, a variable will be set to true;

The expandable row remains open even after filtering the table with JavaScript

I am having trouble retrieving any data when using jQuery to post JSON data

Is the return value a result of destructuring?

Choose the dropdown item depending on the related text

Encountering issues when implementing react-router with the client-side library

Looping through an array

Retrieve initial elements from an array with the help of Node.js or JavaScript

How to Retrieve a Targeted Element from a Multidimensional Array

Using Heroku to deploy NodeJS applications

Is it possible for an HTML5 video element to stream m3u files?

Exploring the World of Metaprogramming with AngularJS Filters

Creating an infinite SVG animation loop using JavaScript

"Unexpected error: .jqm is not defined as a