Три.пересечение JS raycaster

Question

Три.пересечение JS raycaster

Я написал код ниже, чтобы получить точку пересечения с трехмерной фигурой. Он работает хорошо, но если есть две точки пересечения с формой, он возвращает мне только самое дальнее пересечение, в то время как мне нужно ближайшее пересечение с формой. Как я могу сделать, чтобы получить ближайшего перекрестка?

  /*here I create a cube*/



            var geometry0 = new THREE.Geometry()

            geometry0.vertices = [new THREE.Vector3(0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, 0.5), new THREE.Vector3(-0.5, -0.5, -0.5), new THREE.Vector3(0.5, -0.5, -0.5), new THREE.Vector3(0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, 0.5), new THREE.Vector3(-0.5, 0.5, -0.5), new THREE.Vector3(0.5, 0.5, -0.5)];

            geometry0.faces = [new THREE.Face3(3, 2, 1), new THREE.Face3(3, 1, 0), new THREE.Face3(4, 5, 6), new THREE.Face3(4, 6, 7), new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4), new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5), new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6), new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7)];

            geometry0.computeFaceNormals();

            geometry0.computeVertexNormals();

            var material0 = new THREE.MeshBasicMaterial({color: 0x39d2dbe7fff39d2, transparent: true, opacity: 0});

            mesh0 = new THREE.Mesh(geometry0, material0);

            egh0 = new THREE.EdgesHelper(mesh0, 0x000);

            egh0.material.linewidth = 2;

            scene.add(egh0);





            objects.push(mesh0);

            projector = new THREE.Projector();

            console.log(objects);

            mouse2D = new THREE.Vector3(0, 10000, 0.5);//controllare i valori







    /* here I create the ray */





document.addEventListener('click', onDocumentMouseClick, false);





        function onDocumentMouseClick(event) {



            event.preventDefault();



            mouse2D.x = (event.clientX / window.innerWidth) * 2 - 1;

            mouse2D.y = -(event.clientY / window.innerHeight) * 2 + 1;

             var vector = new THREE.Vector3( mouse2D.x, mouse2D.y, 0.5 );



            projector.unprojectVector( vector, camera );



            var raycaster = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );





            var intersects = raycaster.intersectObjects( objects );



            if (intersects.length > 0) {

                console.log("ok");}

Если я проверяю пересекает[0].точка я могу видеть только самую дальнюю точку грань куба пересекается, а не первую (например, если вы смотрите на куб перед вами и делаете луч, этот луч раньше пересеките первую грань и после пересечения вторую грань позади первой.)
Цель этого кода-создать событие только при нажатии на вершины.
Поэтому после этого я написал код для вычисления евклидова расстояния от точки щелчка и всех вершин
и верните вершину, ближайшую к точке щелчка.
Если у вас есть другая идея, чтобы запустить событие только при нажатии на вершины приветствуется.

611 2

javascript three.js raycasting

2 ответов:

Comments

Ничего не найдено.

Shiva · Accepted Answer · 2017-05-23 15:25:06

Да, Основная идея ray casting состоит в том, что мы проецируем луч перпендикулярно плоскости, в которой мы находим список объектов, которые луч пересек.
Таким образом, все, что вам нужно сделать, чтобы получить доступ к первому элементу, - это добавить следующий фрагмент кода.
var intersects = raycaster.intersectObjects(objects);

if (intersects.length > 0) {
       var firstIntersectedObject  = intersects[0];
       // this will give you the first intersected Object if there are multiple.
    }
Вот один из моих других постов SO, в котором я объяснил вещи немного более подробно, вы можете сослаться на него, чтобы лучше понять, как работает raycasting.

Almaz Vildanov · Accepted Answer · 2015-01-15 16:56:05

Попробуйте сделать через этот Пример . Посмотрите на сообщения в консоли.

<script src="js/controls/EventsControls.js"></script>

EventsControls = new EventsControls( camera, renderer.domElement );
EventsControls.draggable = false;

EventsControls.onclick = function() {

       console.log( this.focused.name );
       console.log( 'this.focusedPoint: (' + this.focusedPoint.x + ', ' +
                     this.focusedPoint.y + ', ' + this.focusedPoint.z + ')' );
       console.log( 'this.focusedDistance: ' + this.focusedDistance );

}

var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh ); 

EventsControls.attach( mesh );

// 

function render() {
       EventsControls.update();
       controls.update();
       renderer.render(scene, camera);
}