时间戳

首页 > 解决方案 > 单击时更改变量的Javascript上下文菜单

javascript - 单击时更改变量的Javascript上下文菜单

问题描述

在我的three.js 应用程序中，我右键单击地板（BoxGeometry），这会显示一个上下文菜单，因此我可以从一系列不同的纹理中进行选择。虽然这适用于一层，但我想让它适用于几层。

这是纹理和材料1：

const loaderT = new THREE.TextureLoader();
const texture1 = loaderT.load( './textures/32995.jpg' );  
 const box = new THREE.BoxGeometry( 25, .3, 25);
 
    const material1 = new THREE.MeshLambertMaterial( { map: texture1 } ); 
    
    floor1 = new THREE.Mesh( box, material1 );
    floor1.position.set(-12.5,0,-12.5);
    

//and repeat for the other textures

我改变楼层的功能如下：

function changeFloor(event)
let targetID = parseInt(event.target.id,10);
var texture;
switch(targetID){
case 35:
      texture = texture1;
      break;
case 36:
      texture = texture2;
      break;
case 37:
      texture = texture3;
      break;
case 38:
      texture = texture4;
      break;       
}
ultimateMat.map = texture;

menu.style.display = "none";
}

ID 是上下文菜单上的不同选择选项。我试图让 UltimateMat 变量根据我右键单击的楼层而改变。

目前我在鼠标按下功能上有这个：

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 = intersect.name;
    menu.style.display = "";
  }
  else{
    intersect = undefined;
  }
  
}

当我右键单击 floor1 时如何使ultimateMat 变量更改为 material1，然后单击 floor2 时如何更改为 material2 等等？

谢谢 ：）

标签： javascriptthree.js

解决方案

我已经解决了；）

我使用了另一个 switch 语句来解决这个问题：

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

  if (intersects.length) {
    intersect = intersects[0].object;
    switch(intersect){
    case floor1:
    ultimateMat = material1;
    break;
    case floor2:
    ultimateMat = material2;
    break;
    case floor3:
    ultimateMat = material3;
    break;
    case floor4:
    ultimateMat = material4;
    break;

    }

推荐阅读