Невозможно передать отдельный объект в группе в three.js для запуска анимации - PullRequest
Новая
       12

Невозможно передать отдельный объект в группе в three.js для запуска анимации

0 голосов
/ 19 января 2019

У меня проблема с радиопередачей в группу, которую я создал в three.js.

Я пытаюсь вызвать анимацию с TweenMax, когда нажимаю на объект.Проблема в том, что когда вы щелкаете по объекту с другим позади него, он запускает обе последовательности анимации объектов, так как он передает лучи обоих объектов.

Ниже приведен код моего радиопередачи, и здесь есть ссылка на рабочий URL, чтобы увидеть весь проект.-> 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});
            }

          }


      };

1 Ответ

0 голосов
/ 19 января 2019

Информация, возвращаемая 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 ) {
        // [...]
    }
}
...