Question

我是three.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);

}

Answer 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>

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

1 个答案: