Question

我已使用以下代码成功地将一个冰柱添加到查看器中：

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)

}

我现在想在查看器中单击的点处添加此圆圈。我尝试执行以下操作，但Coordiantes不够准确，无法在屏幕上单击：

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);

}

Answer 1

请参阅here将画布坐标投影到场景世界-请参见实时示例here：

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);

鼠标指向查看者坐标

1 个答案: