Three.js：为立方体的每个面添加不同的颜色

我对three.js不熟悉。在这里，我希望为立方体的每个面添加颜色。当立方体有六个面时，我想将每个颜色添加到立方体的每个面。请帮我解决这个问题

这是小提琴

---

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

const swapperBtn=document.querySelector（“btn交换”）
swapperBtn.addEventListener（“单击”，（）=>{
swapDivsByClass（“电子规则删除”，“规则单元”）
//要检查结果，请执行以下操作：
//console.log（document.querySelector（“.e-rule-field”）.innerHTML）
});
函数swapDivsByClass（类1、类2）{
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）
}

e规则过滤器
电子规则运算器
e-规则值
电子规则删除
规则单元
开关

在容器上使用flex，在子容器上使用order这可以在css中完成如果您使用flex box，只需添加属性order这是否回答了您的问题？不@Pete，我需要javascript代码当你可以用css做的时候为什么要用js呢？另外，请展示您尝试过的内容，并解释您遇到的问题，否则您的问题就离题了

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);

}