时间戳

首页 > 解决方案 > 右键单击时在 div 菜单的标题中显示所选几何图形的名称

javascript - 右键单击时在 div 菜单的标题中显示所选几何图形的名称

问题描述

在我的three.js 场景中，我有4 层使用THREE.BoxGeometry 制作。通过右键单击各个楼层并从出现的 div 菜单中选择一个选项，可以轻松更改楼层的纹理。我的菜单在 html 上为：

<div id="menu" style="position:absolute;display:none;background-color:red">
  <span id="menuTitle" color="blue">menu</span>
  <br>
  <button id="35">Black Floor</button><br>
  <button id="36">Wood Floor</button><br>
  <button id="37">Blue Floor</button><br>
  <button id="38">Grey Floor</button>
</div>

我的 mouseDown 函数如下：

function onMouseDown(event) {
  event.preventDefault();
  var rightclick;
    if (!event) var event = window.event;
    if (event.which) rightclick = (event.which == 3);
    else if (event.button) rightclick = (event.button == 2);
  if (!rightclick) return;

  raycaster.setFromCamera(mouse, camera);
 

  var intersects = raycaster.intersectObjects([floor1, floor2, floor3, floor4]);

  if (intersects.length) {
    intersect = intersects[0].object;
    menu.style.left = (event.clientX - rect.left) + "px";
    menu.style.top = (event.clientY - rect.top) + "px";
    document.getElementById("menuTitle").innerHTML = intersects[0].name;
    menu.style.display = "";
  }
  else{
    intersect = undefined;
  }
  
}

我想要做的是在右键单击 floor1 时将“menuTitle”的内部 HTML 更改为 floor1（目前我得到“未定义”）或者更好的是一个特定的字符串（例如，当第 1 层正确时为“Floor 1”点击）。谢谢你！:)

标签： javascripthtmlthree.js

解决方案

您的代码中有一个小错误，而不是

document.getElementById("menuTitle").innerHTML = intersects[0].name;

它应该是

document.getElementById("menuTitle").innerHTML = intersect.name;

返回数组中的相交对象与 Object3D 不同

推荐阅读