Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/three.js/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何防止鼠标移动期间单击光线投射的对象?_Javascript_Three.js_Click_Preventdefault - Fatal编程技术网

Javascript 如何防止鼠标移动期间单击光线投射的对象?

Javascript 如何防止鼠标移动期间单击光线投射的对象?,javascript,three.js,click,preventdefault,Javascript,Three.js,Click,Preventdefault,我有一组可单击的对象,可以使用滚轮旋转,也可以通过单击和拖动来旋转。我遇到的问题是,当你拖动并释放一个对象时,它会启动单击动画 是一个链接到简化项目的一把小提琴 有人知道如何在拖动过程中阻止记录单击吗?这似乎有点困难,因为它们是光线投射的对象 我的js功能: document.addEventListener("mousedown", function () { isMouseDown = true startX = event.pageX startY = event.

我有一组可单击的对象,可以使用滚轮旋转,也可以通过单击和拖动来旋转。我遇到的问题是,当你拖动并释放一个对象时,它会启动单击动画

是一个链接到简化项目的一把小提琴

有人知道如何在拖动过程中阻止记录单击吗?这似乎有点困难,因为它们是光线投射的对象

我的js功能:

document.addEventListener("mousedown", function () {
    isMouseDown = true
    startX = event.pageX
    startY = event.pageY
    document.body.style.cursor = 'grabbing';
  })

  document.addEventListener("mouseup", function () {
    isMouseDown = false
    document.body.style.cursor = 'grab';
  })

  document.addEventListener("mousemove", function (event) {
    if (isMouseDown) {
      document.body.style.cursor = 'grabbing'
    }

    aimX = ((window.innerWidth / 2) - event.pageX) * 0.35
    aimY = ((window.innerHeight / 2) - event.pageY) * 0.5

    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    raycaster.setFromCamera(mouse, camera)

    const intersections = raycaster.intersectObjects(group.children)

    if (intersections.length > 0) {
      if(projectHov){
        if (INTERSECTED != intersections[0].object) {
            if (INTERSECTED)
            INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
            INTERSECTED = intersections[0].object;
            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
            //setting up new material on hover
            INTERSECTED.material.color.setHex( 0xadadad );
            if (INTERSECTED){
              if(projectHov){
                document.body.style.cursor = "pointer"
              }
            }
        }
      }

      } else {
          if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
          document.body.style.cursor = "grab";
          INTERSECTED = null;
      }

// Moving the objects ==========================
    if(isMouseDown) {
      let currentRotation = new THREE.Matrix4();
              currentRotation.makeRotationFromEuler(group.rotation);

              let newEuler = new THREE.Euler(0, ((event.pageX - startX) + (event.pageY - startY)) / 325, 0);
              let newRotation = new THREE.Matrix4();
              newRotation.makeRotationFromEuler(newEuler);

              let finalRotation = new THREE.Matrix4();
              finalRotation.multiplyMatrices(newRotation, currentRotation);

              group.rotation.setFromRotationMatrix(finalRotation);

              startX = event.pageX;
              startY = event.pageY;
    }
  })
section.addEventListener('click', onDocumentMouseDown, false);

  function onDocumentMouseDown(event) {
      event.preventDefault();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
      raycaster.setFromCamera(mouse, camera);
      const intersections = raycaster.intersectObjects(objects)

// Animation =================================
          if (intersections.length > 0){
            if(projectHov){
              tl.play();

              tl.to(backTag, 1, {
                delay: 1.25,
                autoAlpha:1,
              }, 0);

            }

// Animation ===================================
            if (intersections[0].object == old ) {
              if(projectHov){
                tlOld.play();
                projectHov = false
                tlOld.to(old, 1.5, {three:{scaleX: 1.5, scaleY: 1.5, x:0, y:0, z:0}, ease:Power2.easeInOut}, 0);
                tlOld.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
                tlOld.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
                tlOld.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut}, 0);
                tlOld.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut}, 0);
              groupRotate = false
            }

            } 

您可能需要存储交叉点[0]
object.uuid并在mousedown和mouseup上更新它。然后将存储的uuid与鼠标上的光线投射对象uuid进行比较。仅当它们相等时才进一步处理。

您可能需要存储
交点[0]。object.uuid并在mousedown和mouseup上更新它。然后将存储的uuid与鼠标上的光线投射对象uuid进行比较。只有当它们相等时才进一步处理。

我对uuid不是很熟悉。是否有某种方法需要保存变量?你能说得更具体一点吗?啊,好的,我明白你的意思,但是我在存储uuid以便与光线投射对象uuid进行比较时遇到了问题。谢谢你,我没有意识到uuid是我可以作为三个.js对象的数据使用的东西。我对uuid不是很熟悉。是否有某种方法需要保存变量?你能说得更具体一点吗?啊,好的,我明白你的意思,但是我在存储uuid以便与光线投射对象uuid进行比较时遇到了问题。多亏了这一点,我没有意识到uuid可以用作三个.js对象的数据。