Мышь указывает на координаты зрителя - PullRequest
Новая
       18

Мышь указывает на координаты зрителя

0 голосов
/ 28 мая 2019

Я успешно добавил крик в программу просмотра, используя следующий код: 

function addCircle(){

  cameraHUD = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 30);
  viewer.impl.createOverlayScene('leaderOverlay-circle',null,null, cameraHUD);

  var circle_geometry = new THREE.CircleGeometry(10, 32);
  var circle_material = new THREE.MeshBasicMaterial({color: 'rgb(1,1,1)'});
  var circle = new THREE.Mesh(circle_geometry, circle_material);
  circle.position.set(100,100,0);

  viewer.impl.addOverlay('leaderOverlay-circle', circle);
  viewer.impl.invalidate(true)

}

Теперь я хочу добавить этот круг в точку, которая нажимается в средстве просмотра.Мои попытки сделать это заключаются в следующем, но координаты не соответствуют точке нажатия на экране: 

function onClick(ev) {

  var wtc = viewer.clientToViewport(ev.clientX - bounds.left, ev.clientY - bounds.top);
  var projectedPoint = new THREE.Vector3(leader.endPoint.x, leader.endPoint.y, leader.endPoint.z);
  projectedPoint.unproject(cameraHUD);
  var circlePosition = viewer.worldToClient(new THREE.Vector3(point.x, point.y, point.z));

  cameraHUD = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 30);
  viewer.impl.createOverlayScene('leaderOverlay-circle',null,null, cameraHUD);

  var circle_geometry = new THREE.CircleGeometry(10, 32);
  var circle_material = new THREE.MeshBasicMaterial({color: 'rgb(1,1,1)'});
  var circle = new THREE.Mesh(circle_geometry, circle_material);
  circle.position.set(circlePosition);

  viewer.impl.addOverlay('leaderOverlay-circle', circle);
  viewer.impl.invalidate(true);

}

1 Ответ

0 голосов
/ 30 мая 2019

См. здесь , чтобы спроецировать ваши координаты холста на мир сцены - см. Пример в реальном времени здесь : 

const camera= this.viewer.navigation.getCamera();
const vec = new THREE.Vector3();
const pos = new THREE.Vector3();

vec.set(
  ( event.clientX / window.innerWidth ) * 2 - 1,
  - ( event.clientY / window.innerHeight ) * 2 + 1,
  0.5 );

vec.unproject( camera );
vec.sub( camera.position ).normalize();
const distance = - camera.position.z / vec.z;
pos.copy( camera.position ).add( vec.multiplyScalar( distance ) );

...
circle.position.set(pos.x,pos.y,pos.z);
...