Не удается открыть указанную ссылку на выбранные объекты - PullRequest
Новая
       106

Не удается открыть указанную ссылку на выбранные объекты

1 голос
/ 05 октября 2019

Я пытаюсь перейти к соответствующей ссылке при нажатии на соответствующие планеты с помощью raycaster. Вместо этого он переходит к URL-адресу последней планеты (здесь она называется категория) при нажатии на любую часть холста. Я использую функцию для создания планет и анимации отдельно от init (). Как мне структурировать raycaster, чтобы щелкать только по планетам, чтобы перейти к их нужному URL? Спасибо за ваше время.

Код ниже: 

class App extends Component{

  componentDidMount() {
    var scene, camera, renderer;
    var controls;
    var category, orbit, orbitContainer

    init();
    animate();

    function createSubCategory(){}

    function createCategory(name, radius, distance, tilt, color, speed, link) {
      orbitContainer = new THREE.Object3D();
      orbitContainer.rotation.x = tilt;
      //  orbitContainer.rotation.x = 700;

         var id = name

        orbit = new THREE.Object3D();

        var geometry = new THREE.CircleGeometry(distance, 100);
        geometry.vertices.shift();
        var line = new THREE.Line(
          geometry,
           new THREE.LineBasicMaterial({color: 'aqua'})
        );

        //ring movement
        line.rotation.x = Math.PI * 0.5;

        category = new THREE.Mesh(
          new THREE.SphereGeometry(radius, 0, 0),
            //new THREE.MeshPhongMaterial({color:color,wireframe: true})
            new THREE.MeshBasicMaterial({color:color,wireframe: true})
        );
        orbitContainer.userData.URL= link
        // initial position
        // distance away from the center

        //change initial position

        category.position.set(distance, 0.0, 0.0);

        //orbit.add(line);
        orbit.add(category);

        new TWEEN.Tween(orbit.rotation,{
          loop: true,

          //useTicks: true,
          //css: true,
          //ignoreGlobalPause: true
      }).to({y:  //'+' or '-' for rotation direction
        '+' + (Math.PI * 2)}, 4000 / speed);





        orbitContainer.add(orbit);
        scene.add(orbitContainer);


    }

    function init() {

        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x202020);

        camera = new THREE.PerspectiveCamera(60, 4 / 3, 0.1, 10000.0);
        camera.position.set(20.0, 20.0, 20.0);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        renderer = new THREE.WebGLRenderer({antialias: false});
       document.addEventListener('mousedown', onDocumentMouseDown, false);
        controls = new OrbitControls(camera, renderer.domElement);

        var ambientLight = new THREE.AmbientLight(0xffffff, 0.1);
        scene.add(ambientLight);

//light emission will be the icon with a line connecting to the logo (sun) and will light up the line and icon when selected 

        var solar = new THREE.Mesh(
            new THREE.SphereGeometry(2.5, 32, 32),
            new THREE.MeshBasicMaterial({emissive: 0xff5800, emissiveIntensity: 0.5, wireframe: true, color:'silver'})
        );

        var pointLight = new THREE.PointLight(0xffffff, 1.0, 300.0);
        solar.add(pointLight);
        scene.add(solar);

        createCategory('B',1.35, 7.2, 0.0, 'yellow', 0.4, "http://google.com" );
        createCategory('A',1.35, 11.0, 0.0, 'red', 0.3, "http://yahoo.com");
        createCategory('D Print', 1.35, 14.0, 0.0, 'blue', 0.2, "http://msn.com");
        createCategory('C Design', 1.35, 17.3, 0.0, 'green', 0.1, "http://facebook.com");
        createCategory('N', 1.35, 12.2, 5.0, 'pink', 0.4, "http://stackoverflow.com");

        window.addEventListener('resize', onWindowResize, false);
        onWindowResize();

        document.body.appendChild(renderer.domElement);
    }
    function onDocumentMouseDown(event) {
      event.preventDefault();


          var raycaster = new THREE.Raycaster(); // create once
          var mouse = new THREE.Vector2(); // create once
          mouse.x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
          mouse.y = - ( event.clientY / renderer.domElement.clientHeight ) * 2 + 1;
          raycaster.setFromCamera( mouse, camera );

          var intersects = raycaster.intersectObjects(orbitContainer);
      if (intersects.length === 0) {
          window.open(orbitContainer.userData.URL);
      }
  }
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    function animate() {

        controls.update();

        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

  }

1 Ответ

1 голос
/ 05 октября 2019

Есть 2 проблемы с вашим кодом:

Задача 1:

он переводит меня на URL последней планеты

Этопотому что вы используете одну и ту же глобальную переменную orbitContainer для создания 5 категорий. Каждый раз, когда вы звоните createCategory, URL перезаписывается, поэтому, когда вы звоните window.open(orbitContainer.userData.URL);, он открывает последний назначенный вами. Происходит что-то вроде этого: 

orbitContainer.userData.URL = "http://google.com";
orbitContainer.userData.URL = "http://yahoo.com";
orbitContainer.userData.URL = "http://msn.com";
orbitContainer.userData.URL = "http://facebook.com";
orbitContainer.userData.URL = "http://stackoverflow.com";

window.open(orbitContainer.userData.URL); // <- this opens stackoverflow

Решение: вы должны получить URL-адрес от результата raycaster: 

intersects = raycaster.intersectObjects( scene.children );

if (intersects.length > 0) {
    window.open(intersects[0].object.userData.URL);
}

Задача 2:

при нажатии на любую часть холста

это потому, что вы явно проверяете нулевые пересечения, когда делаете это: 

if (intersects.length === 0) {
    window.open(orbitContainer.userData.URL);
}

выследует проверять наличие перехватов с if (intersects.length > 0), как показано в приведенном выше решении.

Также убедитесь, что вы выполняете raycaster с детьми сцены: raycaster.intersectObjects( scene.children ); не с orbitContainer, потому что, как я сказалвы перезаписываете ее каждый раз, когда создаете новую категорию, и в ней не будет всех объектов.

...