Как нарисовать геометрическую фигуру именно там, где щелкают мышью в ThreeJS - PullRequest
Новая
       34

Как нарисовать геометрическую фигуру именно там, где щелкают мышью в ThreeJS

0 голосов
/ 26 сентября 2019

Я пытаюсь нарисовать круг точно там, где нажата мышь, но круг нарисован не в точном положении.Пожалуйста, дайте мне знать, что нужно исправить в коде: 

            var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.set( 0, 0, 1000 );


            document.addEventListener( 'mousedown', onDocumentMouseDown, false );

            function onDocumentMouseDown( event ) {
                event.preventDefault();


                if( event.which == 1) { // left mouse click

                   // x = ( event.clientX / renderer.domElement.clientWidth ) * 2 - 1;
                   // y = - ( event.clientY / renderer.domElement.clientWidth ) * 2 + 1;

                    var x = event.clientX; // x coordinate of a mouse pointer
                    var y = event.clientY; // y coordinate of a mouse pointer
                    var rect = event.target.getBoundingClientRect();

                    x = ((x - rect.left) - window.innerWidth/2)/(window.innerWidth/2);
                    y = (window.innerHeight/2 - (y - rect.top))/(window.innerHeight/2);

                    var geometry = new THREE.CircleGeometry( 20, 32 );
                    var material = new THREE.MeshBasicMaterial( { color: 0x65A8FF } );
                    circle = new THREE.Mesh( geometry, material );

                    //circle.position.x = x*window.innerWidth*1.23;
                    //circle.position.y = y*765; 

                    circle.position.x = x*window.innerWidth;
                    circle.position.y = y*window.innerHeight;

                    scene.add( circle );
                }
            }

1 Ответ

0 голосов
/ 26 сентября 2019

Проблема вашего подхода в том, что он предполагает, что 3D x y координаты связаны с пиксельными координатами без учета перспективы или глубины камеры.С перспективной камерой, чем глубже точка, тем больше будут координаты x, y.Вам необходимо установить глубину (z) для точек, на которых можно остановиться.Кроме того, если ваша камера перемещается или вращается, ваши X, Y координаты не будут работать.

Я рекомендую вам использовать THREE.Raycaster, который выполняет все эти расчеты проекции камеры для вас (Документы имеют пример его использования в верхней части страницы).Вы можете увидеть этот подход в действии в этом примере .

Способ его работы таков:

  1. Вы создаете плоскость для удара лучевого заклинателя (этоВаша глубина).
  2. Создание raycast с Raycaster.setFromCamera ()
  3. Считывание позиции, в которой луч попадает на плоскость.
  4. Используйте эту позицию для создания вашей геометрии.
...