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

Question

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

整个项目包含5个JS文件，1个CSS文件和1个HTML文件。

模型看起来像这样：

[]

我为每个隔间添加了淋浴，只有当用户选中特定隔间的复选框时我才需要显示它们。

例如，如果用户选中“小隔间1”复选框＆＃39;，则应在小隔间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 = new THREE.Mesh（新的THREE.BoxGeometry（0.1,0.11,0.45），   wallMaterial）;           showerhead = new THREE.Mesh（new THREE.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）;
          showerhead.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>

任何建议如何显示＆＃39;淋浴＆＃39;当用户检查特定的复选框时？

Answer 1

如果您使用的是纯JavaScript，那么您最初可以通过淋浴课程来隐藏您的淋浴，并在您的CSS中显示它：none;并假设你的淋浴头有ID。

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

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

然后使用if语句查看cube1或cube 2的复选框是否已选中，然后执行

document.getElementById（＆＃34; showerHead1＆＃34;）。className =＆＃34; displayShower＆＃34;;

应覆盖css中的showerHead1类。

如果要删除该类，则可以调用document.getElementById（＆＃34; showerHead1＆＃34;）。classList.remove（＆＃34; displayShower＆＃34;）;

以下是我的参考资料

添加课程 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

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

＆＃13;

＆＃13;

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

＆＃13;

body {
  overflow: hidden;
  margin: 0;
}

#chbxContainer {
  position: absolute;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;