Three.js：为立方体的每个面添加不同的颜色[关闭]答案

【问题标题】：Three.js: Add different color to each face of the cube [closed]Three.js：为立方体的每个面添加不同的颜色[关闭]
【发布时间】：2020-01-28 15:22:09
【问题描述】：

我是 three.js 的新手。在这里，我希望为立方体的每个面添加颜色。在立方体有六个面的地方，我想将每种颜色添加到立方体的每个面上。请帮我解决这个问题。

这是小提琴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);

}

【问题讨论】：

在容器上使用 flex 并在孩子上订购
如果你使用 flex-box，这可以在 css 中完成，只需添加属性 order Live Example
这能回答你的问题吗？ How can I reorder my divs using only CSS?
没有@Pete，我需要javascript代码
既然可以用 css 做，为什么还要用 js？还请展示您尝试过的内容以及解释您遇到的问题的原因，否则您的问题不在主题范围内

标签： three.js

【解决方案1】：

我不知道是否可以直接交换 HTML 元素，但这可行：

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>

【讨论】：