使用 HTML 复选框在 3D 模型中显示/隐藏项目

Question

我使用 JavaScript、CSS 和 Three.js 开发了一个 3D 模型。

整个项目由5个JS文件、1个CSS文件和1个HTML文件组成。

模型如下所示：

[]

我已为每个隔间添加了淋浴器，并且仅在用户选中特定隔间的复选框时才需要显示它们。

例如，如果用户选择“隔间 1 复选框”，则淋浴应显示在隔间 1 中。

负责JavaScript文件的相关代码块：

  function createPartition() {
    var partitionGroup = new THREE.Group();
    var door = new THREE.Mesh(geometries.door, materials.doorMaterial);
    var doorLibbing = new THREE.Mesh(geometries.libbing1, materials.libbingMaterial);
    var frontPanelWithoutHoles = new THREE.Mesh(geometries.frontPanelWithoutHoles, materials.frontPanelMaterial);
    var frontPanelWithHoles = new THREE.Mesh(geometries.frontPanelWithHoles, materials.frontPanelMaterial);
    var frontPanel_leftLibbing = new THREE.Mesh(geometries.libbing2, materials.libbingMaterial);
    var frontPanel_rightLibbing = new THREE.Mesh(geometries.libbing2, materials.libbingMaterial);
    var frontPanel_topLibbing = new THREE.Mesh(geometries.libbing2, materials.libbingMaterial);
    var partitionLeft = new THREE.Mesh(geometries.partition, materials.partitionMaterial);
    var partitionLeft_frontLibbing = new THREE.Mesh(geometries.libbing2, materials.libbingMaterial);
    var partitionLeft_backLibbing = new THREE.Mesh(geometries.libbing2, materials.libbingMaterial);
    var partitionLeft_topLibbing = new THREE.Mesh(geometries.libbing2, materials.libbingMaterial);


  var wallMaterial = new THREE.MeshLambertMaterial({color:resources.settings.wallColor});


    footRight = new THREE.Mesh(new THREE.BoxGeometry(.040, .15, 0.05), wallMaterial);
    footLeft = new THREE.Mesh(new THREE.BoxGeometry(.040, .15, 0.05), wallMaterial);

shower= 新的 THREE.Mesh(新的 THREE.BoxGeometry(0.1, 0.11, 0.45), 墙材料）； 花洒=新三.Mesh(新三.BoxGeometry(0.1,0.1,-0.04),wallMaterial);

    partitionLeft.add(footRight);
    partitionLeft.add(footLeft);

partitionLeft.add(淋浴);
partitionLeft.add(淋浴头);

    footRight.position.set(-0.12,-0.85,0);
    footLeft.position.set(.12,-0.85,0);

shower.position.set(0.4,0.5,-1.312);
花洒.position.set(0.4,0.4,-1.112);

我在 index.html 中包含复选框值

<input type="checkbox" name="cube1" value="cube1"> Cubicle 1<br>
  <input type="checkbox" name="cube2" value="cube2" checked> Cubicle 2 <br>

有什么建议如何在用户选中特定复选框时显示“淋浴”？

Answer 1

如果您使用纯 JavaScript，您可以通过在 Shower 上设置一个类来隐藏您的淋浴，并在您的 css 中显示：无；并假设您的 I 淋浴头有 ID。

在您的 css 文件中，它看起来像这样

#showerHead1{
     display:none;
}
.displayShower{
     display:block;
}

然后有一个if语句，看看cube1或cube 2的checkbox是否被勾选然后执行

document.getElementById("showerHead1").className = "displayShower";

应该覆盖 css 中的 ShowerHead1 类。

如果你想删除这个类，那么你可以调用 document.getElementById("showerHead1").classList.remove("displayShower");

这是我的参考资料

添加类 https://www.w3schools.com/jsref/prop_html_classname.asp

删除类 https://www.w3schools.com/howto/howto_js_remove_class.asp

Answer 2

当您在代码中使用 Javascript 时，您可以将 onclick 事件添加到按钮并添加一个外部函数，您可以在其中添加或删除该特定网格。

我试过了，它对我有用。

希望这对你也有帮助。

Answer 3

关于如何做到这一点的一个非常粗略的概念：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 3, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function makeCubicle(id, color, position, isShown) {

  var cubicle = new THREE.Mesh(new THREE.BoxGeometry(2, 3, 2), new THREE.MeshBasicMaterial({
    color: color,
    wireframe: true
  }));
  cubicle.position.copy(position);
  cubicle.visible = isShown;
  scene.add(cubicle);

  var id = "cubicle" + id;
  var chbx = document.createElement("INPUT");
  chbx.setAttribute("type", "checkbox");
  chbx.checked = isShown;
  chbx.id = id;
  chbx.addEventListener("click", function() {
    cubicle.visible = !cubicle.visible;
  });

  chbxContainer.appendChild(chbx);
}

makeCubicle("1", "red", new THREE.Vector3(-2, 0, 0), true);
makeCubicle("2", "blue", new THREE.Vector3(2, 0, 0), false);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

#chbxContainer {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.min.js"></script>
<div id="chbxContainer"></div>