无法对 Three.js 中的组中的单个对象进行光线投射以运行动画

Question

我在将光线投射到我在 Three.js 中创建的组中时遇到问题。

当我单击对象时，我尝试使用 TweenMax 触发动画。问题是，当您单击一个对象后面有另一个对象时，它会触发这两个对象的动画序列，因为它对这两个对象进行光线投射。

我的光线投射代码如下，这里是工作网址的链接，可以查看整个项目。 -> www.jacobtruax.info

是否有更好的方法来实现我想要做的事情，或者我可以阻止它一次光线投射两个对象？

let mouse = new THREE.Vector2();
let raycaster = new THREE.Raycaster(),INTERSECTED;

  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
    aimX2 = ((window.innerWidth / 2) - event.pageX) * 0.05
    aimY2 = ((window.innerHeight / 2) - event.pageY) * 0.05

    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)

    const sWorks = document.getElementById('sWorks')

    if (intersections.length > 0) {
          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 );
              // uRL()
              if (INTERSECTED){
                sWorks.innerHTML = intersections[0].object.userData.NAME
              }
              if (INTERSECTED){
                document.body.style.cursor = "pointer"
              }
          }
      } else {
          if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex);
          sWorks.innerHTML = "Selected Works";
          document.body.style.cursor = "grab";
          INTERSECTED = null;


      }

    if(isMouseDown) {
      aimX = aimX + (event.pageX - startX)
      aimY = aimY + (event.pageY - startY)
      group.rotation.set(0, ((aimX + (event.pageX - startX)) + (aimY + (event.pageY - startY))) / 900, 0)
      //createShape(event.pageX, event.pageY)
    }
  })

  document.addEventListener('mousedown', 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);
          var intersectFnup = raycaster.intersectObject(fnup);
          var intersectOld = raycaster.intersectObject(old);
          var intersectCam = raycaster.intersectObject(cam);
          var intersectAlex = raycaster.intersectObject(alex);
          const intersections = raycaster.intersectObjects(group.children)
          if (intersections.length > 0){
            if (intersectOld.length > 0) {
                  TweenMax.to(old, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0, rotationX: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                oldRotate = false
                groupRotate = false
                fnupPosition = false
                TweenMax.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut});
            }
            if (intersectFnup.length > 0) {

                  TweenMax.to(fnup, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0 }, ease:Power2.easeInOut});
                  TweenMax.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                oldRotate = false
                groupRotate = false
                fnupPosition = false
                TweenMax.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut});
            }
            if (intersectCam.length > 0) {
                  TweenMax.to(cam, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0 , rotationX: 0}, ease:Power2.easeInOut});
                  TweenMax.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(alex, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                oldRotate = false
                groupRotate = false
                fnupPosition = false
                TweenMax.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut});
            }
            if (intersectAlex.length > 0) {
                  TweenMax.to(alex, 1.5, {three:{scaleX: 2.5, scaleY: 2.5, x:0, y:0, z:0, rotationX: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(fnup, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(cam, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                  TweenMax.to(old, 1, {three:{y:-4000, opacity: 0 }, ease:Power2.easeInOut});
                oldRotate = false
                groupRotate = false
                fnupPosition = false
                TweenMax.to(mirrorCube, 1, {three:{y:-400, opacity: 0 }, ease:Power2.easeInOut});
            }

          }


      };

Answer 1

THREE.Raycaster

返回的信息包含到对象的距离，如果返回超过1个对象，则对象按其距离排序（例如

intersections[0].distance

）。 您可以比较这个距离来找到距离最近的物体。

但我建议对所有对象使用单个

intersectObject

测试。对最近对象的引用可以通过

==

或

===

与已知对象进行比较。
生成包含对象

fnup

、

old

、

cam

和

alex

的数组，并将

intersectObject

的结果与对象进行比较：

var objects = [fnup, old, cam, alex];
var intersections = raycaster.intersectObjects(objects)

if (intersections.length > 0) {

    if ( intersects[0].object == fnup ) {
        // [...]
    }

    if ( intersects[0].object == old ) {
        // [...]
    }

    if ( intersects[0].object == cam ) {
        // [...]
    }

    if ( intersects[0].object == alex ) {
        // [...]
    }
}