如何解决右键单击时,在div菜单标题中显示所选几何图形的名称
在three.js场景中,我使用THREE.BoxGeometry制作了4个楼层。右键单击各个地板并从显示的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(当前我将获得“ undefined”)或将特定字符串(例如,在floor时为“ Floor 1”)单击右键时,将“ menuTitle”的内部HTML更改为floor1 1右击)。 谢谢! :)
解决方法
您的代码中有一个小错误,而不是
document.getElementById("menuTitle").innerHTML = intersects[0].name;
应该是
document.getElementById("menuTitle").innerHTML = intersect.name;
返回数组中的相交对象与Object3D不同
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。