Three.js: Add different color to each face of the cube

Question

I'm new to three.js . Here, I'm looking to add color to the each face of the cube. Where the cube has six faces, I want to add each color to the each face of the cube. Kindly, help me out with the issue.

Here's the fiddle https://jsfiddle.net/dfk0svw4/

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

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

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);

}

This can be done in css if you are using **flex-box**, just add the property **order** [Live Example](https://www.w3schools.com/css/tryit.asp?filename=trycss3_flexbox_order_2) — Sameer, Jan 27 '20 at 09:31
Does this answer your question? [How can I reorder my divs using only CSS?](https://stackoverflow.com/questions/220273/how-can-i-reorder-my-divs-using-only-css#answer-28159766) — Pete, Jan 27 '20 at 09:32
Why use js when you can do it with css? Also please show what you've tried and what explain what you are having trouble with otherwise your question is off topic — Pete, Jan 27 '20 at 09:37

score 1 · Accepted Answer · answered Jan 27 '20 at 09:46

I don't know if it's possible to swap HTML elements directly but this works:

const swapperBtn = document.querySelector("#btn-swap")

swapperBtn.addEventListener("click", () => {
  swapDivsByClass("e-rule-delete", "rule-unit")
  // to check result:
  // console.log(document.querySelector(".e-rule-field").innerHTML)
});

function swapDivsByClass(class1, class2) {
  const div1 = document.querySelector(`.${class1}`)
  const div2 = document.querySelector(`.${class2}`)
  
  const content1 = div1.innerHTML
  const content2 = div2.innerHTML
  
  div1.innerHTML = content2
  div1.classList.replace(class1, class2)
  
  div2.innerHTML = content1
  div2.classList.replace(class2, class1)
}

<div class="e-rule-container">
  <div class="e-rule-field">
    <div class="e-rule-filter">
      e-rule-filter
    </div>
    <div class="e-rule-oprator">
      e-rule-oprator
    </div>
    <div class="e-rule-value">
      e-rule-value
    </div>
    <div class="e-rule-delete">
      e-rule-delete
    </div>
    <div class="rule-unit">
      rule-unit
    </div>
  </div>
</div>

<button id="btn-swap">Switch</button>

Three.js: Add different color to each face of the cube

1 Answers1