Create the artwork on cube surfaces as a complete unit, rather than focusing on the individual triangles that form the face - three.js

Question

Create the artwork on cube surfaces as a complete unit, rather than focusing on the individual triangles that form the face - three.js

While trying to paint each face of a cube with a different color, I came across a helpful thread that outlines a method to achieve this:

var geometry = new THREE.BoxGeometry(5, 5, 5);
for (var i = 0; i < geometry.faces.length; i++) {
    geometry.faces[i].color.setHex(Math.random() * 0xffffff);
}

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
});

However, when using three.js r86, the outcome is as shown below:

https://i.sstatic.net/YvONr.png

The individual triangles that make up each face are painted separately.

To achieve the desired effect, I made a slight modification to the code as follows:

var geometry = new THREE.BoxGeometry(5, 5, 5);
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
    var faceColor = Math.random() * 0xffffff;
    geometry.faces[i].color.setHex(faceColor);
    geometry.faces[i+1].color.setHex(faceColor);
}

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
});

https://i.sstatic.net/5wPJc.png

However, this solution seems somewhat convoluted!

'use strict';

var camera, scene, renderer, cube;

init();
render();

function init() {

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  // renderer

  renderer = new THREE.WebGLRenderer({
    alpha: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera.position.z = 12;

  // Mesh - cube

  var geometry = new THREE.BoxGeometry(5, 5, 5);
  for (var i = 0; i < geometry.faces.length; i += 2) {
    var faceColor = Math.random() * 0xffffff;
    geometry.faces[i].color.setHex(faceColor);
    geometry.faces[i + 1].color.setHex(faceColor);
  }

  var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.FaceColors
  });

  cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  // Light

  var pointLight = new THREE.PointLight(0xFFFFFF);

  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;

  scene.add(pointLight);

}

function render() {

  cube.rotation.x = 16;
  cube.rotation.y = 4;
  cube.rotation.z -= 5;

  renderer.render(scene, camera);

}

body,
canvas {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background-color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js"></script>

Is there a simpler way in three.js to achieve painting the faces of a cube as a whole?

javascript three.js mesh face

Answer 1

Answer №1

Utilizing the BufferGeometry enables you to exercise control over the material of specific sections within your geometry by incorporating groups. These groups are defined by the vertex indices and permit you to specify a material index that references a material within an array of materials.

For instance:

// start, count, material index
bufferGeometry.addGroup(12, 6, 2)

This instruction directs the geometry to initiate a new group of triangles at the index 12, encompassing 6 indices (related to 6 vertices). The final parameter designates the group of triangles to apply material index 2 (located at index 2 in the material array used to construct the mesh).

In the illustration below, distinct colors have been assigned to every side of a cube. While this may seem akin to setting face colors, it's crucial to recognize that this process assigns a material per group, rather than just a color, thereby allowing for the creation of compelling effects.

// code snippet

Edit: Introducing a secondary example utilizing the core BoxBufferGeometry

Per pailhead's input on the original post, here's a snippet that leverages the unaltered BoxBufferGeometry. However, as pointed out in their comment, an understanding of which group corresponds to which face is still imperative.

// code snippet

Answer 2

Utilizing the BufferGeometry enables you to exercise control over the material of specific sections within your geometry by incorporating groups. These groups are defined by the vertex indices and permit you to specify a material index that references a material within an array of materials.

For instance:

// start, count, material index
bufferGeometry.addGroup(12, 6, 2)

This instruction directs the geometry to initiate a new group of triangles at the index 12, encompassing 6 indices (related to 6 vertices). The final parameter designates the group of triangles to apply material index 2 (located at index 2 in the material array used to construct the mesh).

In the illustration below, distinct colors have been assigned to every side of a cube. While this may seem akin to setting face colors, it's crucial to recognize that this process assigns a material per group, rather than just a color, thereby allowing for the creation of compelling effects.

// code snippet

Edit: Introducing a secondary example utilizing the core BoxBufferGeometry

Per pailhead's input on the original post, here's a snippet that leverages the unaltered BoxBufferGeometry. However, as pointed out in their comment, an understanding of which group corresponds to which face is still imperative.

// code snippet

Answer 3

Answer №2

When working with groups, the geometry is divided into 6 faces. To create a basic cube, a simple custom ShaderMaterial can be used.

Dividing the geometry into 6 groups results in more draw calls. Instead of utilizing 1 draw call to draw a cube, 6 draw calls are necessary, one for each face.

With a ShaderMaterial, only 1 draw call is required:

Vertex Shader:

attribute vec3 vertexColor;
varying vec3 vColor;

void main() {
  vColor = vertexColor;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}

Fragment Shader:

varying vec3 vColor;

void main() {
  gl_FragColor = vec4(vColor, 1.);
}

This approach also allows for utilizing GLSL color blending to merge different colors.

A custom ShaderMaterial can be created by simply setting the vertex and fragment shader source strings:

const ColorCubeShader = function () {
  THREE.ShaderMaterial.call(this, {
    vertexShader: vertexShaderSrc,
    fragmentShader: fragmentShaderSrc
  })
}

ColorCubeShader.prototype = Object.create(THREE.ShaderMaterial.prototype)
ColorCubeShader.prototype.constructor = ColorCubeShader

Customize a Color Cube Mesh:

/**
 * Function for coloring a face
 * @param {Number} r 
 * @param {Number} g 
 * @param {Number} b 
 * @returns {Array}
 */
const buildVertexColorArrayFace = function (r, g, b) {
  return [
    r, g, b,
    r, g, b,
    r, g, b,
    r, g, b
  ]
}

const ColorCube = function (size) {
  const geometry = new THREE.BoxBufferGeometry(size, size, size)

  // create color array
  let colorArray = []
  colorArray = colorArray
  .concat(buildVertexColorArrayFace(1, 0, 0))
  .concat(buildVertexColorArrayFace(0, 1, 0))
  .concat(buildVertexColorArrayFace(0, 0, 1))
  .concat(buildVertexColorArrayFace(1, 0, 1))
  .concat(buildVertexColorArrayFace(1, 1, 0))
  .concat(buildVertexColorArrayFace(0, 1, 1))

  // create buffer attribute for colors (for attribute vec3 vertexColor)
  const colorAttribute = new THREE.Float32BufferAttribute(
    new Float32Array(colorArray), 3)

  // set attribute vertexColor in vertex shader
  geometry.setAttribute('vertexColor', colorAttribute)

  // instantiate custom Shader Material
  const material = new ColorCubeShader()

  THREE.Mesh.call(this, geometry, material)
}

ColorCube.prototype = Object.create(THREE.Mesh.prototype)
ColorCube.prototype.constructor = ColorCube

To use it:

const cube = new ColorCube(1)
cube.position.set(0, 2, -2)
scene.add(cube)

Answer 4

When working with groups, the geometry is divided into 6 faces. To create a basic cube, a simple custom ShaderMaterial can be used.

Dividing the geometry into 6 groups results in more draw calls. Instead of utilizing 1 draw call to draw a cube, 6 draw calls are necessary, one for each face.

With a ShaderMaterial, only 1 draw call is required:

Vertex Shader:

attribute vec3 vertexColor;
varying vec3 vColor;

void main() {
  vColor = vertexColor;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
}

Fragment Shader:

varying vec3 vColor;

void main() {
  gl_FragColor = vec4(vColor, 1.);
}

This approach also allows for utilizing GLSL color blending to merge different colors.

A custom ShaderMaterial can be created by simply setting the vertex and fragment shader source strings:

const ColorCubeShader = function () {
  THREE.ShaderMaterial.call(this, {
    vertexShader: vertexShaderSrc,
    fragmentShader: fragmentShaderSrc
  })
}

ColorCubeShader.prototype = Object.create(THREE.ShaderMaterial.prototype)
ColorCubeShader.prototype.constructor = ColorCubeShader

Customize a Color Cube Mesh:

/**
 * Function for coloring a face
 * @param {Number} r 
 * @param {Number} g 
 * @param {Number} b 
 * @returns {Array}
 */
const buildVertexColorArrayFace = function (r, g, b) {
  return [
    r, g, b,
    r, g, b,
    r, g, b,
    r, g, b
  ]
}

const ColorCube = function (size) {
  const geometry = new THREE.BoxBufferGeometry(size, size, size)

  // create color array
  let colorArray = []
  colorArray = colorArray
  .concat(buildVertexColorArrayFace(1, 0, 0))
  .concat(buildVertexColorArrayFace(0, 1, 0))
  .concat(buildVertexColorArrayFace(0, 0, 1))
  .concat(buildVertexColorArrayFace(1, 0, 1))
  .concat(buildVertexColorArrayFace(1, 1, 0))
  .concat(buildVertexColorArrayFace(0, 1, 1))

  // create buffer attribute for colors (for attribute vec3 vertexColor)
  const colorAttribute = new THREE.Float32BufferAttribute(
    new Float32Array(colorArray), 3)

  // set attribute vertexColor in vertex shader
  geometry.setAttribute('vertexColor', colorAttribute)

  // instantiate custom Shader Material
  const material = new ColorCubeShader()

  THREE.Mesh.call(this, geometry, material)
}

ColorCube.prototype = Object.create(THREE.Mesh.prototype)
ColorCube.prototype.constructor = ColorCube

To use it:

const cube = new ColorCube(1)
cube.position.set(0, 2, -2)
scene.add(cube)

Create the artwork on cube surfaces as a complete unit, rather than focusing on the individual triangles that form the face - three.js

Answer №1

Answer №2

Similar questions

Creating dynamic Ionic slides by fetching data from a database

"Learn how to capture the complete URL and seamlessly transfer it to another JavaScript page using Node.js and Express.js

Prevent accordion expansion triggered by the More button click

A simulated movement normal map without changing the camera position or adjusting the light source in Three.js

What is preventing the specific value in React state from being updated?

Firestore version 9 - Retrieve nested collection depending on a string being present in an array

A warning has been issued: CommonsChunkPlugin will now only accept one argument

Switch Button Hyperlink in HTML/CSS

Utilizing a TypeScript function to trigger an action from within a Chart.js option callback

Utilizing MongoDB and Express to access collections within a controller

How can we efficiently trigger a function that sends an axios request by leveraging data from a v-for loop?

Is conditional CSS possible with NextJS?

Invoke a Google Apps Script through AJAX that necessitates authentication

I just made an ajax call. Now, how should I proceed with formatting the data that was returned

Background image specifically for the Fullcalendar sun component

Mastering angle calculations in three.js

Obtaining an image from a URL, saving it, and then animating it? That definitely

Eliminate the need to input the complete URL every time when making server calls

Encountering an issue with JQuery when attempting to create a double dropdown SelectList. Upon submitting the POST request, the output received is always

Is browserHistory.push ineffective in react.js?