鼠标指向查看器坐标答案

【问题标题】：Mouse point to viewer coordinates鼠标指向查看器坐标
【发布时间】：2019-10-14 05:48:49
【问题描述】：

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

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

}

【问题讨论】：

标签： three.js autodesk-forge autodesk-viewer

【解决方案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);

【讨论】：